One of freeCodeCamp’s advanced project is to create a pomodoro timer with the following user stories:
- User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.
- User Story: I can reset the clock for my next pomodoro.
- User Story: I can customize the length of each pomodoro.
I also used the HTMLAudioElement Web API to play an alarm whenever the timer finishes to alert the user. A future feature that I want to add is to incorporate the Notification Web API to send desktop notifications.
For the modals/alert boxes on this project, I used a small library called alertify.js.
Since Adobe XD is now available for Windows 10, I wanted to try it out by creating a mockup for my timer. I wanted to create a user-friendly timer with a simple and modern design.
To achieve the simple design, I opted to just have an input field and a start button. The input field is programmatically populated with the suggested amount of times for a session, a break and a longer break so the user can start the timer without having to configure a lot of things.
To distinguish between a break and a session, I decided to use a switch toggle and a visual cue by changing the background colour from red to green. I wanted the user to manually switch between a break and a session to enforce the idea of actually taking a break instead of working through the time alloted for breaks. I also included a session counter as per the original pomodoro technique so users know how many sessions they’ve done.
Another feature I implemented is to display the timer on the
<title> element so users can easily see how much time they have remaining.
Lastly, I wanted to make sure that people unfamiliar with the pomodoro technique will have instructions as soon as they reach this timer. I did this by including the instructions in a welcome modal as well as on each of the modals after the timer ends.