Skip to content

Commit 53ee202

Browse files
BenroboBenrobo
committed
feat: revamp bill tip calculator
1 parent 344939b commit 53ee202

10 files changed

Lines changed: 713 additions & 165 deletions

File tree

‎Projects/bill tip calculator/app.js‎

Lines changed: 99 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,115 @@
1-
function calculateTip() {
21

3-
resetTip();
42

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

9-
// Validate the bill amount field.
10-
if (billAmount === "") {
11-
alert("Please enter bill amount.");
12-
return;
13-
}
14-
if(billAmount<0)
15-
{
16-
alert("Please enter positive bill amount");
17-
return;
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+
}
1846
}
1947

20-
// Calculate the total tip.
21-
function tipCalc() {
22-
let tipTotal = ((billAmount * 100) * tipPercentage) / 100;
23-
tipTotal = tipTotal.toFixed(2);
24-
return tipTotal;
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;
2560
}
2661

27-
// Call tipCalc() function.
28-
var totalTip = tipCalc();
62+
calcBtn.onclick = () => calculateTip(+billAmt, +numOfPeople, +tipPercentage)
63+
2964

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);
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+
});
3572

36-
let amountEach = parseFloat(bill) + parseFloat(tip);
37-
document.getElementById("totalAmountEach").innerHTML = amountEach.toFixed(2);
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+
});
3879

39-
let multipleTotal = parseFloat(billAmount) + parseFloat(totalTip);
40-
document.getElementById("billTotalmultiple").innerHTML = multipleTotal.toFixed(2);
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")
88+
}
4189

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);
90+
// handle custom tip selection
91+
customTipBtn.onclick = () => {
92+
customTipBtn.classList.remove("visible")
93+
customTipBtn.classList.add("hidden")
94+
customTipSelect.classList.remove("hidden")
4795
}
96+
97+
// handle custom tip selection
98+
customTipSelect.onchange = (e) => {
99+
tipPercentage = e.target.value
100+
}
101+
48102
}
49103

50-
resetTip();
104+
function calculateTip(billAmt, numberOfPeople, tipPercentage) {
105+
const tipAmt = (billAmt * (tipPercentage / 100))
106+
const tipAmtPerPeron = (tipAmt / numberOfPeople)
107+
const totalPerPerson = ((billAmt / 4) + tipAmtPerPeron)
108+
const billTotalAmt = (billAmt + tipAmt);
109+
110+
billTotal.innerHTML = `$ ${billTotalAmt.toFixed(2)}`
111+
tipTotalPerPerson.innerHTML = `$ ${totalPerPerson.toFixed(2)}`
112+
billTipPerPerson.innerHTML = `$ ${tipAmtPerPeron.toFixed(2)}`
51113

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

‎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: 83 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,90 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="utf-8">
6-
<title> Bill Tip Calculator</title>
7-
<link rel="stylesheet" type="text/css" href="style.css">
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">
88
</head>
9-
109
<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>
65-
</body>
10+
<div class="bg-blur">
11+
</div>
12+
<div class="blur"></div>
6613

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>
87+
88+
<script src="./app.js"></script>
89+
</body>
6790
</html>

0 commit comments

Comments
 (0)