Tip calculator using Vanilla JavaScript

Introduction

I've created this amazing tip calculator. It helps us to calculate tip to be given and to calculate equal distributions.

*Code for Tip Calculator : *

HTML :

<div class="calculator">
        <h1>Tip Calculator</h1>
        <input type="number" id="totalBill" placeholder="Total Bill">
        <input type="number" id="numOfPerson" placeholder="Number of Person">
        <button type="button" class="calculateBtn" 
        onclick="calculateTip()">Calculate</button>
        <div class="result" id="result"></div>
</div>

CSS :

@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  margin-top: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calculator input {
  margin: 16px 0;
  height: 40px;
  width: 20rem;
  padding: 10px;
}

.calculateBtn {
  font-size: 16px;
  padding: 6px 25px;
  width: 100%;
  background: #22d3ee;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.result {
  width: 100%;
  min-height: 100px;
  border: 1px solid gainsboro;
  box-shadow: -3px 4px 11px 0px rgba(0, 0, 0, 0.41);
  margin-top: 20px;
  padding: 20px;
}

JavaScript :

 <script>
        let result = document.getElementById("result");
        let resultInfo = `
        <h5 style="margin: 8px 0;">Tip : </h5>
        <h5 style="margin: 8px 0;">Total : </h5>
        <h5 style="margin: 8px 0;">Each Person Pay : </h5>
        `
        result.innerHTML = resultInfo

        function calculateTip() {
            let bill = Number(document.getElementById("totalBill").value);
            let numOfPerson = Number(document.getElementById("numOfPerson").value);

            let tip = bill * .15;
            let totalBill = bill + tip;
            let perPersonPay = totalBill / numOfPerson

            result.innerHTML = `
            <h5 style="margin: 8px 0;">Tip : ${tip}</h5>
            <h5 style="margin: 8px 0;">Total : ${totalBill}</h5>
            <h5 style="margin: 8px 0;">Each Person Pay : ${perPersonPay}</h5>
            `
        }
</script>

Blog

Tip calculator using Vanilla JavaScript

Piyush | Coding Torque

Introduction

HTML :

CSS :

JavaScript :

Join Our Newsletter. No Spam, Only the good stuff.

Related