Skip to content

Commit d39cf15

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1036 from patnaikankit/tip_calc
Tip calculator
2 parents c3f7679 + c331c51 commit d39cf15

4 files changed

Lines changed: 165 additions & 0 deletions

File tree

‎Projects/Tip Calculator/README.MD‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
## Objective of my project
2+
3+
- The objective of this project is to create a Tip Calculator web application. The application will calculate the total amount to be paid, including the tip, based on the bill amount and the tip percentage entered by the user.
4+
5+
## What task does it do?
6+
7+
- Enter the bill amount and tip percentage.
8+
9+
- Calculate the total amount to be paid, including the tip.
10+
11+
- Option to split the bill among multiple people.
12+
13+
- Reset button to clear the input fields and calculated values.
14+
15+
16+
## Tech-Stack
17+
18+
- I used HTML, CSS and JAVASCRIPT .
19+
20+
21+
## Run Locally
22+
23+
- install live server extension
24+
- Open index.html
25+
- click on live server

‎Projects/Tip Calculator/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Tip Calculator</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Tip Calculator</h1>
13+
<p>Enter the bill amount and tip percentage to calculate the total and tip. If you want to split the bill with your friends then enter the total number of people.</p>
14+
<label for="bill">Bill amount:</label>
15+
<input type="number" id="bill">
16+
<br/>
17+
<label for="tip">Tip percentage:</label>
18+
<input type="number" id="tip">
19+
<br/>
20+
<label for="split">Split among:</label>
21+
<input type="number" id="split">
22+
<br/>
23+
<button id="calculate">Calculate</button>
24+
<button id="reset">Reset</button>
25+
<br/>
26+
<label for="total">Total:</label>
27+
<span id="total"></span>
28+
<br/>
29+
<label for="tipAmount">Tip amount:</label>
30+
<span id="tipAmount"></span>
31+
<br/>
32+
<label for="amountPerPerson">Amount per person:</label>
33+
<span id="amountPerPerson"></span>
34+
</div>
35+
<script src="script.js"></script>
36+
</body>
37+
</html>

‎Projects/Tip Calculator/script.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const btnEl = document.getElementById("calculate");
2+
const resetBtnEl = document.getElementById("reset");
3+
const billInput = document.getElementById("bill");
4+
const tipInput = document.getElementById("tip");
5+
const splitInput = document.getElementById("split");
6+
const totalSpan = document.getElementById("total");
7+
const tipAmountSpan = document.getElementById("tipAmount");
8+
const amountPerPersonSpan = document.getElementById("amountPerPerson");
9+
10+
function calculateTotal() {
11+
const billValue = billInput.value;
12+
const tipValue = tipInput.value;
13+
const splitValue = splitInput.value;
14+
15+
const tipAmount = billValue * (tipValue / 100);
16+
const totalValue = parseFloat(billValue) + tipAmount;
17+
18+
totalSpan.innerText = totalValue.toFixed(2);
19+
tipAmountSpan.innerText = tipAmount.toFixed(2);
20+
21+
if (splitValue && splitValue > 0) {
22+
const amountPerPerson = totalValue / splitValue;
23+
amountPerPersonSpan.innerText = amountPerPerson.toFixed(2);
24+
} else {
25+
amountPerPersonSpan.innerText = "";
26+
}
27+
}
28+
29+
function resetValues() {
30+
billInput.value = "";
31+
tipInput.value = "";
32+
splitInput.value = "";
33+
totalSpan.innerText = "";
34+
tipAmountSpan.innerText = "";
35+
amountPerPersonSpan.innerText = "";
36+
}
37+
38+
btnEl.addEventListener("click", calculateTotal);
39+
resetBtnEl.addEventListener("click", resetValues);

‎Projects/Tip Calculator/styles.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #f2f2f2;
7+
font-family: "Helvetica", sans-serif;
8+
}
9+
10+
.container {
11+
background-color: white;
12+
max-width: 600px;
13+
margin: 100px auto;
14+
padding: 20px;
15+
border-radius: 10px;
16+
box-shadow: 0 10px 12px rgba(16, 16, 16, 0.804);
17+
}
18+
19+
h1 {
20+
margin-top: 0;
21+
text-align: center;
22+
}
23+
24+
input {
25+
padding: 10px;
26+
border: 1px solid #ccc;
27+
border-radius: 4px;
28+
margin: 10px 0;
29+
width: 100%;
30+
}
31+
32+
button {
33+
background-color: #4caf50;
34+
color: white;
35+
padding: 10px;
36+
border: none;
37+
cursor: pointer;
38+
margin: 10px 0;
39+
width: 100%;
40+
font-size: 18px;
41+
text-transform: uppercase;
42+
transition: background-color 0.2s ease;
43+
}
44+
45+
button:hover {
46+
background-color: #45a049;
47+
}
48+
49+
#total,
50+
#tipAmount,
51+
#amountPerPerson {
52+
font-size: 18px;
53+
font-weight: bold;
54+
}
55+
56+
#total {
57+
margin-top: 20px;
58+
}
59+
60+
#tipAmount,
61+
#amountPerPerson {
62+
display: inline-block;
63+
margin-top: 5px;
64+
}

0 commit comments

Comments
 (0)