Design a Tip Calculator using HTML, CSS and JavaScript (original) (raw)

Last Updated : 02 Jun, 2025

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 that 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.

**You can find the live preview below, try it:

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.

HTML `

TIP CALCULATOR

        <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>

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; }

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;

}

**Output

Design a Tip Calculator using HTML, CSS and JavaScript