<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Percentage Calculator</
title
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
class="bg-gray-100 min-h-screen flex
items-center justify-center">
<
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"
>
Percentage Calculator
</
h1
>
<
div
class
=
"mb-4 flex items-center"
>
<
label
for
=
"numberInput"
class="block text-sm font-medium
text-gray-700 mr-2">
Number:
</
label
>
<
input
type
=
"number"
id
=
"numberInput"
class="w-full border border-gray-300 rounded-md
py-2 px-3 ml-4 focus:outline-none
focus:border-blue-500">
</
div
>
<
div
class
=
"mb-4 flex items-center"
>
<
label
for
=
"percentageInput"
class
=
"block text-sm font-medium text-gray-700 mr-2"
>
Percentage:
</
label
>
<
input
type
=
"number"
id
=
"percentageInput"
class="w-full border border-gray-300 rounded-md py-2
px-3 focus:outline-none focus:border-blue-500">
</
div
>
<
div
class
=
"flex justify-between mb-4"
>
<
button
id
=
"calculateButton"
class="w-1/2 bg-blue-500 text-white rounded-md py-2
px-4 hover:bg-blue-600 focus:outline-none mr-2">
Calculate
</
button
>
<
button
id
=
"clearButton"
class="w-1/2 bg-gray-300 text-gray-700 rounded-md py-2
px-4 hover:bg-gray-400 focus:outline-none ml-2">
Clear
</
button
>
</
div
>
<
div
id
=
"result"
class
=
"text-center text-lg font-semibold"
></
div
>
</
div
>
<
script
>
const numberInput = document.getElementById('numberInput');
const percentageInput = document.getElementById('percentageInput');
const calculateButton = document.getElementById('calculateButton');
const clearButton = document.getElementById('clearButton');
const result = document.getElementById('result');
calculateButton.addEventListener('click', function () {
const number = parseFloat(numberInput.value);
const percentage = parseFloat(percentageInput.value);
if (isNaN(number) || isNaN(percentage)) {
result.textContent = 'Please enter valid numbers!';
result.classList.add('text-red-500');
} else {
const calculatedPercentage = (number * percentage) / 100;
result.textContent =
`${percentage}% of ${number} is ${calculatedPercentage}`;
result.classList.remove('text-red-500');
}
});
clearButton.addEventListener('click', function () {
numberInput.value = '';
percentageInput.value = '';
result.textContent = '';
});
</
script
>
</
body
>
</
html
>