#FreeCodeCamp - Zipline: Build a Pomodoro Clock

#FreeCodeCamp - Zipline: Build a Pomodoro Clock.markdown

#FreeCodeCamp - Zipline: Build a Pomodoro Clock

A Pen by Paulo Leonardo Vieira Rodrigues on CodePen.

License.

index.html

<h1>#FreeCodeCamp - Zipline: Build a Pomodoro Clock</h1>
<main>
  <header>
    <div class="session">
      <div class="breakCtrl">
        <p>break length</p>
        <button id="breakLengthChangeMinus" class="minus">-</button><span id="breakLength" class="time">5</span>
        <button id="breakLengthChangePlus" class="plus">+</button>
      </div>
      <div class="sessionCtrl">
        <p>session length</p>
        <button id="sessionLengthMinus" class="minus">-</button><span id="sessionLength" class="time">25</span>
        <button id="sessionLengthChangePlus" class="plus">+</button>
      </div>
    </div>
  </header>
  <section>
    <div id="sessionTime" class="timer">
      <p id="title" class="title">Session</p>
      <p id="sessionTimeLabel">25:00</p><span style="height: 0px" class="fill"></span>
    </div>
  </section>
</main>

script.js

var sessionMaxTime = 0;
var sessionTime = 0;  
var breakMaxTime = 0;
var breakTime = 0; 
var sessionMaxMinute = 25;
var breakMaxMinute = 5;
var sessionInterval = null;

var secondsToHms = function(d) {
  d = Number(d);
  var h = Math.floor(d / 3600);
  var m = Math.floor(d % 3600 / 60);
  var s = Math.floor(d % 3600 % 60);
  return (h > 0 ? h + ':' + (m < 10 ? '0' : '') : '') + m + ':' + (s < 10 ? '0' : '') + s;
}

var changeBreakInterval = function(value){
  if ((breakMaxMinute + value) < 1){
    return;
  }
  
  breakMaxMinute += value;
  
  startSessionTime();
  
  $("#breakLength").text(breakMaxMinute);
  $("#sessionLength").text(sessionMaxMinute);  
}

var changeSessionInterval = function(value){
  if ((sessionMaxMinute + value) < 1){
    return;
  }
  
  sessionMaxMinute += value;
  
  startSessionTime();
  
  $("#breakLength").text(breakMaxMinute);
  $("#sessionLength").text(sessionMaxMinute);  
}

var startSessionTime = function(){
  clearInterval(sessionInterval);
  sessionMaxTime = sessionMaxMinute*60;
  sessionTime = 0;  
  sessionInterval = setInterval(updateSession, 1000); 
  
  $("#breakLength").text(breakMaxMinute);
  $("#sessionLength").text(sessionMaxMinute);
}

var startBreakTime = function(){
  clearInterval(sessionInterval);
  breakMaxTime = breakMaxMinute*60;
  breakTime = 0; 
  sessionInterval = setInterval(updateBreak, 1000);  
}

var updateSession = function(){
  var endTime = sessionMaxTime - sessionTime;
  var endPercent = Math.abs(sessionTime/sessionMaxTime);
  
  var timerHeight = $(".timer").css("height").replace("px", "");
  var fillTimerHeight = timerHeight * endPercent;
  
  $(".fill").css("background-color","#99CC00");  
  $("#sessionTimeLabel").text(secondsToHms(endTime));
  $(".fill").css("height", fillTimerHeight);
  $("#title").text("Session");
  sessionTime += 1;
  
  if (sessionTime > sessionMaxTime){
    startBreakTime();
  }
}

var updateBreak = function(){
  var endTime = breakMaxTime - breakTime;
  var endPercent = Math.abs(breakTime/breakMaxTime);
  
  var timerHeight = $(".timer").css("height").replace("px", "");
  var fillTimerHeight = timerHeight - timerHeight * endPercent;
  
  $(".fill").css("background-color","red");  
  $("#sessionTimeLabel").text(secondsToHms(endTime));
  $("#title").text("Break");
  $(".fill").css("height", fillTimerHeight);
  breakTime += 1;
  
  if (breakTime > breakMaxTime){
    startSessionTime();
  }
}

$("#breakLengthChangeMinus").click(function(){  
  changeBreakInterval(-1);
});

$("#breakLengthChangePlus").click(function(){  
  changeBreakInterval(+1);
});

$("#sessionLengthMinus").click(function(){  
  changeSessionInterval(-1);
});

$("#sessionLengthChangePlus").click(function(){  
  changeSessionInterval(+1);
});

$("#sessionTime").click(function(){  
  startSessionTime();
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

* {
  margin: 0;
  font-family: Open Sans, Arial;
}

h1 {
  display: block;
  background-color: #333333;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Arial';
  font-size: 30px;
  padding: 20px;
}

html, body, main {
  height: 100%;
  overflow: hidden;
  background-color: #333333;
}

header {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  text-transform: uppercase;
  padding: 20px;
}
header .session {
  font-size: .8em;
  display: flex;
}
header .session .breakCtrl, header .session .sessionCtrl {
  display: inline;
  padding-left: 30px;
  padding-right: 30px;
}
header .session .minus, header .session .plus {
  background-color: #333333;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 2em;
  outline: none;
}
header .session .time {
  font-size: 2.5em;
  padding-left: 10px;
  padding-right: 10px;
}

section {
  background-color: #333333;
  height: 100%;
  color: #fff;
}
section .title {
  text-align: center;
  line-height: 180px;
  font-size: .8em;
}

section .timer {
  margin: 0 auto;
  text-align: center;
  width: 300px;
  height: 300px;
  font-size: 4em;
  border: 2px solid #99CC00;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 20;
  overflow: hidden;
}
section .timer:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  z-index: 2;
  border: 4px solid #333333;
}

section .fill {
  content: '';
  position: absolute;
  background: #99CC00;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -2;
}

styles

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