Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 &lt;HTML&gt; 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>
@blacksmoke26

This comment has been minimized.

blacksmoke26 commented Apr 7, 2018

Nice work. Thank You!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment