Hello World Example

by CoolBuys1290

HTML

<!DOCTYPE html>

<head>
  <title>Calculator Portal</title>
</head>

<body>
  <p>From:</p>
  <select style="float:left" id="MetricAndImperial1" class="newClass1" oninput="Run2()">
    </select>



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

  <p>To:</p>

  <select style="float:left" id="MetricAndImperial2" class="newClass1" oninput="Run1()">   
  </select>

  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="Input2" type="number" oninput="Run2()" />
  <script>
    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.parseFloat.toExponential(document.getElementById("Input1").value.length);

    }

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

  </script>

</body>

</html>