PX-to-REM Calculator

calc-rem.js

document.addEventListener("DOMContentLoaded", function() {
  var result = document.getElementById('result');
  var base = document.getElementById('base');
  var list = document.getElementById('list');

  document.getElementById('calc').addEventListener('click', function() {
    var baseVal = base.value;
    var px = list.value.split(',');
    var html = [];

    px.forEach(function(v) {
      var pxVal = parseInt(v);
      var rem = parseFloat((pxVal / parseInt(baseVal, 10)).toPrecision(4));
      var isBase = (rem === 1) ? ' <i>(base)</i>' : '';
      html.push('<li>' + v + 'px = ' + rem + 'rem' + isBase + '</li>');
    });

    result.innerHTML = html.join('');
  });

  // Trigger click on load
  document.getElementById('calc').click();
});

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>