Pomodoro Clock

index.html

<div class="container">
  <h1>Pomodoro Clock</h1>

  <div id="sessionTime">25 : 00</div>

  <div id="controls">
    <div id="breakControl">
      <label>Break Time</label>
      <button type="button" id="breakminus">-</button>
      <span id="bNumber">5</span>
      <button type="button" id="breakplus">+</button>
    </div>

    <button type="button" id="operatedButton"><i class="fa fa-play"></i></button>

    <div id="sessionControl">
      <label>Session Length</label>
      <button type="button" id="sessionminus">-</button>
      <span id="sNumber">25</span>
      <button type="button" id="sessionplus">+</button>
    </div>
  </div>
</div>

pomodoro-clock.markdown

Pomodoro Clock

A Pen by Hoang Vo on CodePen.

License.

script.js

var sessionTime = document.querySelector("#sessionTime");
var sNumber = document.querySelector("#sNumber");
var bNumber = document.querySelector("#bNumber");
var operatedButton = document.querySelector("#operatedButton");
var breakminus = document.querySelector("#breakminus");
var breakplus = document.querySelector("#breakplus");
var sessionminus = document.querySelector("#sessionminus");
var sessionplus = document.querySelector("#sessionplus");

var minutes;
var seconds;
var pause = false;
var isBreak = false;

// This is main function, when we run the web, the program will be run
function main() {
  var times;
  minutes = Number(sNumber.innerHTML) - 1;
  seconds = 60;

  // We need to have an user interaction for each buttons on the screen
  // if the the clock is running we could not click the buttons unless we pause it
  sessionminus.addEventListener("click", function() {
    if (!pause) {
      var number = Number(sNumber.innerHTML);
      sNumber.innerHTML = minus(number);
      reset(minus(number) - 1);
    }
  });

  sessionplus.addEventListener("click", function() {
    if (!pause) {
      var number = Number(sNumber.innerHTML);
      sNumber.innerHTML = add(number);
      reset(add(number) - 1);
    }
  });

  breakminus.addEventListener("click", function() {
    if (!pause) {
      var number = Number(bNumber.innerHTML);
      bNumber.innerHTML = minus(number);
    }
  });

  breakplus.addEventListener("click", function() {
    if (!pause) {
      var number = Number(bNumber.innerHTML);
      bNumber.innerHTML = add(number);
    }
  });

  // We have a button to start and pause the clock, it will visually change when we click the button
  operatedButton.addEventListener("click", function() {
    if (pause) {
      operatedButton.innerHTML = '<i class="fa fa-play"></i>';
      pause = false;
      clearInterval(times)
    } else {
      operatedButton.innerHTML = '<i class="fa fa-pause"></i>';
      pause = true;
      times = setInterval(play, 1000);
    }
  });
}

// this function allows us to run the clock and visually change the webpage during the timer countdown
function play() {
  if (minutes === 0 && seconds === 0) {
    if (!isBreak) {
      isBreak = true;
      minutes = Number(bNumber.innerHTML) - 1;
    } else {
      isBreak = false;
      minutes = Number(sNumber.innerHTML) - 1;
    }
    seconds = 59;
  } else if (seconds === 0) {
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }

  // when we show the data on the screen, depending on the values, we could set it up on the good format
  sessionTime.innerHTML = ((minutes < 10) ? ("0" + minutes) : minutes) + " : " + ((seconds < 10) ? ("0" + seconds) : seconds);
}

// these functions for adding and lowering the break and session time
function add(number) {
  return number + 1;
}

function minus(number) {
  return number - 1;
}

// reset the clock when the changes take place
function reset(number) {
  minutes = number;
  seconds = 60;
}

// run the main function
main();

style.css

body {
  background: #ff4b1f; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #ff4b1f ,   #ff9068); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ff4b1f , #ff9068); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: white;
}

.container {
  margin: 120px 0;  
}

h1 {
  text-align: center;
}

#sessionTime {
  text-align: center;
  font-size: 128px;
  font-weight: bold;
}

#controls {
  text-align: center;
}

#breakControl {
  display: inline-block;  
}

#sessionControl {
  display: inline-block;
}

#operatedButton {
  font-size: 24px;
  margin: 0 50px;
}

#bNumber, #sNumber {
  font-size: 24px;  
}

button {
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 24px;
}

label {
  display: block;
  font-weight: bold;
  font-size: 18px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />