-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
51 lines (43 loc) · 1.3 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const smallCups = document.querySelectorAll('.cup-small');
const liters = document.getElementById('liters');
const percentage = document.getElementById('percentage');
const remained = document.getElementById('remained');
updateBigCup();
smallCups.forEach((cup, idx) => {
cup.addEventListener('click', () => highlightCups(idx));
});
function highlightCups(idx) {
if (
smallCups[idx].classList.contains('full') &&
!smallCups[idx].nextElementSibling.classList.contains('full')
) {
idx--;
}
smallCups.forEach((cup, idx2) => {
if (idx2 <= idx) {
cup.classList.add('full');
} else {
cup.classList.remove('full');
}
});
updateBigCup();
}
function updateBigCup() {
const fullCups = document.querySelectorAll('.cup-small.full').length;
const totalCups = smallCups.length;
if (fullCups === 0) {
percentage.style.visibility = 'hidden';
percentage.style.height = 0;
} else {
percentage.style.visibility = 'visible';
percentage.style.height = `${(fullCups / totalCups) * 330}px`;
percentage.innerText = `${(fullCups / totalCups) * 100}%`;
}
if (fullCups === totalCups) {
remained.style.visibility = 'hidden';
remained.style.height = 0;
} else {
remained.style.visibility = 'visible';
liters.innerText = `${2 - fullCups * 0.25}L`;
}
}