Design a Normal CDF Calculator in Tailwind CSS

Last Updated : 08 Mar, 2024

The Normal CDF Calculator is a convenient web-based tool that allows users to calculate the cumulative distribution function (CDF) for a given mean, standard deviation, and X value. It helps users to perform statistical calculations related to normal distributions with ease.

Screenshot-2024-02-27-120013

Approach:

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Import external resources like Tailwind CSS for styling.
Create a container div with Tailwind CSS classes for styling. Inside the container, include input fields for mean, standard deviation, and X value.
Add buttons for calculating the Normal CDF and clearing the input fields. Use event listeners to trigger the calculation and clearing functions.
Use JavaScript to handle the calculation of the Normal CDF. Define a function to calculate the CDF using the error function (erf) and the given mean, standard deviation, and X value.
Display the calculated CDF in a div with an id of “result”. Use the toFixed() method to round the result to four decimal places before displaying it.

Example: Implementation to design a normal CDF calculator.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Normal CDF Calculator</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-200 h-screen flex 
             justify-center items-center">
    <div class="max-w-md w-full bg-white p-8 
                rounded-md shadow-md border-2 border-green-500">
        <h1 class="text-3xl font-semibold text-gray-800 mb-6">
              Normal CDF Calculator
          </h1>
        <div class="mb-4">
            <label for="mean"
                       class="block text-lg font-medium 
                           text-gray-700">
                  Mean (μ)
              </label>
            <input type="number" id="mean"
                   class="form-input mt-1 block w-full"
                   placeholder="Enter mean">
        </div>
        <div class="mb-4">
            <label for="std-dev"
                   class="block text-lg font-medium text-gray-700">
                  Standard Deviation (σ)
              </label>
            <input type="number" id="std-dev"
                   class="form-input mt-1 block w-full"
                   placeholder="Enter standard deviation">
        </div>
        <div class="mb-4">
            <label for="x-value"
                   class="block text-lg font-medium text-gray-700">
                  X Value
              </label>
            <input type="number" id="x-value"
                   class="form-input mt-1 block w-full"
                   placeholder="Enter X value">
        </div>
        <div class="flex justify-between">
            <button id="calculate-btn"
                    class="bg-blue-500 text-white px-4 py-2 
                              rounded-md hover:bg-blue-600 
                           focus:outline-none">
                  Calculate
              </button>
            <button id="clear-btn"
                    class="bg-gray-500 text-white px-4 py-2 rounded-md 
                           hover:bg-gray-600 focus:outline-none">
                  Clear
              </button>
        </div>
        <div id="result" class="mt-6 text-gray-800"></div>
    </div>
    <script>
        document.getElementById('calculate-btn')
              .addEventListener('click', () => {
            const mean = 
                  parseFloat(document.getElementById('mean').value);
            const stdDev = 
                  parseFloat(document.getElementById('std-dev').value);
            const xValue = 
                  parseFloat(document.getElementById('x-value').value);
            if (isNaN(mean) || isNaN(stdDev) || isNaN(xValue)) {
                alert('Please enter values in all fields.');
                return;
            }
            const result = calculateCDF(mean, stdDev, xValue);
            document.getElementById('result').textContent = 
                  `CDF: ${result.toFixed(4)}`;
        });
        document.getElementById('clear-btn')
              .addEventListener('click', () => {
            document.getElementById('mean').value = '';
            document.getElementById('std-dev').value = '';
            document.getElementById('x-value').value = '';
            document.getElementById('result').textContent = '';
        });
        function calculateCDF(mean, stdDev, xValue) {
            const z = (xValue - mean) / stdDev;
            return 0.5 * (1 + Math.sign(z) * erf(Math.abs(z) / Math.sqrt(2)));
        }
        function erf(x) {
            const a1 = 0.254829592;
            const a2 = -0.284496736;
            const a3 = 1.421413741;
            const a4 = -1.453152027;
            const a5 = 1.061405429;
            const p = 0.3275911;
            const sign = Math.sign(x);
            x = Math.abs(x);
            const t = 1.0 / (1.0 + p * x);
            const y = 
                  1.0 - ((((a5 * t + a4) * t) + a3) * t + a2) 
                        * t * Math.exp(-x * x);
            return sign * y;
        }
    </script>
</body>
 
</html>