Web Developer
Tip Calculator using HTML, CSS and JavaScript
Demo Video Coming Soon ...
In today's blog I will tell you that how you can create a tip calculator using html , css and javascript . If you are a beginner and want to learn html css and javascript then this project will help you to learn the basics of coding So lets start creating our project
Steps to create a project
First of all create a new file in the root directory (folder) of your project and named it as index.html and inside that file paste the below code
Html Code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Tip calculator</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='assets/css/style.css'>
</head>
<body>
<div class="container">
<h2 class="quicktip">Calculate Tip</h2>
<input type="text" value="" placeholder="Enter the bill" id="totalBill"/>
<p id="tiptext">Tip: 0%</p>
<input type="range" value="0" id="tip_percentage"/>
<p id="persontext">No of Persons: 0</p>
<input type="range" value="0" id="noOfPersons"/>
<h3 id="totalBillamount"> Total Amount : 0</h3>
<h3 id="totalperperson"> Total per Person : 0</h3>
</div>
</body>
</html>
<script src='assets/js/main.js'></script>
This is the basic structure of our project now its time to style our tip calculator . To style our tip calculator we will use css but if you have expertise in bootstrap or in tailwind you can also do that . Now create a new folder named "Assets" and inside the assets folder create a new Folder and named it "css" and inside that folder create a file and name it as "style.css" and paste the below code inside style.css
CSS Code
body
{
background-color: rgba(252, 0, 129, 0.25);
}
.container
{
margin: auto;
width: 50vh;
height: 70vh;
padding: 30px;
background-color: white;
box-shadow: rgba(252, 0, 129, 0.25) 12px 54px 55px, rgba(252, 0, 129, 0.25) 0px -12px 30px, rgba(252, 0, 129, 0.25) 0px 4px 6px, rgba(252, 0, 129, 0.25) 0px 12px 13px, rgba(252, 0, 129, 0.25) 0px -3px 5px;
border-radius: 12px;
margin-top: 55px;
}
input
{
width: 90%;
padding: 10px;
height: 10%;
margin: auto;
outline: none;
font-size: large;
}
h2
{
text-align: center;
}
@media (max-width: 600px) {
.container{
width: 80%;
height: 70vh;
}
}
The designing part is complete and now it is time to add some some functionalities in our tip calculator and to add the functionalities we will use JavaScript. so in the assets folder create a new folder and name it as "js" and inside js create a file called "main.js" and paste the below code inside main.js
JavaScript Code
var tip_percentage = document.getElementById("tip_percentage");
var noOfPersons = document.getElementById("noOfPersons");
var totalBill = document.getElementById("totalBill");
var tipperperosn = document.getElementById("tipperperosn");
var totalperperson = document.getElementById("totalperperson");
var tiptext = document.getElementById("tiptext");
var persontext = document.getElementById("persontext");
var totalBillamount = document.getElementById("totalBillamount");
tip_percentage.addEventListener("change", function () {
tiptext.innerText = "Tip : " + tip_percentage.value + "%";
let t = Number(totalBill.value) + (tip_percentage.value / 100) * Number(totalBill.value);
totalBillamount.innerText = "Total Bill inc Tip: " + t;
let totalperpersonn = t / noOfPersons.value;
totalperperson.innerText = "Total per perosn : " + totalperpersonn;
})
noOfPersons.addEventListener("change", function () {
persontext.innerText = "No of Persons : " + noOfPersons.value;
let t = Number(totalBill.value) + (tip_percentage.value / 100) * Number(totalBill.value);
let totalperpersonn = t / noOfPersons.value;
totalperperson.innerText = "Total per perosn : " + totalperpersonn;
})
