Design a Tip Calculator using HTML, CSS and JavaScript

Last Updated : 27 Dec, 2023

The tip is the money given as a gift for good service, to the person who serves you in a restaurant. In this project, a simple tip calculator is made which takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person. In this article, we are going to learn how to design a Tip Calculator using HTML, CSS, and JavaScript.

Prerequisites:

Approach

Use HTML to give proper structure to your project.
Use CSS for styling
In JavaScript,
- The script is triggered when the window is fully loaded, binding the calculateTip function to the “Calculate” button’s click event.
- The calculateTip function retrieves input values for amount, number of persons, and service type from corresponding HTML elements.
- Input validation checks if the amount is empty and the service type is set to ‘Select’. If so, an alert is displayed, and further execution is halted.
- Display logic adjusts the visibility of the ‘each’ element based on the number of persons: hidden if there is one person and visible otherwise.
- Tip calculation involves multiplying the amount, and service type, and dividing by the number of persons. The result is displayed with proper formatting on the webpage.

Example: In this example, we are following the above approach.

Javascript

window.onload = () =>
    //the function called when Calculate button is clicked.
    {
        /*calling a function calculateTip
         which will calculate the tip for the bill.*/
        document.querySelector('#calculate').onclick = calculateTip;
    }
 
function calculateTip() {
    /*assign values of ID : amount, person and service to 
    variables for further calculations.*/
    let amount = document.querySelector('#amount').value;
    let persons = document.querySelector('#persons').value;
    let service = document.querySelector('#services').value;
 
    console.log(service);
    /*if statement will work when user presses 
          calculate without entering values. */
    //so will display an alert box and return.
    if (amount === '' && service === 'Select') {
        alert("Please enter valid values");
        return;
    }
 
    //now we are checking number of persons 
    if (persons === '1')
    //if there is only one person then we need not to display each.
        document.querySelector('#each').style.display = 'none';
    else
    //if there are more than one person we will display each.  
        document.querySelector('#each').style.display = 'block';
 
    /*calculating the tip by multiplying total-bill and type of
     service; then dividing it by number of persons.*/
    //fixing the total amount upto 2 digits of decimal
    let total = (amount * service) / persons;
    total = total.toFixed(2);
 
    //finally displaying the tip value 
    document.querySelector('.tip').style.display = 'block';
    document.querySelector('#total').innerHTML = total;
}

HTML

<html>
 
<head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="app.js">
    </script>
</head>
 
<body>
    <div class="container">
        <h1>TIP CALCULATOR</h1>
        <div class="wrapper">
 
            <p>Bill Amount</p>
            <input type="text" id="amount" placeholder="Amount to be paid"> ₹
            <p>How was the service ?</p>
            <select id="services">
                <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>
            <p>Total number of persons</p>
            <input type="text" id="persons" placeholder="Number of people sharing the bill">
            <button id="calculate">Calculate</button>
        </div>
 
        <div class="tip">
            <p>Tip Amount</p>
            <span id="total">0</span>₹
            <span id="each">each</span>
        </div>
    </div>
</body>
 
</html>

CSS

body {
    background-color: #001f4f;
    font-family: "Raleway", sans-serif;
}
 
.container {
    width: 350px;
    height: 500px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 20px;
}
 
h1 {
    position: absolute;
    left: 50%;
    top: -60px;
    width: 300px;
    transform: translateX(-50%);
    background-color: #ff851b;
    color: #fff;
    font-weight: 100;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 18px;
    text-align: center;
    padding: 10px;
}
 
.wrapper {
    padding: 20px;
}
 
input,
select {
    width: 80%;
    border: none;
    border-bottom: 1px solid #0074d9;
    padding: 10px;
}
 
input:focus,
select:focus {
    border: 1px solid #0074d9;
    outline: none;
}
 
select {
    width: 88% !important;
}
 
button {
    margin: 20px auto;
    width: 150px;
    height: 50px;
    background-color: #39cccc;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
}
 
.tip {
    text-align: center;
    font-size: 18px;
    display: none;
}