Demo: Pomodoro Clock
The Pomodoro Clock is based on the “pomodoro technique“, a productivity concept that was designed to help people maximize their productivity and minimize slacking off. By giving small 5 minute breaks after every 25 minute session, users of this technique avoid unnecessary needs to dilly dally with unproductive tasks. At the same time, having more frequent breaks makes the user feel that their tasks are a bit less daunting.
It’s pretty genius in my opinion.
I’m an advocate for pomodoro clocks. In fact, I use it very often. Usually, I trick myself into starting the clock when I’m not feeling productive. I would tell myself that I only had to complete 25 minutes of this task and then I can go do whatever I want. I usually use my 5 minute break to go grab something to snack on, check social media or check emails before getting back to work.
The concept is pretty straight forward:
- Start a task for 25 minutes.
- Take 5 minute breaks in between every 25 minute session.
- Repeat 4 times and take a full half hour break.
- Be productive and be awesome at it!
The setInterval method allows developers to create a pacing to the function or program you’re writing. You can decide how quickly your program is counting and when it should cease.
The break time is also set to 5 minutes by default.
Despite the hard coded times I’ve predetermined, users can adjust the time using buttons to increment or decrement the clock. Buttons are available for both the main 25 minute session and the break session on the same UI. The buttons are only visible before starting the application. Once it starts, the buttons are hidden to prevent any accidental adjustments.
Once the user is done selecting their preferences, they can begin the application by hitting “Start”.
I also have a reset and a stop button, which is hidden until the 25 minute session has concluded. Alongside with the conclusion of the session, an alert with a buzzer sound bite is played to let users know that the timer is up.
After, the break clock will appear and begin counting down.
Tick Tock… Down the Clock
A seconds() function is used to count down from the start time. The setInterval will decrement the count, one second at a time (line 12 of the above code) and continue on until the time has reached zero.
I did have to create a formula for converting the seconds into minutes and seconds. On line 45, I implemented the conversion using an if/else statement to ensure that once the seconds reached “60”, it would add itself onto the minutes and start over from “00”.
Once the count for the timer is down to zero, the function will then play the buzzer audio and clear the setInterval using clearInterval.
The break timer is then initiated to begin its timer using the same setInterval and clearInterval methods.
Buttons, buttons, buttons
To wrap up the application’s functions, I needed to build the functions for the buttons of the timer. A reset button to return all the application’s values back to its initial starting point, functions for incrementing and decrementing the times desired by the user to use with the timer and a set of buttons for incrementing and decrementing the time for the break.
Again, all the buttons are not displayed by default. Just the ones that are needed, depending on the state of the application you’re in. They remain hidden until certain conditions of the application has been met such as the timer reaching zero or resetting the timer. The display of these buttons are handled via jQuery using a .hide() method. The items, if they were not hidden, I feel would congest the UI of the application and appear confusing and hard to use.
The only thing I probably would do different if I were to rebuild this application again is to create a much more interesting UI, perhaps implement it using React and avoid having to hide buttons and displays. React would be a great solution for managing the application’s state and rendering what needs to be displayed while using the timer.