Tip Calculator Card using Tailwind CSS & JavaScript

Last Updated : 07 Mar, 2024

Tip Calculator in Tailwind CSS is a simple and user-friendly tool designed to help users calculate tips for various services. It allows users to input the total bill amount, select a tip percentage, and choose the number of people splitting the bill. The calculator then displays the tip amount, the total bill including the tip, and the amount each person should pay. In this we will design a responsive and visual appealing Tip Calculator using the Tailwind CSS.

Approach to create Tip Calculator Card :

Begin with a standard HTML5 structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Import the Tailwind CSS library for styling.
Create a container div with Tailwind CSS classes for styling. Set the background color of the body to a shade of green using inline CSS.
Inside the container, include a title for the tip calculator and three input fields: one for the bill amount, one for the level of service, and one for the number of people sharing the bill. Use Tailwind CSS classes for styling.
Add a button with Tailwind CSS classes for styling. This button will trigger the calculation of the tip amount when clicked.
Use JavaScript to handle the calculation logic. Add an event listener to the calculate button that calls a function to calculate the tip amount. Inside this function, retrieve the values from the input fields, perform the calculation, and display the result.
Create a div to display the calculated tip amount. Initially, this div should be hidden. When the tip is calculated, remove the 'hidden' class from this div and update its content with the calculated tip amount.
Validate the input values to ensure they are valid numbers and that the service value is not zero. If any of the input values are invalid, display an alert message and prevent the calculation.
Use Tailwind CSS classes to style the container, input fields, button, and tip amount display. Customize the colors, fonts, and layout to create an appealing visual design for the tip calculator.

Example: Implementation to create a tip calculator.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>The Tip Calculator</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" 
          rel="stylesheet">
    <style>
        body {
            background-color: #4CAF50;
        }

        .container {
            width: 80%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="container px-4 py-8">
        <div class="tip-calculator 
                    bg-white rounded-lg shadow-lg p-8">
            <h1 class="text-2xl font-bold text-center text-gray-800 mb-8">
                  TIP CALCULATOR
              </h1>
            <div class="mb-4">
                <label for="amount" class="block text-gray-700">
                      Bill Amount
                  </label>
                <input type="text" id="amount" placeholder="Amount to be paid"
                       class="input-field border border-gray-300 
                              rounded-md px-4 py-2 w-full focus:outline-none 
                              focus:ring focus:ring-blue-400">
            </div>
            <div class="mb-4">
                <label for="services" class="block text-gray-700">
                      How was the service ?
                  </label>
                <select id="services"
                        class="input-field border border-gray-300 
                                  rounded-md px-4 py-2 w-full focus:outline-none 
                               focus:ring focus:ring-blue-400">
                    <option selected disabled hidden>Select</option>
                    <option value="0.25">25% - Top Notch</option>
                    <option value="0.20">20% - Excellent</option>
                    <option value="0.15">15% - Good</option>
                    <option value="0.10">10% - Bad</option>
                    <option value="0.05">5% - Worst</option>
                </select>
            </div>
            <div class="mb-4">
                <label for="persons" class="block text-gray-700">
                      Total number of persons
                  </label>
                <input type="text" id="persons" 
                       placeholder="Number of people sharing the bill"
                       class="input-field border border-gray-300 
                              rounded-md px-4 py-2 w-full focus:outline-none 
                              focus:ring focus:ring-blue-400">
            </div>
            <button id="calculate"
                    class="btn-calculate bg-blue-500 text-white 
                           rounded-md px-4 py-2 w-full focus:outline-none 
                           focus:ring focus:ring-blue-400">
                  Calculate
              </button>
            <div id="tip-amount" class="tip-amount hidden text-2xl 
                                        font-bold text-center 
                                        text-gray-800 mt-4">
              </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById('calculate')
                      .addEventListener('click', calculateTip);
        });
        function calculateTip() {
            let amount = parseFloat(document.getElementById('amount').value);
            let persons = parseInt(document.getElementById('persons').value);
            let service = parseFloat(document.getElementById('services').value);
            if (isNaN(amount) || isNaN(persons) 
                || isNaN(service) || service === 0 || persons === 0) 
            {
                alert("Please enter valid values");
                return;
            }
            let total = (amount * service) / persons;
            total = total.toFixed(2);
            document.getElementById('tip-amount').
                classList.remove('hidden');
            document.getElementById('tip-amount').
                innerHTML = `Tip Amount: ${total} ₹ each`;
        }
    </script>
</body>

</html>