Skip to content

Commit d025ca7

Browse files
solygambassolygambas
committed
add drink water
1 parent fe40b5a commit d025ca7

File tree

3 files changed

+180
-0
lines changed

3 files changed

+180
-0
lines changed

Diff for: ‎16-drink water/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<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>Drink Water</title>
8+
</head>
9+
<body>
10+
<h1>Drink Water</h1>
11+
<h2>Goal: 2 liters</h2>
12+
<div class="cup">
13+
<div class="remained" id="remained">
14+
<span id="liters"></span>
15+
<small>Remained</small>
16+
</div>
17+
<div class="percentage" id="percentage"></div>
18+
</div>
19+
<p class="text">Select how many glasses of water that you have drank</p>
20+
<div class="cups">
21+
<div class="cup cup-small">250 ml</div>
22+
<div class="cup cup-small">250 ml</div>
23+
<div class="cup cup-small">250 ml</div>
24+
<div class="cup cup-small">250 ml</div>
25+
<div class="cup cup-small">250 ml</div>
26+
<div class="cup cup-small">250 ml</div>
27+
<div class="cup cup-small">250 ml</div>
28+
<div class="cup cup-small">250 ml</div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

Diff for: ‎16-drink water/script.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const smallCups = document.querySelectorAll(".cup-small");
2+
const liters = document.getElementById("liters");
3+
const percentage = document.getElementById("percentage");
4+
const remained = document.getElementById("remained");
5+
6+
const updateBigCup = () => {
7+
const fullCups = document.querySelectorAll(".cup-small.full").length;
8+
const totalCups = smallCups.length;
9+
if (fullCups === 0) {
10+
percentage.style.visibility = "hidden";
11+
percentage.style.height = 0;
12+
} else {
13+
percentage.style.visibility = "visible";
14+
percentage.style.height = `${(fullCups / totalCups) * 330}px`;
15+
percentage.innerText = `${(fullCups / totalCups) * 100}%`;
16+
}
17+
if (fullCups === totalCups) {
18+
remained.style.visibility = "hidden";
19+
remained.style.height = 0;
20+
} else {
21+
percentage.style.visibility = "visible";
22+
liters.innerText = `${2 - (250 * fullCups) / 1000}L`;
23+
}
24+
};
25+
26+
const highlightCups = (index) => {
27+
if (
28+
smallCups[index].classList.contains("full") &&
29+
!smallCups[index].nextElementSibling.classList.contains("full")
30+
) {
31+
index--;
32+
}
33+
smallCups.forEach((cup, index2) => {
34+
if (index2 <= index) cup.classList.add("full");
35+
else cup.classList.remove("full");
36+
});
37+
updateBigCup();
38+
};
39+
40+
smallCups.forEach((cup, index) =>
41+
cup.addEventListener("click", () => highlightCups(index))
42+
);
43+
44+
updateBigCup();

Diff for: ‎16-drink water/style.css

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
2+
3+
:root {
4+
--border-color: #144fc6;
5+
--fill-color: #6ab3f8;
6+
}
7+
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
background-color: #3494e4;
14+
color: #fff;
15+
font-family: "Montserrat", sans-serif;
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
margin-bottom: 40px;
20+
}
21+
22+
h1 {
23+
margin: 10px 0 0;
24+
}
25+
26+
h2 {
27+
font-weight: 400;
28+
margin: 10px 0;
29+
}
30+
31+
.text {
32+
text-align: center;
33+
margin: 0 0 5px;
34+
}
35+
36+
.cup {
37+
background-color: #fff;
38+
border: 4px solid var(--border-color);
39+
color: var(--border-color);
40+
border-radius: 0 0 40px 40px;
41+
height: 330px;
42+
width: 150px;
43+
margin: 30px 0;
44+
display: flex;
45+
flex-direction: column;
46+
overflow: hidden;
47+
}
48+
49+
.cup.cup-small {
50+
height: 95px;
51+
width: 50px;
52+
border-radius: 0 0 15px 15px;
53+
background-color: rgba(255, 255, 255, 0.9);
54+
cursor: pointer;
55+
font-size: 14px;
56+
align-items: center;
57+
justify-content: center;
58+
text-align: center;
59+
margin: 5px;
60+
transition: 0.3s ease;
61+
}
62+
63+
.cup.cup-small.full {
64+
background-color: var(--fill-color);
65+
color: #fff;
66+
}
67+
68+
.cups {
69+
display: flex;
70+
flex-wrap: wrap;
71+
align-items: center;
72+
justify-content: center;
73+
width: 280px;
74+
}
75+
76+
.remained {
77+
display: flex;
78+
flex-direction: column;
79+
align-items: center;
80+
justify-content: center;
81+
text-align: center;
82+
flex: 1;
83+
transition: 0.3s ease;
84+
}
85+
86+
.remained span {
87+
font-size: 20px;
88+
font-weight: bold;
89+
}
90+
91+
.remained small {
92+
font-size: 12px;
93+
}
94+
95+
.percentage {
96+
background-color: var(--fill-color);
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
100+
font-size: 30px;
101+
font-weight: bold;
102+
height: 0;
103+
transition: 0.3s ease;
104+
}

0 commit comments

Comments
 (0)