A chanllenging project which shows how a cup is filled by a water. The HTML looks quite simple becase we have 8 cups of 250ml. But, we can select one cup or a range which is cool. In fact, the HTML is as we can see here:

<div class="cup">
      <div class="remained" id="remained">
        <span id="liters"></span>
        <small>Remained</small>
      </div>

      <div class="percentage" id="percentage"></div>
    </div>

    <p class="text">Select how many glasses of water that you have drank</p>

    <div class="cups">
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
    </div>

So, we have a big cup and 8 small cups. However in the javascript we can see 4 elements selected:

• Each Small Cup -> ‘.cup-small’
• Liters from the big cup -> ‘liters’
• Percetage from the big cup -> ‘percentage’
• Remainder from the big cup -> ‘remainder’

In the javascript you can see it in the first lines:

const smallCups = document.querySelectorAll('.cup-small')
const liters = document.getElementById('liters')
const percentage = document.getElementById('percentage')
const remained = document.getElementById('remained')

As we see that when we click the small cup the big one is filled. So the event lister is on the small cups:

smallCups.forEach((cup, idx) => {
    cup.addEventListener('click', () => highlightCups(idx))
})

And the higlight cup has the responsability of add the class list ‘full’, or remove it. Depend the case.

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

In the beggining of the project and inside the highlightCups functions there is a call to the UpdateBugCup which first is used to update the style for the big Cup.

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`
    }
}

You can see the code in this GitHub Repository: 16.drink_water and the demo of the project is here: Drink Water