JSFiddle - React, Tailwind, and code Playground

by abhishekjain

HTML

<label>Base size</label>
		<input type="text" id="parent-font-size" value="16"></input><br>
		<label>PX</label>
    	<textarea id="px"></textarea><br>
    	<label>EM</label>
    	<textarea id="em"></textarea><br>
    	<button id="btn" onclick="pxToEm();">CONVERT</button>

JavaScript

function pxToEm(){
    		var px = document.getElementById("px"),
    			em = document.getElementById("em"),
    			parent = document.getElementById("parent-font-size");

    		var pxVal = px.value.match(/\d+px/g).toString().split(',');
    		//var pxToEm = 1 / parent.value * pxVal;
    		//var pxToEmFixed = pxToEm.toFixed(3);
            var lengthValue = pxVal.length;
            
            var pxToEmAnswer;
            for(var i=0;i<lengthValue;i++)
            {
                var valueToBeReplced = pxVal[i].replace(/px/g, "");;
                var valueToBeReplcedExp = new RegExp(valueToBeReplced, "ig");
               // alert((1/16 * valueToBeReplced).toFixed(3));
    		    pxToEmAnswer = px.value.replace(valueToBeReplcedExp,  (1/parseInt(parent.value) * valueToBeReplced).toFixed(3));
            }
    		em.value = pxToEmAnswer.replace(/px/g, "em");
		}