JSFiddle - React, Tailwind, and code Playground

by CoolBuys1290

HTML

<!DOCTYPE html>
<head>
<title>Calculator Portal</title>
</head>
<body>
<p>From:</p>
  <select style="float:left" id="MetricAndImperial1" class="js-example-basic-single select2-container newClass1" oninput="Run2()" onchange="Run2()">
    </select>



  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="Input1" type="number" oninput="Run1()" onchange="Run1()" />

  <p>To:</p>

  <select style="float:left" id="MetricAndImperial2" class="js-example-basic-single select2-container newClass1" oninput="Run1()" onchange="Run1()">   
  </select>

  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="Input2" type="number" oninput="Run2()" onchange="Run2()" />
  
  <script src="mathandstuff.js"></script>
     <script language="Javascript" type="text/javascript" src="PrototypeMath.js"></script>
     
</body>
</html>

JavaScript

var units = [['Inches', 0.0254], ['Feet', 0.3048], ['Furlongs', 1.828800000565]];
     var selectors = document.querySelectorAll('.newClass1');
     
     for (var i = 0; i < units.length; i++) {
       for (var j = 0; j < selectors.length; j++) {
         var option = document.createElement('option');
         option.value = units[i][1];
         option.textContent = units[i][0];
         selectors[j].add(option);
       }
     }
     
    function Run1() {
      var SpecialValue = document.getElementById("Input1").value * document.getElementById("MetricAndImperial1").value / document.getElementById("MetricAndImperial2").value;
      document.getElementById("Input2").value = SpecialValue.toExponential();

    }

    function Run2() {
      var SpecialValue = document.getElementById("Input2").value * document.getElementById("MetricAndImperial2").value / document.getElementById("MetricAndImperial1").value;
      document.getElementById("Input1").value = SpecialValue.toExponential();
    }