Today, we will be making Tip Calculator in HTML and JavaScript. We will be using HTML CSS JavaScript to get the job done. For styling our web page we will be using a bootstrap via CDN. We will calculate the Total Amount, the tip amount, and per person share with the help of javascript. Also, we will include validation for the input boxes.
We will use JavaScript to calculate and display the result.
Requirements
- Code Editor (VS Code Preferred)
- Chromium Browser (Chrome Preferred)
- Basic Knowledge of HTML, CSS, Javascript, and Bootstrap
Features
- Calculate and display the total amount spent
- Calculate and display the tip amount
- Calculate and display the per person spent
Coding Tip Calculator in HTML and JavaScript
<!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" />
<!-- import bootstrap cdn -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<title>Tip Calculator</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Tip Calculator</h1>
<form id="form">
<div class="form-group"></div>
<label for="bill">Bill Amount</label>
<input
type="number"
class="form-control mb-3"
id="bill"
required
placeholder="Enter Bill Amount"
/>
<label for="tip">Tip Percent</label>
<input
type="number"
class="form-control mb-3"
id="tip"
required
placeholder="Enter Tip %"
/>
<label for="people">Number of People</label>
<input
type="number"
class="form-control"
id="people"
required
placeholder="Enter Number of People"
/>
<button type="submit" class="btn btn-primary my-3">Submit</button>
</form>
<h6 id="result"></h6>
</div>
</div>
</div>
<script>
var form = document.getElementById("form");
var bill = document.getElementById("bill");
var tip = document.getElementById("tip");
var people = document.getElementById("people");
var tipAmount = document.getElementById("tipAmount");
var totalAmount = document.getElementById("totalAmount");
var form = document.getElementById("form");
var result = document.getElementById("result");
form.addEventListener("submit", (e) => {
e.preventDefault();
var billValue = bill.value;
var tipValue = tip.value;
var peopleValue = people.value;
var totalAmountInt =
parseInt(billValue) +
(parseInt(billValue) * parseInt(tipValue)) / 100;
var tipAmountInt = (parseInt(billValue) * parseInt(tipValue)) / 100;
var totalAmountInt =
parseInt(billValue) +
(parseInt(billValue) * parseInt(tipValue)) / 100;
var perPersonInt =
parseInt(totalAmountInt) / parseInt(peopleValue).toFixed(2);
result.innerHTML = `Tip Amount: Rs ${tipAmountInt} <br> Total Amount: Rs ${totalAmountInt} <br> Per Person: Rs ${perPersonInt}`;
});
</script>
</body>
</html>Output:
The validation screen would look like this:
In the end, the result will look something like this:
Conclusion
I hope Tip Calculator in HTML and JavaScript was easy to understand and that you enjoyed building and learning this at the same time, we learned to use input boxes to take user input and we also learned to use the parseInt function in JavaScript to convert to int and back forth. We also learned to use validation to further make our web app more robust. In end, we did use some dom-manipulation to update the values on the screen.
Also Read:
- What is web development for beginners?
- Chat App with Node.js and Socket.io
- Draw Doraemon using HTML and CSS
- Draw House using HTML and CSS
- Draw Dog using CSS
- Rock Paper Scissor in HTML CSS JavaScript
- Pong Game in HTML and JavaScript
- Tip Calculator in HTML and JavaScript
- Calculator in HTML CSS JavaScript
- BMI Calculator in HTML CSS JavaScript
- Color picker in HTML and JavaScript
- Number Guessing Game in JavaScript
- ATM in JavaScript
- Inventory Management System in JavaScript
- Courier Tracking System in HTML CSS and JS
- Word Count App in JavaScript
- To-Do List in HTML CSS JavaScript
- Tic-Tac-Toe game in JavaScript
- Music player using HTML CSS and JavaScript
- Happy Diwali in JavaSCript
