How to build a pomodoro timer in JavaScript

Jospin Kanane — Wed, 14 Dec 2022 14:18:02 +0000

The Pomodoro method helps with time management and consists of working in timed 25 minutes and taking a break of 5 minutes. A timer externalizes the discipline and helps you to hold yourself responsable. In this tutorial, we are gonna learn how to built it using html, css and javascript. Find the full code and the result here which follow the following steps :

Create a folder which will contain our project, you can name it as you want but to us, we'll name it pomodoro-timer. Inside our pomodoro-timer folder, let's create three files : index.html, which will contain our project template; index.css for styles and index.js javascrpt logic. Then open it with a text editor. In this tutorial, we are going to use VS Code.

Let's now dive in into the project. First let's create our html document inside the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Then we change our title which is <title>Document</title> to <title>Pomodoro-timer</title> and inside the <body></body>, let's create a section balise with a main-container class. inside this, let's put the following

<section>
   <div class="container">
      <div class="timer">
        <div class="circle">
          <div class="time">
            <p id="minutes">25</p>
            <p id="sep">:</p>
            <p id="seconds">5</p>
          </div>
        </div>
      </div>
    </div>
</section>

This should render something like this

Let's now add some styles to make it presentable in the index.css file.

root {
  font-size: 62.5%;
  --color-primary : #edeef5;
  --color-secondary: #f8dd9b ;
  --color-circle: #e7d8fc ;
  --color-font: #4f6283 ;


}

html, body {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  background-color: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  color: var(--color-font);
  width: 400px;
  height: 90vh;
}
h1 {
  font-size: 30px;
}

.panel {
  display: flex;
  gap: 10px;
}

.work{
  font-size: 20px;
  border: solid 1px var(--color-font);
  padding: 5px;
}
.rest{
  font-size: 20px;
  border: solid 1px var(--color-font);
  padding: 5px;
}

.time {
  display: flex;
  align-items: center;
  align-content : center;
  justify-content : center;
  gap: 5px;
  border: solid 1px var(--color-circle);
  border-radius: 50%;
  background-color: var(--color-circle);
  padding: 50px;
  height: 150px;
  width: 150px;
}
#minutes, #seconds, #sep {
  font-size: 60px;
  padding: 0;
  margin: 0;
  align-items : center;
} 

.timer {
  border: solid 10px var(--color-secondary);
  padding: 10px;
  border-radius: 50%;
  height: 250px;
  width: 250px;
}

Now our project should be styled and look like this

Let's then create our button before we start with javascript logic. Just under the timer div, let's create another div with the controllers class.

<div class="controllers">
   <button id="stop" class="button">
      <i class="fa-solid fa-stop"></i>
   </button>
   <button id="reset" class="button">
      <i class="fa-solid fa-arrow-rotate-left"></i>
   </button>
   <button id="start" class="button">
      <i class="fa-solid fa-pause"></i>
   </button>
</div>

and let's style it

.controllers {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.button {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 1px var(--color-circle);
  background-color: var(--color-circle);
  cursor: pointer;
}

if you noticed, we added ids for each button. the start id for the play button, stop id for the pause button and reset id for the reset button. these ids will help us access these buttons from the index.js file where we will write our javascript logic

Now it's time to add the javascript logic and start decrementing the time with a click event. To access the html tags, we'll ulilise the js querySelector sector by targeting the ids we've attached to the html tags. Let's see how to do this in the code below

const workTime = 25;
const breakTime = 5;
let seconds = "00";
const minutes = document.querySelector("#minutes");
const secondes = document.querySelector("#seconds");
const start = document.querySelector('#start')
const reset = document.querySelector("#reset");
const stop = document.querySelector("#stop");

Thanks to this code, we have selected the elements of the dom like the paragraph of minutes, seconds but also the buttons. We have also declared the variables workTime which we set to 25, breakTime which we set to 5 and seconds which we set to a string of '00'. This will allow us to initialise the minutes by the variable workMinutes and the seconds by the variable seconds

window.onload = () => {
  minutes.innerHTML = workTime;
  secondes.innerHTML = seconds;
};

Now we can create our click event from the play button. To create an event we'll use javascrpit's addListining method and attach a click event and a call back function that will get most of our javascript logic.
In our event we will set seconds to 59 and declare the WorkMinutes variable as workTime - 1 and breakMinutes as breakTime - 1, so that when the event is executed, the seconds will be reset to 59, the minutes to 24 and 4 for the break time, then we will decrement each second by 1. Then we pause a condition, if the seconds become zero, we decrement workminutes by 1, then we pause another condition, if workminites is also zero, we switch to the rest time which will immediately start decrementing. If the 5 rest minites have elapsed, we switch directly to the work minites.

start.addEventListener("click", () => {
  //Change timers
  seconds = 59;
  let workMinutes = workTime - 1;
  let breakMinutes = breakTime - 1;

  breakCount = 0;

  let timerFunction = () => {
    //Change display time
    minutes.innerHTML = workMinutes;
    secondes.innerHTML = seconds;
    // Start timer
    seconds--;

    if (seconds === 0) {
      workMinutes = workMinutes - 1;
      seconds = 59;
      if (workMinutes == -1) {
        if (breakCount % 2 == 0) {
          workMinutes = breakMinutes;
          breakCount++;
        } else {
          workMinutes = workTime;
          breakCount++;
        }
      }
    }
  };
  let interval = setInterval(timerFunction, 1000);
});

Now let's see how to configure the reset button and the pause button. starting with the reset button, we just need to create a click event that will reset the minutes to 25 and the seconds to the string of "00" when it is triggered and clear the interval of the countdown with the clearInterval method. for the pause button, we just need to create a click event and clear the interval.

reset.addEventListener("click", () => {
    clearInterval(interval);
    minutes.innerHTML = workTime;
    secondes.innerHTML = "00";
  });

stop.addEventListener("click", () => {
    clearInterval(interval);
  });

And There you go ! Now you are ready to apply the principles of the pomodoro since you are able to make one by yourself. If you want to learn more about javascript, css and html. do not hesitate to consult the documentation here or leave me a question in the comments, I will be happy to answer you. See you soon !

DEV Community: Jospin Kanane

How to build a pomodoro timer in JavaScript