Proportion Converter-Children's Eye Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Proportion Converter ======

<button type="primary" size="sm">[[proportion_converter|Reload Converter]]</button>

<html>
<head>
    <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>

{{tag>calculator}}
calculator