Skip to content

Commit a49d1f4

Browse files
Prajwal0225Prajwal0225
committed
Advance-tip-calculator
1 parent 409e76a commit a49d1f4

File tree

3 files changed

+256
-0
lines changed

3 files changed

+256
-0
lines changed

‎Advance-tip-calculator/index.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="preconnect" href="https://fonts.googleapis.com" />
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<link rel="stylesheet" href="style.css" type="text/css" />
14+
<title>Tip Calculator</title>
15+
</head>
16+
<body>
17+
18+
<div class="wrapper">
19+
<div class="container" id="topContainer">
20+
<h1><u>Tip calculator</u></h1>
21+
<div class="title">Bill total</div>
22+
<div class="inputContainer">
23+
<span>$</span>
24+
<input
25+
onkeyup="calculateBill()"
26+
type="text"
27+
id="billTotalInput"
28+
placeholder="0.00"
29+
/>
30+
</div>
31+
</div>
32+
<div class="container">
33+
<div class="title">Tip</div>
34+
<div class="inputContainer">
35+
<span>%</span>
36+
<input
37+
onkeyup="calculateBill()"
38+
type="text"
39+
id="tipInput"
40+
placeholder="10"
41+
/>
42+
</div>
43+
</div>
44+
<div class="container" id="bottom">
45+
<div class="splitContainer">
46+
<div class="title">People</div>
47+
<div class="controls">
48+
<span class="buttonContainer">
49+
<button class="splitButton" onclick="increasePeople()">
50+
<span class="buttonText">+</span>
51+
</button>
52+
</span>
53+
<span class="splitAmount" id="numberOfPeople">1</span>
54+
<span class="buttonContainer">
55+
<button class="splitButton" onclick="decreasePeople()">
56+
<span class="buttonText">-</span>
57+
</button>
58+
</span>
59+
</div>
60+
</div>
61+
<div class="totalContainer">
62+
<div class="title">Total per Person</div>
63+
<div class="total" id="perPersonTotal">$0.00</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<script type="text/javascript" src="script.js"></script>
69+
</body>
70+
</html>

‎Advance-tip-calculator/script.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
🌟 APP: Tip Calculator
3+
4+
These are the 3 functions you must use 👇
5+
=========================================
6+
calculateBill()
7+
increasePeople()
8+
decreasePeople()
9+
10+
These functions are hard coded in the HTML. So, you can't change their names.
11+
12+
These are all the DIV ID's you're gonna need access to 👇
13+
========================================================
14+
#1 ID 👉 'billTotalInput' = User input for bill total
15+
#2 ID 👉 'tipInput' = User input for tip
16+
#3 ID 👉 'numberOfPeople' = Current number of people you're splitting the bill between
17+
#4 ID 👉 'perPersonTotal' = Total dollar value owed per person
18+
*/
19+
20+
// Get global access to all inputs / divs here (you'll need them later 😘)
21+
// bill input, tip input, number of people div, and per person total div
22+
23+
24+
25+
// Get number of people from number of people div
26+
27+
28+
// ** Calculate the total bill per person **
29+
const calculateBill = (num) => {
30+
// get bill from user input & convert it into a number
31+
let Bill = Number(document.getElementById('billTotalInput').value)
32+
33+
// get the tip from user & convert it into a percentage (divide by 100)
34+
let tipPercentage = Number(document.getElementById('tipInput').value)/100
35+
36+
// get the total tip amount
37+
let tipAmount = tipPercentage * Bill
38+
39+
// calculate the total (tip amount + bill)
40+
let total = parseFloat(Bill + tipAmount).toFixed(2);
41+
let t = '$'+total
42+
// calculate the per person total (total divided by number of people)
43+
let finalTotal = parseFloat(total / num).toFixed(2);
44+
let f = '$'+finalTotal
45+
if(num > 1){
46+
document.getElementById('perPersonTotal').innerHTML = f
47+
}else{
48+
document.getElementById('perPersonTotal').innerHTML = t
49+
}
50+
51+
// update the perPersonTotal on DOM & show it to user
52+
53+
54+
}
55+
let count = 1;
56+
// ** Splits the bill between more people **
57+
const increasePeople = () => {
58+
// increment the amount of people
59+
count++
60+
61+
// update the DOM with the new number of people
62+
document.getElementById('numberOfPeople').innerHTML=count
63+
64+
// calculate the bill based on the new number of people
65+
calculateBill(count)
66+
}
67+
68+
// ** Splits the bill between fewer people **
69+
const decreasePeople = () => {
70+
// guard clause
71+
// if amount is 1 or less simply return
72+
// (a.k.a you can't decrease the number of people to 0 or negative!)
73+
if(count <= 1){
74+
return
75+
}
76+
77+
// decrement the amount of people
78+
count--
79+
80+
// update the DOM with the new number of people
81+
document.getElementById('numberOfPeople').innerHTML=count
82+
83+
// calculate the bill based on the new number of people
84+
calculateBill(count)
85+
}

‎Advance-tip-calculator/style.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
* {
2+
font-family: 'M PLUS Rounded 1c', Avenir Next, Helvetica, sans-serif;
3+
color: white;
4+
}
5+
6+
body {
7+
background: #8990ec;
8+
}
9+
h1{
10+
text-align: center;
11+
}
12+
13+
.wrapper {
14+
height: 525px;
15+
width: 360px;
16+
color: white;
17+
background: #272639;
18+
border-radius: 1rem;
19+
padding: 1.2rem;
20+
margin: 100px auto;
21+
}
22+
23+
#topContainer {
24+
margin-top: 4rem;
25+
}
26+
27+
.container {
28+
margin-top: 1.4rem;
29+
}
30+
31+
.title {
32+
font-weight: bold;
33+
margin-bottom: 0.6rem;
34+
}
35+
36+
.inputContainer {
37+
background: #353959;
38+
border-radius: 1.4rem;
39+
padding: 0 0.8rem;
40+
display: flex;
41+
align-items: center;
42+
}
43+
44+
#billTotalInput,
45+
#tipInput {
46+
font-size: 1.2rem;
47+
background: none;
48+
border: none;
49+
outline: none;
50+
padding: none;
51+
}
52+
53+
.buttonContainer {
54+
background: #8990ec;
55+
display: grid;
56+
place-items: center;
57+
width: 1.6rem;
58+
height: 1.6rem;
59+
border-radius: 50%;
60+
}
61+
62+
.splitButton {
63+
background: none;
64+
border: none;
65+
}
66+
67+
.controls {
68+
display: flex;
69+
align-items: center;
70+
}
71+
72+
.splitButton {
73+
font-size: 0.8rem;
74+
font-weight: bold;
75+
display: grid;
76+
place-items: center;
77+
}
78+
79+
.buttonText {
80+
color: #353959 !important;
81+
}
82+
83+
.splitAmount {
84+
font-size: 1.6rem;
85+
margin: 0.8rem;
86+
}
87+
88+
#bottom {
89+
display: flex;
90+
justify-content: space-between;
91+
}
92+
93+
.totalContainer {
94+
display: flex;
95+
flex-direction: column;
96+
align-items: end;
97+
}
98+
99+
.total {
100+
font-size: 2rem;
101+
}

0 commit comments

Comments
 (0)