Skip to content

Instantly share code, notes, and snippets.

@daniellmb
Last active November 11, 2024 23:47
Show Gist options
  • Save daniellmb/3c8003550ccff7dd72aa to your computer and use it in GitHub Desktop.
Save daniellmb/3c8003550ccff7dd72aa to your computer and use it in GitHub Desktop.
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>
@mcorderoaraya
Copy link

Muchas gracias

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