Header Ads Widget

Tip calculator using JavaScript

My codding spot August 26, 2023

This post will teach you to making a tip calculator using HTML, CSS, and JavaScript. 

This is a beginner-level project, so you can create it just by using basic knowledge of HTML, CSS, and JavaScript. 

Before starting, let me know about it.

What is a tip calculator?

A tip calculator is a calculator or one type of app which calculate the tip amount of good services in different percentage of the total bill amount.

A tip is money generally given to the person who provides a variety of services in restaurants or hotels etc…

Tip calculator using HTML, CSS, and JavaScript
Tip calculator using HTML, CSS, and JavaScript 

Skills required

HTML

Form element, labels, input fields, buttons, span, and div containers.

CSS

Position, transform, height, width, margin, padding, outline, border, box-sizing, background-color, and font properties.

JavaScript 

Function, if else ladder, Dom method, checked property, etc…


Steps to create JavaScript tip calculator

HTML structure 

Step1:

Take the h1 element for the heading and place it at the top. After that define two input fields which type is the number. Take radio buttons for service categories.  Define two buttons one for calculating tip, and total bill, and another to clear all fields. For displaying results define span elements. 

CSS 

Step2:

Arrange the main div container at the center using position, top, left, and transform properties. Set margins, and padding of all fields, and containers. After that apply background color.

JavaScript

Step3:

Define the function for tip, total tip and the total bill calculation. In calculate function, first fetch values of input field then after radio button values. The checked property is used check state of radio button, if true then its value is fetched by the Dom method. After checking for null fields and negative values of input fields perform calculation. Call this function on calculate button.

Step4:

To clear all values including unchecked radio button specify thanks for input fields. 0 for resulting value and false for unchecked radio button. Call this button on clear button.

For a better understanding of the tip calculator look at the following code.

HTML 

<!DOCTYPE html>
<html>
<head>
<title>Tip Calculator</title>
<link rel="stylesheet" href="tip_calculator.css">
<script src="tipcalc.js"></script>
</head>
<body>
<div class="container">
<form>
<h1>Tip Calculator</h1>
<div class="bill">
<label>Enter bill amount:</label>
&#8377;<input type="number" id="totbill">
</div>
<div class="person">
<label>No. of persons:</label>
<input type="number" id="persons">
</div>
<div class="tip">
<label>Tip on services:</label><br>
<input type="radio" name="val" id="avg">15% Average sevice</br>
<input type="radio" name="val" id="good">20% Good sevice</br>
<input type="radio" name="val" id="best">25% Best sevice</br>
<input type="radio" name="val" id="exe">30% Exellent sevice</br>
<input type="radio" name="val" id="poor">5% Poor sevice</br>
<button type="button" class="calc" onClick="calculate()">Calculate</button>
<button type="button" class="clear "onClick="clr()" >Clear</button>
</div>
</form>
<div class="result">
<span class="total">Total bill(with tip):</span><span class="rs1">&#8377;</span><span id="total">0</span><br>
<span class="tiptotal">Total tip amount:</span><span class="rs2">&#8377;</span><span id="totip">0</span><br>
<span class="persontip">Tip on each person:</span><span class="rs3">&#8377;</span><span id="eachperson">0</span>
</div>
</div>
</body>
</html>

CSS 

.container
{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
height:auto;
width:300px;
padding:10px;
}
*
{
box-sizing:border-box;
font-family:Georgia;
}
h1
{
text-align:center;
background-color:#57bee6;
padding:5px;
color:#3d424a;
}
form
{
background-color:#e4c8ca;
}
.bill
{
margin-left:12%;
}
#totbill
{
width:30%;
padding:7px;
}
#totbill,#persons
{
outline:none;
border:none;
background-color:#b6bbf9;
color:#372753;
font-weight:bold;
font-size:12pt;
}
.person
{
margin-left:12%;
}
#persons
{
width:30%;
padding:5px;
margin:5%;
margin-left:14%;
}
.tip
{
margin-left:17%;
padding:5px;
}
.calc
{
padding:10px;
margin:5%;
margin-left:1%;
background-color:#196f64;
color:#fdff8f;
}
.clear
{
padding:10px;
margin:7%;
background-color:#cf6b59;
color:#ffffff;
}
.calc,.clear
{
box-shadow:5px 5px 15px #000000;
}
.result
{
margin:0%;
padding:5px;
background-color:#567899;
}
.total,.tiptotal,.persontip
{
padding:10px;
color:#ffffff;
}
#total,#totip,#eachperson
{
float:right;
font-weight:bold;
}
#total
{
color:#ffc901;
}
#totip
{
color:#00b330;
}
#eachperson
{
color:#ff6200;
}
.rs2
{
margin-left:7%;
}
.rs1
{
margin-left:3%;
}

JavaScript 

function calculate()
{
//fetching values from user input.
let bill=document.getElementById("totbill").value;
let totpers=document.getElementById("persons").value;
//checking bill amount and persons fields are empty or not.
if(bill<=0 || bill==null)
{
alert("Please, enter the bill amount.");
}
else if(totpers<=0 || totpers==null)
{
alert("Please, enter only positive value.");
}
else{
//fetching tip percentage
var service;
if(document.getElementById("avg").checked)
{
service=document.getElementById("avg").value=0.15;
}
else if(document.getElementById("good").checked)
{
service=document.getElementById("good").value=0.20;
}
else if(document.getElementById("best").checked)
{
service=document.getElementById("best").value=0.25;
}
else if(document.getElementById("exe").checked)
{
service=document.getElementById("exe").value=0.30;
}
else if(document.getElementById("poor").checked)
{
service=document.getElementById("poor").value=0.05;
}
else 
{
alert("Please select service for tip");
}
//calculating tip

let tip=bill*service ;
document.getElementById("totip").innerHTML=tip.toFixed(2);
let total_bill=+bill + +tip;
document.getElementById("total").innerHTML=total_bill.toFixed(2);
let eachpers=tip/totpers;
document.getElementById("eachperson").innerHTML=eachpers.toFixed(2);
}}
//Clear the fields
function clr()
{
document.getElementById("totbill").value=null;
document.getElementById("persons").value=null;
document.getElementById("totip").innerHTML=0;
document.getElementById("total").innerHTML=0;
document.getElementById("eachperson").innerHTML=0;
document.getElementById("avg").checked=false;
document.getElementById("good").checked=false;
document.getElementById("best").checked=false;
document.getElementById("exe").checked=false;
document.getElementById("poor").checked=false;
}

Output

Summary
In this article, you learned to create a tip calculator with basic skills of HTML, CSS and JavaScript. In this post, you learned checked property, fetching values by Dom method, validation of input fields using logical OR (||) statement and if else ladder.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments