Today in this project you will know how to create Javascript Tip Calculator. This Tip Calculator is made using HTML CSS and JavaScript.
Do you want to improve your JavaScript knowledge? One such application that can enhance the user experience is a tip calculator. In this tutorial, we’ll walk through the process of building a simple yet effective tip calculator using HTML, CSS, and JavaScript.
- Project Live Preview
- HTML Code
- CSS Code
- JavaScript Code
- Faq Section
Tip Calculator using HTML, CSS and JavaScript
A Tip Calculator with HTML, CSS, and JavaScript is a web application that allows users to calculate the tip amount and total bill after entering the bill amount and tip percentage.
This type of calculator is commonly used in restaurants, cafes, or any situation where a user wants to quickly determine the tip to leave based on the total bill.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
This JavaScript tip calculator has a simple form with input fields for the bill amount and tip percentage, a button to trigger the calculation, and a section to display the calculated tip and total amount.
Step 1: HTML structure of Tip Calculator
To create this Javascript Tip Calculator, first we need to create the structure by HTML. For this you create an HTML file and copy all the codes and paste that file.
I have explained the codes used to create this project (Tip Calculator using HTML, CSS and JavaScript) through comments. Hope you don’t mind.
<!-- Container div holding all sections of the tip calculator -->
<div class="container">
<!-- Section for displaying bill details -->
<section>
<!-- Wrapper for the Bill label and input box -->
<div class="wrapper">
<label for="bill" class="lbl">Bill</label>
<!-- Input box for entering the bill amount -->
<div class="input-box">
<span>$</span>
<input type="number" value="0.00" id="bill" class="val">
</div>
</div>
<!-- Wrapper for displaying the calculated tip amount -->
<div class="wrapper">
<span class="lbl">Tip</span>
<span id="tip-amount" class="val">$0</span>
</div>
<!-- Horizontal line for visual separation -->
<hr>
<!-- Wrapper for displaying the total amount including tip -->
<div class="wrapper">
<span class="lbl">Total Amount</span>
<span id="total-amount" class="val">$0</span>
</div>
</section>
<!-- Section for adjusting tip percentage and number of people -->
<section>
<!-- Wrapper for the Tip Percentage label and display -->
<div class="wrapper">
<label for="tip" class="lbl">Tip %</label>
<span id="tip-percent" class="val">0</span>
</div>
<!-- Input range for adjusting the tip percentage -->
<input type="range" min="1" id="tip" value="15">
<!-- Wrapper for the Number of People label and display -->
<div class="wrapper">
<label for="no-of-people" class="lbl">No. Of People</label>
<span id="split-num" class="val">0</span>
</div>
<!-- Input range for adjusting the number of people -->
<input type="range" min="1" max="15" id="no-of-people" value="1">
</section>
<!-- Section for displaying calculated tip per person and total per person -->
<section>
<!-- Wrapper for displaying Tip Per Person -->
<div class="wrapper">
<span class="lbl">Tip Per Person</span>
<span id="tip-per-person" class="val">$0</span>
</div>
<!-- Wrapper for displaying Total Per Person -->
<div class="wrapper">
<span class="lbl">Total Per Person</span>
<span id="total-per-person" class="val">$0</span>
</div>
</section>
</div>
Step 2: Design the Tip Calculator
Now, let’s add some styling to make our tip calculator visually appealing. Create a file named styles.css . This CSS code adds styling to create a visually pleasing and responsive tip calculator.
/* Resetting default styles and setting global styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif; /* Setting the default font family */
letter-spacing: 0.4px;
}
/* Styling for the body element */
body {
background-color: #f3f3f3; /* Fallback background color */
height: 100%;
background: linear-gradient(
135deg,
#6f6df4,
#4c4af4
) fixed; /* Applying a gradient background */
background-size: 100% 50%;
background-repeat: no-repeat;
}
/* Styling for the container holding the calculator */
.container {
background-color: #ffffff;
width: 450px;
padding: 50px 40px;
border-radius: 10px;
position: absolute;
transform: translate(-50%, -50%); /* Centering the container */
top: 50%;
left: 50%;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
}
/* Styling for the wrapper that holds label-value pairs */
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin: 12px 0;
}
/* Styling for labels */
.lbl {
font-size: 16px;
color: #44475b;
font-weight: 400;
}
/* Styling for values */
.val {
color: #44475b;
font-weight: 500;
font-size: 18px;
}
/* Styling for input boxes */
.input-box {
background-color: #cdccfd;
color: #6f6df4;
padding: 5px;
}
/* Styling for the bill input */
#bill {
background-color: transparent;
border: none;
outline: none;
width: 100px;
text-align: right;
color: #6f6df4;
}
/* Styling for horizontal lines */
hr {
border: none;
border-bottom: 1px solid #cdccfd;
}
/* Styling for range input (sliders) */
input[type="range"] {
width: 100%;
cursor: pointer;
}
/* Adding margin to sliders, except for the last one */
input[type="range"]:not(:last-child) {
margin-bottom: 5px;
}
/* Styling for sections, adding margin between them */
section:not(:last-child) {
margin-bottom: 40px;
}
/* Adding margin above sections, except for the first one */
section:not(:first-child) {
margin-top: 40px;
}
/* Styling for the last section, giving it a background color and border-radius */
section:last-child {
background-color: #cdccfd;
padding: 10px;
border-radius: 5px;
}
/* Styling for text color in the last section */
section:last-child .val,
section:last-child .lbl {
color: #4c4af4;
}
Step 3: Activate the Tip Calculator
Lastly, let’s add the JavaScript logic to perform the tip calculation. Create a file named script.js . This JavaScript code defines a calculateTip function that retrieves the input values, performs the tip calculation, and updates the results on the page.
// Select all input elements of type 'range' (sliders)
const sliders = document.querySelectorAll("input[type='range']");
// Add event listeners to each slider, triggering the calculateTip function on input
sliders.forEach(function(slider){
slider.addEventListener("input", calculateTip);
});
// Select the bill input element
const billInput = document.getElementById("bill");
// Add an event listener to the bill input, triggering the calculateTip function on change
billInput.addEventListener("change", calculateTip);
// Function to calculate tip and update the displayed results
function calculateTip(){
// Retrieve values from input elements
let bill = parseFloat(billInput.value);
let tipPercent = document.getElementById("tip").value;
let noOfPeople = document.getElementById("no-of-people").value;
// Format and update the bill input value
billInput.value = bill.toFixed(2);
// Calculate total tip, total amount, and per person values
let totalTip = parseFloat((bill * (tipPercent/100)).toFixed(2));
let total = parseFloat((bill + totalTip).toFixed(2));
let tipPerPerson = (totalTip / noOfPeople).toFixed(2);
let totalPerPerson = (total / noOfPeople).toFixed(2);
// Update the displayed results on the webpage
document.getElementById("tip-amount").textContent = `\$ ${totalTip}`;
document.getElementById("total-amount").textContent = `\$ ${total}`;
document.getElementById("tip-percent").textContent = `${tipPercent}%`;
document.getElementById("split-num").textContent = noOfPeople;
document.getElementById("tip-per-person").textContent = `\$ ${tipPerPerson}`;
document.getElementById("total-per-person").textContent = `\$ ${totalPerPerson}`;
}
// Call the calculateTip function initially (optional, depending on the desired behavior)
// This line could be commented out if you want to trigger the calculation only when there is user input
calculateTip();
Now, open the HTML file in your web browser, and you should have a fully functional tip calculator with a clean and user-friendly interface.
Earlier I have shared the design of many other types of JavaScript calculators. Let me know how you like this Tip Calculator by commenting.
Here’s a simple example of a tip calculator using HTML, CSS, and Vanilla JavaScript for beginners. Create three files: index.html, style.css, and script.js.
HTML Code:
<div class=”calculator”>
<h1>Tip Calculator</h1>
<label for=”billAmount”>Bill Amount:</label>
<input type=”number” id=”billAmount” placeholder=”Enter bill amount”>
<label for=”tipPercentage”>Tip Percentage:</label>
<input type=”number” id=”tipPercentage” placeholder=”Enter tip percentage”>
<button onclick=”calculateTip()”>Calculate Tip</button>
<div id=”results”>
<p>Total Bill (including tip): $<span id=”totalBill”></span></p>
<p>Tip Amount: $<span id=”tipAmount”></span></p>
</div>
</div>
JavaScript Code:
function calculateTip() {
// Get the input values
var billAmount = parseFloat(document.getElementById(‘billAmount’).value);
var tipPercentage = parseFloat(document.getElementById(‘tipPercentage’).value);
// Validate input
if (isNaN(billAmount) || isNaN(tipPercentage) || billAmount < 0 || tipPercentage < 0) {
alert(‘Please enter valid numbers for bill amount and tip percentage.’);
return;
}
// Calculate tip and total bill
var tipAmount = (billAmount * tipPercentage) / 100;
var totalBill = billAmount + tipAmount;
// Display results
document.getElementById(‘tipAmount’).innerText = tipAmount.toFixed(2);
document.getElementById(‘totalBill’).innerText = totalBill.toFixed(2);
}