<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>The Discount Calculator</
title
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
class="bg-gray-100 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"
>
Discount Calculator
</
h1
>
<
div
class
=
"mb-4 flex items-center"
>
<
label
for
=
"originalPrice"
class
=
"text-gray-700 mr-2"
>
Original Price:
</
label
>
<
input
type
=
"number"
id
=
"originalPrice"
class="w-32 border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500">
</
div
>
<
div
class
=
"mb-4 flex items-center"
>
<
label
for
=
"discountPercentage"
class
=
"text-gray-700 mr-2"
>
Discount Percentage:
</
label
>
<
input
type
=
"number"
id
=
"discountPercentage"
class="w-32 border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500">
</
div
>
<
div
class
=
"mb-8 flex justify-center space-x-4"
>
<
button
id
=
"calculateButton"
class="bg-blue-500 text-white
rounded-md py-2 px-4
hover:bg-blue-600 focus:outline-none">
Calculate
</
button
>
<
button
id
=
"clearButton"
class="bg-gray-300 text-gray-700
rounded-md py-2
px-4 hover:bg-gray-400
focus:outline-none">
Clear
</
button
>
</
div
>
<
div
id
=
"result"
class
=
"text-center text-lg font-semibold"
>
</
div
>
<
div
id
=
"errorMessage"
class
=
"text-center text-red-500 mt-4 hidden"
>
Please enter both original price and
discount percentage.
</
div
>
</
div
>
<
script
>
document.getElementById('calculateButton')
.addEventListener('click', function () {
const originalPrice =
parseFloat(document.getElementById('originalPrice').value);
const discountPercentage =
parseFloat(document.getElementById('discountPercentage').value);
if (isNaN(originalPrice) || isNaN(discountPercentage)) {
document.getElementById('errorMessage')
.classList.remove('hidden');
document.getElementById('result').textContent = '';
} else {
document.getElementById('errorMessage')
.classList.add('hidden');
const discountAmount =
originalPrice * (discountPercentage / 100);
const discountedPrice =
originalPrice - discountAmount;
document.getElementById('result').textContent =
`Discounted Price: $${discountedPrice
.toFixed(2)}`;
}
});
document.getElementById('clearButton')
.addEventListener('click', function () {
document.getElementById('originalPrice').value = '';
document.getElementById('discountPercentage').value = '';
document.getElementById('result').textContent = '';
document.getElementById('errorMessage').classList.add('hidden');
});
</
script
>
</
body
>
</
html
>