https://github.com/lana-20/drink-water
https://github.com/lana-20/drink-water
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lana-20/drink-water
- Owner: lana-20
- Created: 2021-07-24T01:50:44.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-24T02:02:49.000Z (about 4 years ago)
- Last Synced: 2024-12-30T09:47:45.072Z (10 months ago)
- Language: CSS
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
| [Drink Water](https://github.com/lana-20/50_Projects_in_50_Days/tree/main/DrinkWater) | [Live Demo](https://lana-20.github.io/drink-water/) |
|----|----|
In this project, I am tracking cups of water, with a goal of 2 liters.
I used CSS to style and JavaScript to create functionality for the big cup and eight small cups.
If I click on the first small cup, the big cup shows 12.5% of the 2 liters filled up, with 1.75 liters remaining.
If I click on the fourth small cup, not only it highlights/get filled up, but also fills up all the way up to that cup.
And now I can see 50% of the 2 liters filled up, and 1 liter remaining. If I go to 100%, it fills up the entire big cup.
It's a nice project to practice manipulation of the DOM and do a bit of calculation in the JavaScript.