PX-to-REM Calculator
(function($) { | |
var result = $('#result'); | |
var base = $('#base'); | |
var list = $('#list'); | |
$('#calc').click(function() { | |
var baseVal = base.val(); | |
var px = list.val().split(','); | |
var html = []; | |
$.each(px, function(i, v) { | |
var px = parseInt(v); | |
var rem = parseFloat((px / parseInt(baseVal, 10)).toPrecision(4)); | |
var isBase = (rem === 1) ? ' <i>(base)</i>' : ''; | |
html.push('<li>' + v + 'px = ' + rem + 'rem' + isBase + '</li>') | |
}); | |
result.html(html.join('')); | |
}).click(); | |
}(jQuery)); |
<form> | |
<input id="base" type='text' value='16'> | |
<label> Base <HTML> font-size (in px)</label> | |
<br> | |
<input id='list' type='text' value='1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,18,20,22,24,26,28,30,32,34,36,38,40,50,60,70,80,90,100'> | |
<label> PX sizes to convert</label> | |
<br> | |
<input id='calc' type='button' value='Calculate'> | |
<ul id='result'></ul> | |
</form> |
This comment has been minimized.
This comment has been minimized.
thank you for sharing this! |
This comment has been minimized.
This comment has been minimized.
Hi mate, this is great. Any chance we can use the enter button on calculate? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Nice work. Thank You!