<!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>