<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>The Inductor Value Calculator</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="flex justify-center items-center h-screen">
<div class="max-w-md w-full bg-white p-8
rounded-lg shadow-lg border-2 border-green-500">
<h1 class="text-3xl font-bold
text-center mb-8">Inductor Value Calculator</h1>
<div class="mb-4">
<label for="inductance" class="block text-gray-700">
Inductance (L) in Henry:</label>
<input type="number" id="inductance"
name="inductance"
class="w-full border border-gray-300 rounded-md
px-3 py-2 focus:outline-none
focus:border-blue-500"
placeholder="Enter inductance value">
</div>
<div class="mb-4">
<label for="frequency" class="block text-gray-700">
Frequency (f) in Hertz:</label>
<input type="number" id="frequency"
name="frequency"
class="w-full border border-gray-300
rounded-md px-3 py-2 focus:outline-none
focus:border-blue-500"
placeholder="Enter frequency value">
</div>
<div class="mb-4">
<label for="inductiveReactance" class="block text-gray-700">
Inductive Reactance (XL) in Ohms:</label>
<input type="number" id="inductiveReactance"
name="inductiveReactance"
class="w-full border border-gray-300
rounded-md px-3 py-2 focus:outline-none
focus:border-blue-500"
placeholder="Enter inductive reactance value">
</div>
<div class="mb-8">
<button id="calculateButton"
class="w-full bg-blue-500 text-white rounded-md
py-2 px-4 hover:bg-blue-600
focus:outline-none">Calculate
Inductance</button>
</div>
<div id="inductanceResult" class="text-lg
font-semibold text-center"></div>
<div id="errorMessage" class="text-red-500
text-sm mt-4 hidden">
Please fill in all fields.</div>
</div>
</div>
<script>
const calculateButton = document.getElementById('calculateButton');
calculateButton.addEventListener('click', () => {
const inductance = parseFloat(document
.getElementById('inductance').value);
const frequency = parseFloat(document
.getElementById('frequency').value);
const inductiveReactance = parseFloat(document
.getElementById('inductiveReactance').value);
if (!inductance || !frequency ||
!inductiveReactance) {
document.getElementById('errorMessage')
.classList.remove('hidden');
return;
}
const inductorValue = inductiveReactance / (2 * Math.PI * frequency);
document.getElementById('inductanceResult').innerHTML =
`Inductor Value: ${inductorValue.toFixed(2)} H`;
document.getElementById('errorMessage').classList.add('hidden');
});
</script>
</body>
</html>
