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 =
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:
Recommended Articles