<!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
>