Create a Pomodoro Timer using JavaScript

5 min readApr 28, 2021

Lets understand how can we create a Pomodoro timer by using JavaScript

What is a Pomodoro Timer ?

Pomodoro Timer is a technique that uses a timer to break down work into intervals. Traditionally 25 minutes in length separated by short breaks. The image below is an example of a Pomodoro timer.

Lets get started!

Task 1#

We need to decrease the time of the timer starting from 25 minutes to 0

As we know, in a Pomodoro timer every work session will be of 25 minutes and after every 25 minutes there will be a break session , let suppose break time is 5 minutes

workDuration = 25
breakDuration = 5
seconds = 60

Our first task is to decrease the time by one second seconds = seconds — 1 on every clock second.

We also need to keep in mind that when the seconds become :00 we need to reinitialized seconds = 60 and with this we also need to decrement the minutes by 1 workDuration = workDuration — 1 .

lets arrange the code by writing a function RemainingTime()

workMinutes = workDuration - 1           //25 = 24:59
breakMinutes = breakDuration - 1        //5 = 4:59 let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        seconds = 60}}

Now we are done with our Task 1# . But there is a problem!

The RemainingTime() function will execute only once when we call it , so to fix this problem we need to call this function on every clock second.

Task 2#

To call a function multiple times there is a built in method in JavaScript named as setInterval

setInterval() method is used to execute a specified function multiple times at set time intervals specified in milliseconds (1000ms = 1second). We have to pass to arguments to this method

setInterval(your_fucntion_name , specified_time)

As we want to call our function on every clock second so our arguments to the set interval method will be

setInterval(RemainingTime,1000)

let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        seconds = 60}}let timer = setInterval(RemainingTime , 1000)

Now it make sense , Our function will be called on every clock second

If you noticed we are not dealing with the break time in the above function.

What if the workMinutes become -ve by continuously decrement in workMinutes ?

When then work duration will be over (workMinutes become -ve) we need start the break session (breakDuration = 5)

For this purpose we have to add some conditions in our code

let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        if(workMinutes === -1){
             workMinutes = breakMinutes
}        seconds = 60
}}let timer = setInterval(RemainingTime , 1000)

In the above code when the workMinutes become -ve(or less than 0) then breakMinutes will be assigned to workMinutes

This condition causes the code to start a session of break(5 minutes session) when the workMinutes become over

Let understand this by an example

//let we have workMinutes = 4:59
// and we have breakMinutes = 1:59//Now start decreasing the workMinutes
//(4:59,4:58,4:57,4:56 ..... 0:05,0:04,0:03,0:02,0:01,0:00,-1:59)//in the above line when the workMinutes become -ve(-1:59)//we will assign breakMinute to workMinutes
//then workMinutes become//workMinutes = 1:59//Now when we do this workMinutes will never goes to -ve value. //However when it will become -ve 
//It will start a break session of specified time (e.g: 1:59)
//and will start decreasing the break time which is
//(1:59,1:59,1:57 ..... 0:00)

Now if you noticed ,what will we do when the break session will over?

if we not deal with this the timer will again goes to -ve time and will start decreasing that time.

Task 3#

Solution to the above problem is , we have to again start the work session when the break session become 0:00 or turned to -ve timer

To do this we have to add another condition that will help us regarding this.

Before doing this, I want you to consider that we are also dealing with the break session after every work session. So we need a break session after every work session.

We just have to follow the following sequence for a continuous timer.

After every work session there will be a break session
After the break session there will be always a work session

We need to count the break session so that by using breakCount we can be able to check the turn of the break session

To follow this sequence in our code we need to just put some conditions and these condition will check weather there is time for work session time or break session time.

let have a look to the code to understand the senerio.

breakCount = 0let RemainingTime = () =>{
    seconds = seconds - 1
    if(seconds === 0){
        workMinutes = workMinutes - 1
        if(workMinutes === -1){
            if(breakCount % 2 === 0){
               workMinutes = breakMinutes;
               breakCount++            }else{
               workMinutes = workDuration - 1
               breakCount++            }
          }        seconds = 60
      }}let timer = setInterval(RemainingTime , 1000)

Hurry! our Pomodoro timer is ready

In the end when we want to stop our timer. For this we just have to stop the setInterval() method so that it stop the function calling.

To do this we just have to use the built in method of JavaScript named as clearInterval() method which is used to clear or stop the set Intervals in JavaScript.

clearInterval(timer)

You have to add an event listener on your stop button. When the stop button is clicked , you need to call the method clearInterval(timer) which will stop the timer completely.

Conclusion

If you want to create a complete Pomodoro app from scratch, you can get the complete code from on my github

If you have any query lets solve it together. Feel free to contact me and visit my portfolio

Thanks for reading this article !

want to ask something? hit a comment below !