Proportion Converter

This is an old revision of the document!

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculate A</title>

</head> <body>

  <!-- Equation for A = 100 / B -->
      <h3>Convert % to 1 in... </h3>
      <label for="inputB">Enter Percent Occurrence: </label>
      <input type="number" id="inputB" step="any">
      <br><br>
      <button onclick="calculateA()">Calculate</button>
      <br><br>
      <p id="resultA"></p>

  <!-- Equation for C = (1/D)* 100 -->
      <h3>Convert 1 in... to % </h3>
      <label for="inputD">Enter Occurrence, 1 in ... </label>
      <input type="number" id="inputD" step="any">
      <br><br>
      <button onclick="calculateC()">Calculate</button>
      <br><br>
      <p id="resultC"></p>
      
      <script>
          function calculateA() {
              let B = parseFloat(document.getElementById("inputB").value);
              let resultElement = document.getElementById("resultA");

              if (B === 0) {
                  resultElement.innerHTML = "Value cannot be zero";
                  return;
              }
              if (isNaN(B)) {
                  resultElement.innerHTML = "Please enter a valid number.";
                  return;
              }
              let A = 100 / B;
              let formattedA = A.toLocaleString(); // format output

              resultElement.innerHTML = "The occurrence is <b>1 in " + formattedA + "</b>";
          }

          function calculateC() {
              let D = parseFloat(document.getElementById("inputD").value);
              let resultElement = document.getElementById("resultC");

              if (D === 0) {
                  resultElement.innerHTML = "Value cannot be zero";
                  return;
              }
              if (isNaN(D)) {
                  resultElement.innerHTML = "Please enter a valid number.";
                  return;
              }
              let C = (1 / D) * 100;
              resultElement.innerHTML = "This equals <b> " + C + " % </b>";  // Display full precision without limiting decimals   
          }
          
            // Listen for "Enter" keypress for B input
            document.getElementById("inputB").addEventListener("keypress", function(event) {
              if (event.key === "Enter") {
                  calculateA();
              }
         });

              // Listen for "Enter" keypress for D input
              document.getElementById("inputD").addEventListener("keypress", function(event) {
              if (event.key === "Enter") {
                  calculateC();
              }
          });    
      </script>

</body> </html>

calculator