In this project, we’ll create a Discount Calculator using HTML, Tailwind CSS and JavaScript. The calculator will allow users to input the original price of an item and discount percentage and it will calculate and display the discounted price.
Prerequisites / Technologies Used
- HTML
- CSS (Tailwind CSS)
- JavaScript
Approach / Functionalities
The Discount Calculator will have the following functionalities:
- Input fields for original price and discount percentage.
- Calculate button to calculate the discounted price.
- Clear button to reset the input fields.
- Error message display if either input field is empty or contains invalid input.
- Display the discounted price when the Calculate button is clicked.
Example : This code defines a simple web page with a Discount Calculator. Users input the original price and discount percentage, and the page calculates and displays the discounted price upon clicking the “Calculate” button.
HTML
<!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>
|
Output:
Recommended Articles