Faeze Amini - Portfolio

Case Study

Drink Water

Creating a platform to track your water intake visually.

IndustryWeb Store
Year2024
ServiceWeb application
imgdrinkWater

Challenge

Creating a platform to track your water intake visually, built using javascript.

  • Select any of the small cups (CupSmall) and display the percentage of water filled in the cup.
  • Show the amount of empty space in the cup.
  • Upon clicking any CupSmall, reduce the amount of water in the cup.

Solution

- Utilize JavaScript to modify the styles dynamically.

- Use classList to highlight the selected CupSmall.

- Apply CSS transitions to enhance the visual experience when filling or emptying the cup.

Visit website

Technologies

HTML

CSS

Github

js

Git

main*
Go Live