PX-to-REM Calculator

calc-rem.js

(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.html

<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>

Nice work. Thank You!

thank you for sharing this!

Hi mate, this is great. Any chance we can use the enter button on calculate?