Introduction
Creating simple and functional applications is a great way to improve your web development skills. One great project for beginners is Tip Calculator. In this post, we’ll walk you through the steps for creating a Tip Calculator using HTML, CSS, and JavaScript. This project will help you practice input manipulation. Conditional logic and DOM manipulation make it ideal for those who want to improve their programming knowledge and create useful tools.
Prerequisites
Make sure you are familiar with this important information before starting:
- HTML to structure the configuration.
- CSS for design and layout.
- JavaScript for performance and computation
Approach
Our Tip Calculator uses three inputs:
- Billing Amount: The total billing amount to be split.
- Type of Service – Service quality options that affect tip percentage.
- Number of people – Number of people sharing the bill.
A JavaScript function calculates and displays the tip amount for each person based on these inputs.
Steps to Build the Tip Calculator
- HTML Structure: Use HTML to create input fields for billing amount, number of people, and type of service. and a button to start the calculation.
- CSS Styling: Keep the calculator layout simple and easy to use.
- JavaScript Functions: Create JavaScript functions that:
- Retrieve input value.
- Check input.
- Count tips.
- Show results
Code Implementation
HTML
HTML structure defines input fields. Drop-down list for service quality and a button for counting tips This is a basic example:
<!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="styles.css">
</head>
<body>
<div class="calculator">
<h1>Tip Calculator</h1>
<label for="amount">Bill Amount</label>
<input type="number" id="amount" placeholder="Enter your bill amount">
<label for="services">Service Quality</label>
<select id="services">
<option value="0">Select</option>
<option value="0.3">Excellent (30%)</option>
<option value="0.2">Good (20%)</option>
<option value="0.1">Average (10%)</option>
</select>
<label for="persons">Number of People</label>
<input type="number" id="persons" placeholder="Enter number of people">
<button id="calculate">Calculate Tip</button>
<div class="tip">
<p>Total Tip: $<span id="total">0.00</span> <span id="each">each</span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
Use CSS to style the calculator interface. Keep it simple and clean.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.calculator {
padding: 20px;
background: #f9f9f9;
border-radius: 5px;
width: 300px;
text-align: center;
}
input, select, button {
margin-top: 10px;
width: 100%;
padding: 10px;
font-size: 1em;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background-color: #4CAF50;
color: white;
border: none;
}
.tip {
display: none;
margin-top: 20px;
font-size: 1.2em;
}
JavaScript
JavaScript functions handle tip calculation and input validation.
window.onload = () => {
document.querySelector('#calculate').onclick = calculateTip;
};
function calculateTip() {
let amount = document.querySelector('#amount').value;
let persons = document.querySelector('#persons').value;
let service = document.querySelector('#services').value;
if (amount === '' || service === '0') {
alert("Please enter valid values for amount and service type");
return;
}
if (persons === '1') {
document.querySelector('#each').style.display = 'none';
} else {
document.querySelector('#each').style.display = 'block';
}
let total = (amount * service) / persons;
total = total.toFixed(2);
document.querySelector('.tip').style.display = 'block';
document.querySelector('#total').innerHTML = total;
}
This script waits for the window to fully load and then binds the calculateTip function to the “Calculate” button. The function retrieves the bill amount, service quality, and number of people, performs basic validation, and calculates the tip accordingly.
Project Output
Tip Calculator will display the calculated tip based on the input. It displays results in a well-formatted format.
Benefits of Building a Tip Calculator
By creating this project, you can:
- Increase your understanding of HTML, CSS, and JavaScript.
- Learn to validate user input and handle basic errors.
- Understand how to display calculated results in real time on the page.