Design a Normal CDF Calculator in Tailwind CSS
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.
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 > |
Output:
Contact Us