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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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:
Design a Discount Calculator in Tailwind CSS
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.