Another week, another project completed. This one required real mental gymnastics and many hours of learning JavaScript, but in the end, I made it, and the application for counting drinking glasses of water finally works.
When participating in the courses, you can choose the minimum option: I only do the basics, as long as you go further and you can choose the “go all out” option. Of course, my character does not allow me to slide over topics unless deadlines are chasing.
However, in the case of the “WTF Co ten frontend” course, the holidays forced a delay in the implementation of the course and so we come to the point where one week of WTF learning turned into a month, and then another week into another month. How is this possible?
All because I love exploring individual issues. At the WTF course, Maciek showed how something works and what it is with, and I decided to deepen this knowledge.
The problem is that you can drill down to no end in programming. On the one hand, it caused a lot of delays in learning, but on the other hand, it allowed me to create the HydroApp application that has the full expected functionality.
JavaScript HydroApp functionality
It counts the glasses of water drunk every day. They can be added and subtracted from 0 to 99. You can reload the page and the daily result will not disappear and you can recreate the history up to 7 days back. In addition, it has a few goodies that I learned from the Advanced CSS course.
The biggest problem with creating this app was that the history had to be stored with localStorage. This requirement was given by the tutor because localStorage is perfect for storing key-value pairs.
The problem begins when you want to display to the user the history of the glasses drunk from the data recorded in this way. Of course, you can iterate over the key-value pairs and display whatever has been saved, but at some point, things will start to happen without our control.
Let’s assume that the user will be diligent and will use the application every day for 30 days. Will the layout I designed for the application still be useful? Will it look good? Will it be useful to the user? I don’t think so. I decided that the history should be deleted for more than 7 days. This decision complicated the project a lot.
Project problem with localSotrage
I started to get tired of handling data saved in localStorage. Borrowing them for use was still going smoothly, but rewriting was starting to cause problems that even Stack Overflow hadn’t heard of. It was a sign for me that it could be done more easily.
After a long search, browsing the documentation, etc., it turned out that JavaScript allows you to easily convert a string object to an Array object. It was a real breakthrough. Since in localStorage I can save data in the form of key-value as a string, it is enough to change string to Array at the input, and at the output, Array to a string, and the problem is solved.
After solving the main problem, all that was left to do was add a few lines of code to properly handle the whole mechanism and that’s it. The app works and I can go further with the WTF training. Satisfaction is priceless.
As for the way forward, I would definitely like to finish WTF, but it is not certain that the next week will bring some new path that will distract me from the course for another month. In the near future, I would also like to write another part about configuring the Linux server for my own needs, and that also takes time. This week I spent 6 hours programming entirely on the HydroApp project. In total, the project took me 16 hours.
The project is available on the website:
http://krzysztofnyrek.pl/hydroapp