This project is an Inductor Value Calculator designed using the Tailwind CSS. It allows users to input values for inductance, frequency and inductive reactance and then calculates the inductor value based on provided inputs.
Prerequisites
Approach
- Set up a new HTML file.
- Include the Tailwind CSS CDN link in <head> section for styling.
- Design the layout and input fields for calculator using the Tailwind CSS classes.
- Write JavaScript code to handle input values and perform the calculations.
- Add event listeners to “Calculate Inductance” button to trigger the calculation. Display the result to user.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!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>
|
Output:
Recommended Articles