Calculating tips can be difficult at times, especially when you want to make sure you’re leaving enough money for excellent service. A tip calculator is a useful tool for simplifying this procedure, making it quick and straightforward to calculate the tip and total amount on your statement. In this blog post, we’ll show you how to make a basic yet effective tip calculator with HTML, CSS, and JavaScript. Whether you’re new to web development or simply want to add a useful function to your website, this guide will walk you through the process of creating your own tip calculator.
Let’s get started…
Section 1: Setup
Before we begin coding, let’s ensure we have everything ready.
Prerequisites:
- HTML: Basic understanding of structure and input elements.
- CSS: Knowledge of basic styling.
- JavaScript: Familiarity with functions and DOM manipulation.
Tools Needed:
- Code Editor: Any text editor like Visual Studio Code, Sublime Text, or Atom.
- Web Browser: Preferably Chrome, Firefox, or any modern browser for testing.
Setup Instructions
- Create Project Folder: Make a new folder for your project.
- Create Files: Inside your project folder, create three files: index.html, style.css, and script.js .
- Link Files: Open index.html and link your CSS and JavaScript files.
Section 2: Implementation
Step 1: HTML Structure
First, let’s create the HTML structure for our navbar. Open index.html and add the following code inside the <body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="app">
<div class="Calculator">
<header><h1>Tip Calculator</h1></header>
<form >
<label for="amount">Amount:
<input type="number" id="amt" placeholder="Enter the Amount" required>
</label><br>
<label for="amount" >Tip Percentage:
<select name="tip" id="tip" required>
<option value="30">30%</option>
<option value="25">25%</option>
<option value="20">20%</option>
<option value="15">15%</option>
<option value="10">10%</option>
<option value="5">5%</option>
</select>
</label><br>
<label for="persons">Persons:
<input type="number" id="persons" required placeholder="How many are sharing the bill?">
</label><br>
</form>
<section class="tip-wrap">
<p>You should tip:</p>
<h3 class="tipval" id="tipval">₹ 0</h3>
<button onclick="tipCalc()">Calculate</button>
</section>
</div>
</div>
</body>
</html>
Step 2: CSS Styling
Open style.css and add the following CSS code:
* {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
html,body{
display: grid;
/* height: 100%; */
/* width: 100%; */
text-align: center;
justify-content: center;
background: #dde6f0;
}
.app{
position: relative;
display: grid;
width: 400px;
height: 450px;
top: 20%;
/* max-width: 400px; */
background: #fff;
border-radius: 16px;
justify-content: center;
box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.Calculator{
position: absolute;
z-index: 1;
display: grid;
width: 100%;
height: 100%;
justify-content: center;
align-items:start;
margin-top: -25px;
}
header{
background-image: linear-gradient(to left, #d9ed69, #7aebc9ef);
padding: 10px 70px;
box-shadow: 0px 3px 12px rgba(0,0,0,0.4);
border-radius: 10px;
}
form{
display: flex;
flex-direction: column;
margin-top: 10px;
font-size: 20px;
font-weight: 700;
font-family:'Times New Roman', Times, serif;
overflow: hidden;
}
label input,select{
appearance: none;
/* padding: 8px; */
border: none;
outline: none;
display: block;
width: 100%;
padding: 10px 15px;
border-bottom: 3px solid rgb(221, 235, 122);
color: #212121;
}
.tip-wrap{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p{
color: #212121;
font-size: 20px;
margin-bottom: 10px;
}
.tipval{
padding: 15px 25px;
margin-bottom: 15px;
box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
background-image: linear-gradient(to bottom , #d6eb5d, #45e7b6cf);
}
button{
display: block;
width: 100%;
padding: 10px 15px;
appearance: none;
border: none;
outline: none;
background-image: linear-gradient(to left, #e3f480, #45e7b6b7);
font-size: 20px;
font-weight: 700;
cursor: pointer;
}
Step 3: JavaScript Functionality
Open script.js and add the following JavaScript code:
function tipCalc(){
var amt= Number(document.getElementById('amt').value);
var tip=Number(document.getElementById('tip').value)/100;
var people=Number(document.getElementById('persons').value);
tip=(amt*tip)/people;
document.getElementById('tipval').innerText='₹ '+tip.toFixed(2)+((people>1)?' Each':'');
}
Section 3: Explanation
In this part, we’ll break down the main components of our tip calculator and explain how they function together.
HTML structure:
- We designed a simple form that included input areas for the bill amount and tip percentage.
- A button initiates the calculating function, and the results are displayed in certain elements.
CSS Styles:
- We designed the calculator with a clean, user-friendly layout.
- CSS attributes guarantee that elements are properly spaced, visually pleasing, and responsive.
JavaScript Functionality:
- The JavaScript code retrieves and validates user input before calculating the tip.
- It changes the DOM to reflect the calculated tip amount and final bill, ensuring that users receive real-time feedback.
This HTML, CSS, and JavaScript combination generates a useful and visually appealing tip calculator that improves the user experience on your website.
Result
Conclusion
Creating a tip calculator using HTML, CSS, and JavaScript is a practical way to enhance user experience on your website. By following this tutorial, you’ve learned how to build a responsive and functional tool that calculates tips accurately based on user input. Feel free to customize the styles or add additional features to suit your website’s design and functionality needs.
Happy coding!