Tip Calculator in HTML and JavaScript

Today, we will be making Tip Calculator in HTML and JavaScript. We will be using HTML CSS JavaScript to get the job done. For styling our web page we will be using a bootstrap via CDN. We will calculate the Total Amount, the tip amount, and per person share with the help of javascript. Also, we will include validation for the input boxes.

We will use JavaScript to calculate and display the result.


  • Code Editor (VS Code Preferred)
  • Chromium Browser (Chrome Preferred)
  • Basic Knowledge of HTML, CSS, Javascript, and Bootstrap


  • Calculate and display the total amount spent
  • Calculate and display the tip amount
  • Calculate and display the per person spent

Coding Tip Calculator in HTML and JavaScript

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- import bootstrap cdn -->
    <title>Tip Calculator</title>

    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h1>Tip Calculator</h1>
          <form id="form">
            <div class="form-group"></div>
            <label for="bill">Bill Amount</label>
              class="form-control mb-3"
              placeholder="Enter Bill Amount"
            <label for="tip">Tip Percent</label>
              class="form-control mb-3"
              placeholder="Enter Tip %"
            <label for="people">Number of People</label>
              placeholder="Enter Number of People"
            <button type="submit" class="btn btn-primary my-3">Submit</button>
          <h6 id="result"></h6>
      var form = document.getElementById("form");
      var bill = document.getElementById("bill");
      var tip = document.getElementById("tip");
      var people = document.getElementById("people");
      var tipAmount = document.getElementById("tipAmount");
      var totalAmount = document.getElementById("totalAmount");
      var form = document.getElementById("form");
      var result = document.getElementById("result");

      form.addEventListener("submit", (e) => {
        var billValue = bill.value;
        var tipValue = tip.value;
        var peopleValue = people.value;

        var totalAmountInt =
          parseInt(billValue) +
          (parseInt(billValue) * parseInt(tipValue)) / 100;
        var tipAmountInt = (parseInt(billValue) * parseInt(tipValue)) / 100;

        var totalAmountInt =
          parseInt(billValue) +
          (parseInt(billValue) * parseInt(tipValue)) / 100;

        var perPersonInt =
          parseInt(totalAmountInt) / parseInt(peopleValue).toFixed(2);

        result.innerHTML = `Tip Amount: Rs ${tipAmountInt} <br> Total Amount: Rs ${totalAmountInt} <br> Per Person: Rs ${perPersonInt}`;


The validation screen would look like this:

showing missing field

In the end, the result will look something like this:

final output for Tip Calculator in HTML and JavaScript


I hope Tip Calculator in HTML and JavaScript was easy to understand and that you enjoyed building and learning this at the same time, we learned to use input boxes to take user input and we also learned to use the parseInt function in JavaScript to convert to int and back forth. We also learned to use validation to further make our web app more robust. In end, we did use some dom-manipulation to update the values on the screen.

Also Read:


Author: Harry

Hello friends, thanks for visiting my website. I am a Python programmer. I, with some other members, write blogs on this website based on Python and Programming. We are still in the growing phase that's why the website design is not so good and there are many other things that need to be corrected in this website but I hope all these things will happen someday. But, till then we will not stop ourselves from uploading more amazing articles. If you want to join us or have any queries, you can mail me at admin@violet-cat-415996.hostingersite.com Thank you