Drink water in JavaScript with Source code

Drink water in JavaScript with Source code


Drink water is a web-based project. This project is used for tracking a person how much ne drinks water in a day. It is coded in HTML5, CSS3 and JavaScript.

In this project, we are building glass or cup that shows the amount of water. This drink water project is actually having a goal of two liters of water to drink in a single day. This project is dedicated to health. Water is the most important nutrient in the human body. The cup is designed and styled in CSS.

The project displays one big 2-liter cup and the other 6 small 250ml cups. Six small cups with 250ml of water make 2000 which is 2 liter of water. The goal is to fill the cup by drinking the 250ml water at different time. Once you tap one small cup and marked as water drank the big cup will start filling. Have a look at the screenshot below.

Drink water

Building the project

Drink water is built using programming like HTML5, CSS3, and JavaScript. HTML is used for placing elements on the screen. CSS is used for styling the HTML content. We are using google fonts in our project. JavaScript is for making the backend functionality. CSS is used to make the big cups, small cups, text, fonts, and background color.

JavaScript is implemented in filling the empty cup when someone taps on the small cup. Further, the details will be displayed on the big cup showing the percentage completed and remaining. Every time, the user tap on the small cup the big cup will update itself. Download the project and get experienced by yourself.

How to use this project?

  • Download the project.
  • Extract the zip file & get the folder.
  • Set up an editor or IDE.
  • Open the project folder on the editor. (vs code, atom, sublime)
  • Launch the program in the browser. (chrome, firefox)
  • Finish your first drink water target.
  • Enjoy & Share

Click the button below to get the source code for this project.

Spread the love