Picture of a clock

Free Code Camp: Build a Pomodoro Timer

Hi! I’m back.

Why didn’t post last week?

It’s because last Sunday is my little one’s first birthday so I became a little busier. Haha.

Anyway, let’s go back to coding!

The next project will be a pomodoro timer.

The user stories we have to fulfill are the following:

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

markup

This is my markup.


<div>
 <h1><i class="fa fa-clock-o" aria-hidden="true"></i> Pomodoro Timer</h1>
 
 <div class="timer">
 <button class="minus">-</button>
 <p class="minutes">25</p>
 <p>:</p>
 <p class="seconds">00</p>
 <button class="add">+</button>
 </div>
 
 <button class="start">Start</button>
 <button class="reset">Reset</button> <!-- When the timer ends, this will reset the clock -->
</div>

I separated the minutes and the semi-colon and the seconds because we’re going to change the minutes and seconds as we count down.

STYLES

body {
  background-color: #000;
  color: #fff;
  font-family: 'Handlee', cursive;
  font-size: 30px;
  text-align: center;
}

.fa {
  color: #99cc00;
}

h1 {
  margin-top: 0;
}

.timer {
  padding-top: 40px;
  padding-bottom: 20px
}

.timer p {
  display: inline-block;
  font-size: 100px;
  margin: 0;
  font-family: 'Dosis', sans-serif;
  color: #99cc00;
}

.timer button {
  vertical-align: super;
  border: none;
  font-size: 70px;
  cursor: pointer;
}

.timer button:hover {
  background:transparent;
  color: #fff;
  font-weight: bold;
}

.timer button:last-of-type {
  margin-left: 6px;
}

button {
  font-family: 'Handlee', cursive;
  background: transparent;
  border: 2px solid #fff;
  letter-spacing: 1px;
  color: #fff;
  font-size: 20px;
  padding: 5px 20px;
  margin-right: 8px;
}

button:last-of-type {
  margin-right: 0;
}

button:hover {
  background: #fff;
  color: #000;
  transition: all 0.3s linear;
}

These are the styles I came up with. Feel free to design your own.

script

In this program, I used jQuery here so make sure you have that linked to your program.

I’m going to explain my plans here.

The add and minus buttons will be clickable if the start button is not yet clicked. The user here can change how long he wants to set his timer.

Once the start button is clicked, the add and minus buttons will be disabled.

The reset button is there to reset it to 25 minutes.

// Variables

var minutes = $(".minutes");
var seconds = $(".seconds");

var timeInMin = minutes.text();
var timeInSec = seconds.text();

var id;

I declared global variables minutes and seconds to get hold of the particular element with the particular class.

I also stored those variables’ content into another variables

I suggest giving your variables with clear names.

function addZeroOrNot() {
  if (timeInMin < 10) {
      minutes.text("0" + timeInMin);
  } else {
      minutes.text(timeInMin);
  }
}

The method, addZeroOrNot(), will display a zero beside the number when the number is less than 10. A zero beside a number less than 10 looks better than not having zero.

This will be called several times.

function displayTime() {
  
  addZeroOrNot();
  
  if (timeInSec < 10) {
    seconds.text("0" + timeInSec);
  } else {
    seconds.text(timeInSec);
  }
  
}

This method, displayTime(), will validate the seconds and minutes if they are less than 10. And it depends on the condition what will be displayed.

function startTimer() {
  
  // for decrementing
  if (timeInMin >= 0 && timeInSec > 0) {
    timeInSec--;
  } else if (timeInMin > 0 && timeInSec == 0) {
    timeInMin--;
    timeInSec = 59;
  } else if (timeInMin == 0 && timeInSec == 0) {
    timeInMin = 0;
    timeInSec = 0;
    clearInterval(id);
    $(".timer button").fadeIn("fast");
  }
  
  // for displaying
  displayTime();
}

In this method, startTimer(), the variables timeInMin and timeInSec will undergo a series of validation. This method will be called every second. That’s why every second, it’ll set a different time.

I guess I don’t need to explain the conditions above but I’m going to give examples for each condition.

  1. 25: 01 , 00: 45 – They will just decrement the seconds.
  2. 01: 00 – This means the next second, we should decrement the minutes now. And make the seconds count down from 59 again.
  3. 00 : 00 – This is the end. The timer will stop.

Then, since I’m using global variables, I can call the method, displayTime(), and display the time every second.

// Buttons

$(".add").click(function() {
  timeInMin++;
    
  addZeroOrNot();
  
});


$(".minus").click(function() {
  
  if (timeInMin > 0) {
      timeInMin--;
  }
  addZeroOrNot();
  
});

Remember that the user can set how long he wants to turn on his timer. These functions are for that purpose. When the add button is clicked, the minutes will increase. If the minus button is clicked, the minutes will decrease as long as the minutes are greater than 0.

$(".start").click(function() {
  
  $(".timer button").fadeOut("fast");
  
  timeInMin--;
  timeInSec = 60;
  id = setInterval(startTimer, 1000)
});

Everything will begin when the start button is clicked.

The add and minus buttons will fade out fast.

The minutes will decrease by one.

Our seconds is set to 60.

And we will start our timer.

The setInterval() method is a built-in method that will call the function, startTimer(), every 1 second. You set them in the parameters.

This will return an id that you will use to stop or to clear the setInterval().

$(".reset").click(function() {
  
  $(".timer button").fadeIn("fast");

  clearInterval(id);
  timeInMin = 25;
  timeInSec = "0";
  displayTime();
  
});

When the reset button is clicked, we’ll put back the buttons.

Using the built-in method, clearInterval(), we’re going to pass the variable id here. And this will clear our timer.

We’re going to set the minutes and seconds and display them.

 

You can check my whole code here.

And that’s it. That’s how we build a JavaScript Pomodoro Timer.

I hope that you understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s