Skip to content

Commit a83d2b9

Browse files
massam89massam89
committed
Finished project
1 parent 4ab7470 commit a83d2b9

File tree

3 files changed

+159
-3
lines changed

3 files changed

+159
-3
lines changed

‎Week3/project/index.html‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,41 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Tip Calculator</title>
8+
<link rel="stylesheet" href="style.css">
89
</head>
910

1011
<body>
11-
<div id="app"></div>
12+
<div id="app">
13+
<h1>Tip Calculator</h1>
14+
<hr>
15+
<form id="form">
16+
<label for="bill">How much was youl bill?</label>
17+
<input type="number" min='0' id="bill">
18+
19+
<label for="service">How was you service?</label>
20+
<select id="service">
21+
<option value="default" disabled selected>--Choose an option--</option>
22+
<option value="30">30% - Outstanding</option>
23+
<option value="20">20% - Good</option>
24+
<option value="15">15% - It was OK</option>
25+
<option value="10">10% - Bad</option>
26+
<option value="5">5% - Terrible</option>
27+
</select>
28+
29+
<label for="people">How many people are shating the bill?</label>
30+
<input type="number" min='0' id="people">
31+
32+
<button id="calculate">Calculate!</button>
33+
</form>
34+
35+
<div class="amount">
36+
<h2>TIP AMOUNT</h2>
37+
<span id="amount">40</span>
38+
<span id="each">each</span>
39+
</div>
40+
</div>
41+
42+
1243
<script src="index.js"></script>
1344
</body>
1445

‎Week3/project/index.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1-
// Your code goes in here
1+
const bill = document.getElementById('bill');
2+
const service = document.getElementById('service');
3+
const people = document.getElementById('people');
4+
const calculate = document.getElementById('calculate');
5+
const amount = document.getElementById('amount');
6+
const each = document.getElementById('each');
27

3-
document.querySelector("#app").innerText = "Tip Calculator";
8+
calculate.addEventListener("click", calculateTip);
9+
10+
function calculateTip(e) {
11+
e.preventDefault();
12+
13+
14+
if (bill.value == '' || service.value == 'default' || people.value == '') {
15+
alert('Please fill all fields!');
16+
} else {
17+
amount.textContent = parseFloat(service.value * bill.value / 100 / people.value).toFixed(2);
18+
each.style.display = 'block';
19+
20+
if (people.value == 1) {
21+
each.style.display = 'none';
22+
}
23+
}
24+
25+
}

‎Week3/project/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
9+
font-size: 20px;
10+
background-color: aquamarine;
11+
color: azure;
12+
}
13+
14+
#app{
15+
width: 450px;
16+
margin: 0;
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%);
21+
background-color: coral;
22+
padding: 30px ;
23+
border-radius: 10px;
24+
}
25+
26+
h1{
27+
text-align: center;
28+
margin-bottom: 20px;
29+
font-size: 2.5em;
30+
}
31+
32+
hr{
33+
border: 1px solid white;
34+
}
35+
36+
form{
37+
margin-top: 20px;
38+
39+
}
40+
41+
label{
42+
font-size: 1.2em;
43+
margin: 10px 0;
44+
}
45+
46+
input[type=number], select {
47+
width: 100%;
48+
padding: 5px 20px;
49+
margin: 8px auto;
50+
font-size: 1em;
51+
text-align: center;
52+
text-align-last: center;
53+
}
54+
55+
label:first-child::after{
56+
content: '$';
57+
color: black;
58+
position: absolute;
59+
top: 165px;
60+
left: 50px;
61+
font-size: 1.4em;
62+
}
63+
64+
span, label, button, select, input{
65+
display: block;
66+
}
67+
68+
button{
69+
margin:50px 10px 0 0;
70+
width: 100px;
71+
height: 50px;
72+
font-size: 1em;
73+
background-color: white;
74+
border: none;
75+
color: coral;
76+
border-radius: 5px;
77+
float:right;
78+
79+
}
80+
81+
.amount{
82+
background-color: tomato;
83+
border: 1px solid white;
84+
width: 60%;
85+
margin: 20px auto;
86+
padding: 10px;
87+
text-align: center;
88+
border-radius: 5px;
89+
float: left;
90+
box-shadow: 0px 0px 50px;
91+
}
92+
93+
span{
94+
font-size: 1.2em;
95+
position: relative;
96+
}
97+
98+
#amount::before{
99+
content: '$';
100+
position: absolute;
101+
top: 0px;
102+
left: 50px;
103+
}

0 commit comments

Comments
 (0)