You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
50 lines
1.4 KiB
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 (idx===7 && smallCups[idx].classList.contains("full")) idx--;
|
|
else 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 - (250 * fullCups / 1000)}L`
|
|
}
|
|
}
|