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.

Requirements

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

Features

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">
  <head>
    <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 -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <title>Tip Calculator</title>
  </head>

  <body>
    <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>
            <input
              type="number"
              class="form-control mb-3"
              id="bill"
              required
              placeholder="Enter Bill Amount"
            />
            <label for="tip">Tip Percent</label>
            <input
              type="number"
              class="form-control mb-3"
              id="tip"
              required
              placeholder="Enter Tip %"
            />
            <label for="people">Number of People</label>
            <input
              type="number"
              class="form-control"
              id="people"
              required
              placeholder="Enter Number of People"
            />
            <button type="submit" class="btn btn-primary my-3">Submit</button>
          </form>
          <h6 id="result"></h6>
        </div>
      </div>
    </div>
    <script>
      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) => {
        e.preventDefault();
        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}`;
      });
    </script>
  </body>
</html>

Output:

The validation screen would look like this:

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

final output for Tip Calculator in HTML and JavaScript

Conclusion

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.

JavaScript and web Projects

Also Read: