TheRealRajan / Drink-Water-Visualizer

An interactive visualization of your daily goal of drinking water.

Home Page:https://therealrajan.github.io/Drink-Water-Visualizer/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Drink-Water-Visualizer

A visualization of your daily goal of drinking water.

When you click on an empty cup it will fill up indiccating you drank a cup of water and it will be added towards your goal of driking water for the day.

When a cup is clicked, the total volume in the big cup will animate and will start filling in partially showing what your current progess is in percentage form. A you keep adding cups the total volume in the bifg cup will start increasing until it gets full.

And when you click on a cup that is currently full, it will become empty and the total volume will decrease along with the total percentage of your goal.

The demo is live at https://therealrajan.github.io/Drink-Water-Visualizer/

Any improvements are welcome.

image

About

An interactive visualization of your daily goal of drinking water.

https://therealrajan.github.io/Drink-Water-Visualizer/

License:MIT License


Languages

Language:CSS 45.2%Language:JavaScript 31.3%Language:HTML 23.5%