<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>The RC Time Constant Calculator</
title
>
</
head
>
<
body
class="bg-gray-100 flex items-center
justify-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"
>
RC Time Constant Calculator
</
h1
>
<
div
class
=
"mb-4"
>
<
label
for
=
"resistance"
class
=
"block text-gray-700 mb-2"
>
Resistance (Ω):
</
label
>
<
input
type
=
"number"
id
=
"resistance"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder
=
"Enter resistance"
>
</
div
>
<
div
class
=
"mb-4"
>
<
label
for
=
"capacitance"
class
=
"block text-gray-700 mb-2"
>
Capacitance (F):
</
label
>
<
input
type
=
"number"
id
=
"capacitance"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder
=
"Enter capacitance"
>
</
div
>
<
div
class
=
"flex justify-center mb-4"
>
<
button
id
=
"calculate"
class="w-full bg-blue-500 text-white rounded-md
py-2 px-4 hover:bg-blue-600
focus:outline-none">
Calculate Time Constant
</
button
>
</
div
>
<
div
id
=
"result"
class
=
"text-center text-lg font-semibold"
></
div
>
<
div
id
=
"errorMessage"
class="text-red-500
text-sm mt-2 hidden">
Please enter valid resistance and capacitance values.
</
div
>
</
div
>
<
script
>
const calculateButton = document.getElementById('calculate');
const autoCalculateCheckbox = document.getElementById('autoCalculate');
const resistanceInput = document.getElementById('resistance');
const capacitanceInput = document.getElementById('capacitance');
const resultDisplay = document.getElementById('result');
const errorMessage = document.getElementById('errorMessage');
calculateButton.addEventListener('click', calculateTimeConstant);
autoCalculateCheckbox.addEventListener('change', toggleAutoCalculate);
function calculateTimeConstant() {
const resistance = parseFloat(resistanceInput.value);
const capacitance = parseFloat(capacitanceInput.value);
if (isNaN(resistance) || isNaN(capacitance)) {
errorMessage.classList.remove('hidden');
resultDisplay.textContent = '';
} else {
const timeConstant = resistance * capacitance;
resultDisplay.textContent = `Time Constant (Ï„) =
${timeConstant.toFixed(2)} seconds`;
errorMessage.classList.add('hidden');
}
}
function handleInput() {
calculateTimeConstant();
}
</
script
>
</
body
>
</
html
>