Skip to content

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.

Copy link

@blacksmoke26 blacksmoke26 commented Apr 7, 2018

Nice work. Thank You!

@tandavala

This comment has been minimized.

Copy link

@tandavala tandavala commented Jul 20, 2019

thank you for sharing this!

@singe-k

This comment has been minimized.

Copy link

@singe-k singe-k commented May 7, 2020

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
You can’t perform that action at this time.