<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Current Ratio Calculator</
title
>
</
head
>
<
body
class
=
"bg-gray-100"
>
<
div
class="min-h-screen flex flex-col
justify-center items-center">
<
div
class="max-w-md w-full bg-white p-8 rounded-lg
shadow-md border-2 border-green-500">
<
h1
class
=
"text-3xl font-bold text-center mb-8"
>
Current Ratio Calculator
</
h1
>
<
div
class
=
"mb-4"
>
<
label
for
=
"currentAssets"
class
=
"block text-gray-700"
>
Current Assets:
</
label
>
<
input
type
=
"number"
id
=
"currentAssets"
class="w-full border border-gray-300
rounded-md px-4 py-2 focus:outline-none
focus:border-blue-500"
placeholder
=
"Enter current assets"
>
</
div
>
<
div
class
=
"mb-4"
>
<
label
for
=
"currentLiabilities"
class
=
"block text-gray-700"
>
Current Liabilities:
</
label
>
<
input
type
=
"number"
id
=
"currentLiabilities"
class="w-full border border-gray-300 rounded-md
px-4 py-2 focus:outline-none
focus:border-blue-500"
placeholder
=
"Enter current liabilities"
>
</
div
>
<
button
id
=
"calculateBtn"
class="w-full bg-blue-500 text-white rounded-md
py-2 px-4 hover:bg-blue-600 focus:outline-none">
Calculate Current Ratio
</
button
>
<
div
id
=
"result"
class
=
"text-center mt-4 font-bold text-lg"
></
div
>
</
div
>
</
div
>
<
script
>
document.getElementById('calculateBtn')
.addEventListener('click', function () {
const currentAssets =
parseFloat(document.getElementById('currentAssets')
.value);
const currentLiabilities =
parseFloat(document.getElementById('currentLiabilities')
.value);
if (!isNaN(currentAssets) && !isNaN(currentLiabilities)
&& currentLiabilities !== 0) {
const currentRatio = currentAssets / currentLiabilities;
document.getElementById('result').textContent =
`Current Ratio: ${currentRatio.toFixed(2)}`;
} else {
document.getElementById('result')
.textContent = `Please enter valid values
for current assets and liabilities!`;
}
});
</
script
>
</
body
>
</
html
>