https://my-water-app.netlify.app/
This app tracks the amount of water you drink daily. At the start of the app, you put in how much water you want to consume daily and the glass capacity you will use to track your progress. Of course, these choices are not permanent, as you can change them in the app by going in the menu to Settings. Be aware that you can not enter anything but numbers in the input fields; otherwise, you will get an error. So far, this app can only use liters as a measurement unit, so you have to enter the amount in liters.
Once you entered your desired amounts, you land on the dashboard. Every click on the plus icon or add button means you have consumed one unit of your glass capacity. If you make a mistake, you can always click the undo button.
This app comes with History and Statistics. In History, you have a calendar, and there you can see how much water you have consumed over time. In Statistics, you have Average completion, Weekly average, and Monthly average. Average completion is the average percentage of water you have consumed over time. The Weekly average is calculated based on the current week, and the Monthly average is based on the current month.
I built this app with HTML, SCSS, and Vanilla Javascript. I didn't use any libraries or frameworks. For the wave, I used Photoshop. In this project, I split my code into modules, which made me realize that, in this way, the code is structured in a much more logical way, and it's also much easier to read and be understood. For this app I don't have any backend. I only used Local Storage to keep the values stored.
I learned a lot through building this application, and I got myself more familiar with all the concepts I've learned so far. Next, I plan to learn React and build something with it.