home about blog work resume contact
Productivity Timer
  • #HTML
  • #Sass
  • #JavaScript
  • #Git
View Live

Playing with Time

Using Date() to create a timer

One of freeCodeCamp’s advanced project is to create a pomodoro timer with the following user stories:

  1. User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.
  2. User Story: I can reset the clock for my next pomodoro.
  3. User Story: I can customize the length of each pomodoro.

Development Process

For this project, I wanted to use vanilla JavaScript to further develop my skills with the language. The main logic for this project is using the Date object to countdown from when the start button is pressed up to the amount of time on the input field + time from start.

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.

Design Process

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.

An animated GIF displaying the various states of the pomodoro timer

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.

Go Up?