Planning
The problem that I wanted to solve was that I wanted to maximize my productivity so that I could efficiently teach myself how to code everyday and set daily goals for myself. While there are plenty of resources out there such as the built in clock on Windows, Notion, and Focus To-Do extension; I wanted to put my newly acquired JavaScript skills to the test and build my own.
One of the methods I learned about while researching ways to be more productive that kept appearing was the Pomodoro method. Itj's essentially a way of slowly working up the amount of time working. For example, you can set 4 sessions to be productive with the first one being 10 minutes long with a break of 5 minutes. Then the second session is 30 minutes of work with a 15 minute break and so on.
I wanted a more customizable approach meaning I don't want the user to be locked into a set amount of sessions or a set amount of study time while still being able to sit down for a productive amount of time. So I decided the make the timer at least 5 minutes for both the break and timer. They both also reset when they run out.
Development
The HTML is structured in 3 different main sections which are the timers, input task field, and the task lists. They are all direct childrens of a main container that holds the app together.
Creating this app helped me understand how to use local storage and how to use it so that the user is able to save and delete their
tasks while using the app. It was also great way for me to practice the setInterval() method of JS to add functionality
to the timer.
Results
I benefited a lot from this project by being able to practice my JS, implementing local storage, and creating an app that has helped me stay on track of my goals.
In the future I may beef this project up by adding different alarm sounds, editting an already added task item, or making the appearance customizable by the user (so they are not forced to seeing it only in green 😅). For now, it has been of great help to me in my developer journey.