Day # 99: Coffee quantity

I love drinking coffee, but I am aware of the limits to its daily consumption. According to the FDA, the maximum amount of coffee one could have per day is 400mg, which roughly equals to 5 shots of espresso.

In order to practice the handling of events of the DOM, I thought of working on a website that counts the amount of coffee you have every day, in order to register and control said consumption.

I created six cups of espresso on the DOM and then I also drew a bigger cup which represents the total of your coffee consumption per day.

The most challenging part of this project was to control the cups that represent the amount of coffee that is consumed. To achieve that, you need to select from the HTML file the class of cup and then control it with querySelectorAll so you can control the object that includes those cups.

function highlightCups(idx) {

    if(smallCups[idx].classList.contains('full') &&

    !smallCups[idx].nextElementSibling.classList.contains('full')) {

        idx--

    }

Then, you need to control whichever cup is being clicked on so you can keep count of the consumption:

smallCups.forEach((cup, idx) => {

    cup.addEventListener('click', () => highlightCups(idx))

})

    smallCups.forEach((cup, idx2) => {

        if(idx2 <= idx) {

            cup.classList.add('full')

        } else {

            cup.classList.remove('full')

        }

    })

    updateBigCup()

}

The cherry on top is a couple of warnings that are featured if your consumption is nearing or exceeding the advisable limit.