Water Drinking Application

Today I learned how to create a water drinking application that updates the DOM based on user selection.I learned how to create functions that can modify visibility, height and percentage attributes of an object. I also learnt how to use index argument in a function.

                
                    const filledCups = document.querySelectorAll('.cup-small.full').length;
                    const totalCups = smallCups.length;
                
                    if(filledCups === 0) {
                        percentage.style.visibility = 'hidden';
                        percentage.style.height = 0;
                    } else {
                        percentage.style.visibility = 'visible';
                        percentage.style.height = `${filledCups / totalCups * 330}px`;
                        percentage.innerText = `${filledCups / totalCups * 100}%`;
                    }

                    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')
                            }
                        })
                
            

File Info

Category	HTML / JS / CSS
Credits	50 Projects in 50 days
Date	February 8th, 2025
Codepen	Click here

Go Back