Skip to content

Commit 9e2c979

Browse files
Faniel77Faniel77
committed
Tip Calculator
1 parent 168190b commit 9e2c979

3 files changed

Lines changed: 155 additions & 13 deletions

File tree

‎Week3/project/index.html‎

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,50 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Tip Calculator</title>
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Tip Calculator</title>
8-
</head>
9-
10-
<body>
11-
<div id="app"></div>
12-
<script src="index.js"></script>
13-
</body>
14-
15-
</html>
10+
<body>
11+
<div id="container">
12+
<div id="header">
13+
<h1>TIP CALCULATOR</h1>
14+
</div>
15+
<div id="form">
16+
<form action="#">
17+
<div id="billAmount">
18+
<p>How much was your bill?</p>
19+
<label for="amount">$</label>
20+
<input type="text" placeholder="Bill Amount" id="amount" />
21+
</div>
22+
<div>
23+
<p>How Was your Service ?</p>
24+
<!-- <label for="service"></label> -->
25+
<select name="service" id="service">
26+
<option disabled selected value="0">Choose an option</option>
27+
<option value="0.3">30% - Outstanding</option>
28+
<option value="0.2">20% - Good</option>
29+
<option value="0.15">15% - Ok</option>
30+
<option value="0.1">10% - Bad</option>
31+
<option value="0.05">5% - Terrible </option>
32+
</select>
33+
</div>
34+
<div id="people">
35+
<p>How many people are sharing the bill ?</p>
36+
<input type="text" name="people" id="numOfPeople" />
37+
<label for="people">people</label>
38+
</div>
39+
<button id="btn">CALCULATE</button>
40+
</form>
41+
</div>
42+
<div id="totalTip">
43+
<p>Tip Amount</p>
44+
<span>$</span><span id="tip">0.00</span>
45+
<p id="each">each</p>
46+
</div>
47+
</div>
48+
<script src="index.js"></script>
49+
</body>
50+
</html>

‎Week3/project/index.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
11
// Your code goes in here
22

3-
document.querySelector("#app").innerText = "Tip Calculator";
3+
function calculateTip() {
4+
var billAmount = document.getElementById('amount').value;
5+
var serviceQuality = document.getElementById('service').value;
6+
var numberOfPeople = document.getElementById('numOfPeople').value;
7+
8+
//check if inputs are empty
9+
if (billAmount === '' || serviceQuality == 0) {
10+
alert('You need to fill in all the fields!');
11+
}
12+
//check the number of people
13+
if (numberOfPeople == 1) {
14+
document.getElementById('each').style.display = 'none';
15+
} else {
16+
document.getElementById('each').style.display = 'block';
17+
}
18+
//calculating the tip
19+
var total = (billAmount * serviceQuality) / numberOfPeople;
20+
total = Math.round(total * 100) / 100;
21+
total = total.toFixed(2); // round the number to 2 decimal points
22+
document.getElementById('totalTip').style.display = 'block';
23+
document.getElementById('tip').innerHTML = total;
24+
}
25+
// tip amount is not visible on load
26+
const displayTip = document.getElementById('totalTip');
27+
displayTip.style.display = 'none';
28+
calculator = document.getElementById('btn');
29+
calculator.addEventListener('click', calculateTip);

‎Week3/project/style.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
2+
3+
body {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
background: #8e0e00;
8+
font-family: 'Open Sans', sans-serif;
9+
}
10+
h1 {
11+
font-size: 1.125rem;
12+
margin-left: 20%;
13+
}
14+
#container {
15+
display: flex;
16+
align-items: stretch;
17+
flex-direction: column;
18+
background: #f7f7f7;
19+
height: 35.813rem;
20+
width: 22.5rem;
21+
position: fixed;
22+
top: 50%;
23+
left: 50%;
24+
transform: translate(-50%, -50%);
25+
border-radius: 1.25rem;
26+
}
27+
#header {
28+
background: #1f030c;
29+
color: white;
30+
border-top-left-radius: 1.25rem;
31+
border-top-right-radius: 1.25rem;
32+
}
33+
#form {
34+
font-size: 1rem;
35+
padding: 1.5rem;
36+
}
37+
#amount {
38+
width: 70%;
39+
padding: 0.3rem 0.5rem;
40+
border: 2px inset rgba(28, 110, 164, 0.36);
41+
}
42+
#amount:focus {
43+
outline: none;
44+
border: 3px solid #2980b9;
45+
}
46+
#service {
47+
width: 90%;
48+
padding: 0.813rem;
49+
border: 2px inset rgba(28, 110, 164, 0.36);
50+
font-size: 1.563rem;
51+
/* background: #56556e; */
52+
}
53+
#service option {
54+
background: #56556e;
55+
color: white;
56+
}
57+
#numOfPeople {
58+
width: 80%;
59+
padding: 0.4rem 0.6rem;
60+
border: 2px inset rgba(28, 110, 164, 0.36);
61+
}
62+
#btn {
63+
font-size: 1.2rem;
64+
font-weight: bold;
65+
background: #ad133a;
66+
color: white;
67+
border-radius: 0.3rem;
68+
width: 12.5rem;
69+
height: 3.125rem;
70+
margin: 1.875rem 1.875rem 0 1.875rem;
71+
}
72+
#btn:hover {
73+
background: #6e6d6d;
74+
}
75+
#totalTip {
76+
position: absolute;
77+
bottom: 10px;
78+
left: 35%;
79+
font-size: 1rem;
80+
text-align: center;
81+
}

0 commit comments

Comments
 (0)