Best matchRelated: input valuesBeginner
Loan Calculator
Read form values and use them in the project logic.
Build a loan calculator →Tip Calculator
Build a tip calculator that calculates the final bill from a bill amount and tip percentage.
Beginner20–30 minutesHTML5CSS3JavaScript
You’ll practice
DOM SelectionClick EventsFunctions
01 — What you’ll build
Tip Calculator
In this project, we’re going to build a practical tip calculator using HTML, CSS, and JavaScript. The user can enter a bill amount and tip percentage, then calculate the final total with one click. It’s a small project, but it gives you a really good understanding of how JavaScript takes user input, performs a calculation, and displays the result on the page.
02 — Included
- Bill amount input
- Custom tip percentage
- One-click calculation
- Formatted final total
03 — You’ll practice
- Select HTML elements using getElementById
- Read values from number inputs
- Handle button clicks with addEventListener
- Calculate percentages using JavaScript
- Format numbers using toFixed
- Update page content using innerText
Recommended knowledge: Basic HTML and CSS, JavaScript variables and number operations, DOM selection and form events, DOM selection and click events.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep all project files together in the same folder.
Project structure
tip-calculator/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Tip Calculator</h1>
<p>Enter the bill amount and tip percentage to calculate the total.</p>
<label for="bill">Bill amount:</label>
<input type="number" id="bill">
<br/>
<label for="tip">Tip percentage:</label>
<input type="number" id="tip">
<br/>
<button id="calculate">Calculate</button>
<br/>
<label for="total">Total:</label>
<span id="total"></span>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice input values, number formatting, and DOM Selection with these related projects.
Best match
Related: number formattingBeginner
Temperature Converter
Format numeric results before displaying them on the page.
Build a temperature converter →
Related: DOM SelectionIntermediate
Currency Converter
Select page elements and control them with JavaScript.
Build a currency converter →Related: input valuesBest match
Loan Calculator
Read form values and use them in the project logic.
Build a loan calculatorRelated: number formatting
Temperature Converter
Format numeric results before displaying them on the page.
Build a temperature converterRelated: DOM Selection
Currency Converter
Select page elements and control them with JavaScript.
More challenging
Build a currency converter