JSFiddle - React, Tailwind, and code Playground

by Alvin Olavarrieta

HTML

<h1>PX to EM converter</h1>

 <div id="base">
 <h2>Enter a base pixel size</h2>
 <input id="baseSize" value="16"><p>px</p>
 </div>

 <div id="px">
 <input id="pxInput" value="16"><p>px</p>
 <div id="emOutput2"></div>
 </div><p>em</p>

 <div id="Em">
 <input id="emInput" value="1"><p>em</p>
 <div id="pxOutput2">
 </div><p>px</p></div>

JavaScript

$(document).ready(function(){
    $("#pxInput").keyup(function(){
         var emOutput = function (){ return $('#pxInput').val()/$('#baseSize').val();};
         $('#emOutput2').html(emOutput);
    });
    $("#emInput").keyup(function(){
         var pxOutput = function (){ return $('#emInput').val()/$('#baseSize').val();};
         $('#pxOutput2').html(pxOutput);
    });
    
 var baseSize2= $('#baseSize').val();
 var pxInput = $('#pxInput').val();
 var emInput =$('#emInput').val();
 var emOutput = function (){ return pxInput/baseSize2;};
 var pxOutput = function (){return emInput*baseSize2;};

 $('#baseSize').attr('value', baseSize2);
 $('#pxInput').attr('value', pxInput);
 $('#emInput').attr('value', emInput);
 $('#pxOutput2').html(pxOutput);
 $('#emOutput2').html(emOutput);

 });