Design a Percentage Calculator in Tailwind CSS

Last Updated : 11 Mar, 2024

The Percentage Calculator implemented in Tailwind CSS is a web-based tool designed to help users calculate percentages with speed and accuracy. It enables users to input two values the total amount and the percentage they want to calculate. Once these values are entered, the calculator displays the result, which is the percentage of the total amount. The tool boasts a responsive design and a visually appealing interface, making it easy to use for anyone.

Screenshot-2024-02-28-152858

Approach

Start by creating a basic HTML structure with a title, a container div, and input fields for the number and percentage. Use Tailwind CSS classes to style the elements and make the calculator responsive.
Use Tailwind CSS classes to style the calculator. Apply colors, borders, padding, and margins to make the calculator visually appealing.
Use flexbox to align the elements and make the calculator responsive.
Write JavaScript code to handle the calculation. Add event listeners to the “Calculate” and “Clear” buttons.
When the “Calculate” button is clicked, get the values from the input fields, calculate the percentage, and display the result and when the “Clear” button is clicked, clear the input fields and the result.
Add error handling to the JavaScript code. Check if the input values are valid numbers. If not, display an error message and change the text color . If the input values are valid, calculate the percentage and display the result.

Example: Implementation to design a percentage calculator.

HTML

<!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=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          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>