Skip to content

Commit 416de3e

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1927 from TusharKesarwani/revert-1911-feat/issue-1885/revamp-bill-tip-calculator
Revert "Feat: revamp bill tip calculator"
2 parents ef787b2 + d8d028a commit 416de3e

10 files changed

Lines changed: 165 additions & 609 deletions

File tree

‎Projects/bill tip calculator/app.js‎

Lines changed: 40 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,56 @@
1+
function calculateTip() {
12

3+
resetTip();
24

3-
window.addEventListener("load", () => {
4-
init()
5-
})
5+
var billAmount = document.getElementById("amount").value;
6+
var tipPercentage = document.getElementById("tip").value;
7+
var numberOfPeople = document.getElementById("numberPeople").value;
68

7-
const $ = (elm) => document.querySelector(elm);
8-
const $all = (elm) => document.querySelectorAll(elm);
9-
const log = (val) => console.log(val);
10-
11-
12-
// global variables
13-
let billTipPerPerson = $(".bill-tip-amt");
14-
let tipTotalPerPerson = $(".total-per-person");
15-
let tipCurrency = $all(".tip-curr");
16-
let billTotal = $(".bill-total");
17-
18-
19-
let billInput = $("#bill-input");
20-
let allTipBtn = $all(".tip-btn");
21-
const customTipBtn = $(".custom-tip-btn");
22-
const customTipSelect = $(".custom-tip-percentage")
23-
const incBtn = $(".inc");
24-
const decBtn = $(".dec");
25-
const peopleOup = $(".people-oup");
26-
27-
28-
const resetBtn = $(".reset-btn");
29-
const calcBtn = $(".calc-btn");
30-
31-
32-
33-
function init() {
34-
let numOfPeople = 1;
35-
let tipPercentage = 0;
36-
let billAmt = 0;
37-
38-
39-
// handle bill amount
40-
billInput.onkeyup = (e) => {
41-
const amt = e.target.value;
42-
const reg = /^\d+$/
43-
if (reg.test(+amt)) {
44-
billAmt = +amt;
45-
}
9+
// Validate the bill amount field.
10+
if (billAmount === "") {
11+
alert("Please enter bill amount.");
12+
return;
4613
}
47-
48-
// handle bill splitting
49-
incBtn.onclick = () => {
50-
numOfPeople++
51-
peopleOup.innerHTML = numOfPeople;
52-
};
53-
decBtn.onclick = () => {
54-
if (numOfPeople <= 1) {
55-
numOfPeople = 1;
56-
return;
57-
}
58-
numOfPeople--
59-
peopleOup.innerHTML = numOfPeople;
14+
if(billAmount<0)
15+
{
16+
alert("Please enter positive bill amount");
17+
return;
6018
}
6119

62-
calcBtn.onclick = () => calculateTip(+billAmt, +numOfPeople, +tipPercentage)
63-
64-
65-
// handle tip percentage
66-
allTipBtn.forEach((button) => {
67-
if (button.classList.contains("active")) {
68-
tipPercentage = +button.value
69-
}
70-
button.addEventListener("click", handleTipButtonClick);
71-
});
72-
73-
// Function to handle the click event on the tip buttons
74-
function handleTipButtonClick(event) {
75-
// Remove the "active" class from all buttons
76-
allTipBtn.forEach((button) => {
77-
button.classList.remove("active");
78-
});
79-
80-
// Add the "active" class to the clicked button
81-
event.target.classList.add("active");
82-
tipPercentage = +event.target.value;
83-
84-
// show the custom tip percentage button back
85-
customTipBtn.classList.remove("hidden")
86-
customTipBtn.classList.add("visible")
87-
customTipSelect.classList.add("hidden")
20+
// Calculate the total tip.
21+
function tipCalc() {
22+
let tipTotal = ((billAmount * 100) * tipPercentage) / 100;
23+
tipTotal = tipTotal.toFixed(2);
24+
return tipTotal;
8825
}
8926

90-
// handle custom tip selection
91-
customTipBtn.onclick = () => {
92-
customTipBtn.classList.remove("visible")
93-
customTipBtn.classList.add("hidden")
94-
customTipSelect.classList.remove("hidden")
95-
}
27+
// Call tipCalc() function.
28+
var totalTip = tipCalc();
9629

97-
// handle custom tip selection
98-
customTipSelect.onchange = (e) => {
99-
tipPercentage = e.target.value
100-
}
30+
if (numberOfPeople > 1) {
31+
document.getElementById("multiple").style.display = "block";
32+
let bill = (billAmount / numberOfPeople);
33+
let tip = (totalTip / numberOfPeople);
34+
document.getElementById("totalTipMultiple").innerHTML = tip.toFixed(2);
10135

102-
}
36+
let amountEach = parseFloat(bill) + parseFloat(tip);
37+
document.getElementById("totalAmountEach").innerHTML = amountEach.toFixed(2);
10338

39+
let multipleTotal = parseFloat(billAmount) + parseFloat(totalTip);
40+
document.getElementById("billTotalmultiple").innerHTML = multipleTotal.toFixed(2);
10441

105-
// reset current state
106-
resetBtn.onclick = () => {
107-
numOfPeople = 1;
108-
tipPercentage = 0;
109-
billAmt = 0;
110-
billTotal.innerHTML = `$ 0.00`
111-
tipTotalPerPerson.innerHTML = `$ 0.00`
112-
billTipPerPerson.innerHTML = `$ 0.00`
42+
} else {
43+
document.getElementById("single").style.display = "block";
44+
let singleTotal = (parseFloat(billAmount) + parseFloat(totalTip));
45+
document.getElementById("tipAmount").innerHTML = totalTip;
46+
document.getElementById("billTotal").innerHTML = singleTotal.toFixed(2);
47+
}
11348
}
11449

115-
function calculateTip(billAmt, numberOfPeople, tipPercentage) {
116-
const tipAmt = (billAmt * (tipPercentage / 100))
117-
const tipAmtPerPeron = (tipAmt / numberOfPeople)
118-
const totalPerPerson = ((billAmt / 4) + tipAmtPerPeron)
119-
const billTotalAmt = (billAmt + tipAmt);
120-
121-
billTotal.innerHTML = `$ ${billTotalAmt.toFixed(2)}`
122-
tipTotalPerPerson.innerHTML = `$ ${totalPerPerson.toFixed(2)}`
123-
billTipPerPerson.innerHTML = `$ ${tipAmtPerPeron.toFixed(2)}`
50+
resetTip();
12451

125-
console.log({ tip: tipAmt.toFixed(2), perP: tipAmtPerPeron.toFixed(2), total: totalPerPerson.toFixed(2), billTotalAmt })
52+
// Hide the single and multiple blocks
53+
function resetTip() {
54+
document.getElementById("single").style.display = "none";
55+
document.getElementById("multiple").style.display = "none";
12656
}

‎Projects/bill tip calculator/fonts/Poppins-Light.ttf‎

-156 KB
Binary file not shown.

‎Projects/bill tip calculator/fonts/Poppins-Medium.ttf‎

-153 KB
Binary file not shown.

‎Projects/bill tip calculator/fonts/Poppins-Regular.ttf‎

-155 KB
Binary file not shown.

‎Projects/bill tip calculator/fonts/Poppins-SemiBold.ttf‎

-152 KB
Binary file not shown.

‎Projects/bill tip calculator/index.html‎

Lines changed: 60 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,67 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Bill Tip Calculator</title>
7-
<link rel="stylesheet" href="./style.css">
5+
<meta charset="utf-8">
6+
<title> Bill Tip Calculator</title>
7+
<link rel="stylesheet" type="text/css" href="style.css">
88
</head>
9-
<body>
10-
<div class="bg-blur">
11-
</div>
12-
<div class="blur"></div>
13-
14-
<div class="container">
15-
<div class="heading">
16-
<h2 class="h2 pp-SB">Bill Splitter</h2>
17-
</div>
18-
<div class="bill-output">
19-
<div class="cont padding-container flex-row">
20-
<div class="left flex-col">
21-
<h2 class="title pp-RG text-gray-100">Tip per Person</h2>
22-
<h3 class="value bill-tip-amt pp-SB">
23-
<span class="tip-curr">$</span>
24-
0.00
25-
</h3>
26-
</div>
27-
<div class="left flex-col">
28-
<h2 class="title pp-RG text-gray-100">Total per Person</h2>
29-
<h3 class="value total-per-person pp-SB">
30-
<span class="tip-curr">$</span>
31-
0.00
32-
</h3>
33-
</div>
34-
<div class="right flex-col">
35-
<h2 class="title pp-RG text-gray-100">Bill Total Amount</h2>
36-
<h3 class="value bill-total pp-SB">
37-
<span class="tip-curr">$</span>
38-
0.00
39-
</h3>
40-
</div>
41-
</div>
42-
</div>
43-
<div class="bill-section ">
44-
<div class="bill-inp padding-container flex-col ">
45-
<label for="" class="pp-MD text-gray-100">Bill</label>
46-
<input type="number" id="bill-input" class="pp-SB" placeholder="2000">
47-
</div>
48-
</div>
49-
<div class="tip-selection">
50-
<div class="sel-cont padding-container flex-col ">
51-
<p class="pp-MD">Select Tip %</p>
52-
<div class="selection-btns">
53-
<button class="tip-btn pp-SB active" value="5">5%</button>
54-
<button class="tip-btn pp-SB" value="10">10%</button>
55-
<button class="tip-btn pp-SB" value="15">15%</button>
56-
<button class="tip-btn pp-SB" value="20">20%</button>
57-
</div>
58-
<button class="custom-tip-btn pp-SB text-gray-200 visible">Custom</button>
59-
<select name="" id="" class="custom-tip-percentage hidden">
60-
<option value="1">1%</option>
61-
<option value="2">2%</option>
62-
<option value="3">3%</option>
63-
<option value="5">5%</option>
64-
<option value="10">10%</option>
65-
<option value="15">15%</option>
66-
<option value="20">20%</option>
67-
<option value="30">30%</option>
68-
</select>
69-
</div>
70-
</div>
71-
<div class="numofpeople">
72-
<div class="cont padding-container flex-row">
73-
<p class="pp-MD text-gray-200">Number of people</p>
74-
<div class="flex-row">
75-
<button class="btn dec">-</button>
76-
<div class="people-oup pp-SB">1</div>
77-
<button class="btn inc">+</button>
78-
</div>
79-
</div>
80-
</div>
81-
<div class="flex-row">
82-
<button class="reset-btn pp-RG text-gray-100">Reset</button>
83-
<button class="calc-btn pp-RG text-gray-100">Calculate</button>
84-
</div>
85-
<br>
86-
</div>
879

88-
<script src="./app.js"></script>
10+
<body>
11+
<div class="container">
12+
<div class="header">
13+
<h2>Tip Calculator</h2>
14+
</div>
15+
<form>
16+
<p><b>How much is the bill?</b></p>
17+
<input type="number" id="amount" placeholder="Bill Amount" maxlength="9">
18+
<p><b>How much would you like to tip?</b></p>
19+
<select id="tip">
20+
<option value="0.01">1%</option>
21+
<option value="0.02">2%</option>
22+
<option value="0.03">3%</option>
23+
<option value="0.05">5%</option>
24+
<option value="0.1">10%</option>
25+
<option value="0.15">15%</option>
26+
<option value="0.2">20%</option>
27+
<option value="0.3">30%</option>
28+
</select>
29+
<p><b>How many people are sharing the bill?</b></p>
30+
<select id="numberPeople">
31+
<option value="1">1</option>
32+
<option value="2">2</option>
33+
<option value="3">3</option>
34+
<option value="4">4</option>
35+
<option value="5">5</option>
36+
<option value="6">6</option>
37+
<option value="7">7</option>
38+
<option value="8">8</option>
39+
<option value="9">9</option>
40+
<option value="10">10</option>
41+
<option value="11">11</option>
42+
<option value="12">12</option>
43+
<option value="13">13</option>
44+
<option value="14">14</option>
45+
<option value="15">15</option>
46+
<option value="16">16</option>
47+
<option value="17">17</option>
48+
<option value="18">18</option>
49+
<option value="19">19</option>
50+
<option value="20">20</option>
51+
</select>
52+
</form>
53+
<button class="calc" onclick="calculateTip()">Calculate</button>
54+
<div id="single">
55+
<p><b>Tip: ₹<span id="tipAmount"></span></b></p>
56+
<p><b>Total: ₹<span id="billTotal"></span></b></p>
57+
</div>
58+
<div id="multiple">
59+
<p><b>Tip Per Person: ₹<span id="totalTipMultiple"></span></b></p>
60+
<p><b>Total Per Person: ₹<span id="totalAmountEach"></span></b></p>
61+
<p><b>Bill Total: ₹<span id="billTotalmultiple"></span></b></p>
62+
</div>
63+
</div>
64+
<script src="app.js"></script>
8965
</body>
66+
9067
</html>

‎Projects/bill tip calculator/readme.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ HTML , CSS and JAVASCRIPT.
1616
Alisha Bharti
1717

1818
# SNAPSHOT OF THE WEBSITE:
19-
### Before
2019
![bill](https://user-images.githubusercontent.com/84632701/212969976-5abc79e1-e1b0-4712-8a1e-6801b6232c4e.png)
2120

22-
### After
23-
![bill](https://raw.githubusercontent.com/Benrobo/benrobo8.github.io/master/Screenshot%202023-07-31%20at%201.53.18%20PM.png)
24-
2521

2622
This website is really very helpful when you are planning to go out with your friends or families in restauarnt or hotels . Give a try !!!

‎Projects/bill tip calculator/screenshot.png‎

-1.07 MB
Binary file not shown.

0 commit comments

Comments
 (0)