Proportion Converter

This is an old revision of the document!

<button type=“warning” size=“sm”>Reload Converter</button>

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

</head> <body> <style>

      body {
          font-family: Arial, sans-serif;
          margin: 20px;
          padding: 20px;
          max-width: 1000px;
      }
      h3 {
          color: #4307f6;
      }
      label {
          font-weight: bold;
      }
      input, button {
          margin-top: 5px;
          padding: 8px;
          font-size: 16px;
      }
      p {
          font-size: 18px;
          font-weight: bold;
          color: blue;
          margin-top: 10px;
      }
  </style>
  <!-- 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">
      <button onclick="calculateA()">Calculate</button>
      <br><br>
      <p id="resultA"></p>
  <hr>
  <!-- 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">
      <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