Steve's pomodoro timer

In this example below you will see how to do a Steve's pomodoro timer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SRHerzog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SRHerzog ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Steve's pomodoro timer</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="wrapper" class="center-block">
  <div id="toprow">
    <div id="reset-button" class="negative tilted">
      Reset
    </div>
    <div id="controls" class="negative">
    <div id="labels" class="row text-center center-block">
      <div class="control-label col-xs-6">Break time</div>
      <div class="control-label col-xs-6">Session time</div>
    </div>
    <div class="row text-center">
      <div class="center-block control row col-xs-6">
        <div id="minus-break" class="col-xs-4">-</div>
        <div id="break-time" class="col-xs-4">5</div>
        <div id="plus-break" class="col-xs-4">+</div>
      </div>
      <div class="control col-xs-6 row">
        <div id="minus-session" class="col-xs-4">-</div>
        <div id="session-time" class="col-xs-4">25</div>
        <div id="plus-session" class="col-xs-4">+</div>
      </div>
    </div>
  </div> 
  </div>
  <div id="timer-label" class="center-block text-center">Session</div>
  <div id="timer" class="negative center-block text-center">25:00</div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SRHerzog/steveandaposs-pomodoro-timer-VjbgKB */
body {
  background-color:#611;
  color:#FFF;
}
#labels {
  margin-left:-15px;
}
.col-xs-6 {
}
#wrapper {
  position:relative;
  width:320px;
  top:120px;
}
#controls {
  border-radius:10px;
  height:50px;
  transition:transform .8s;
}
.control {
  font-size:150%;
}
#timer {
  position:relative;
  top:15px;
  padding-top:10px;
  height:150px;
  font-size:600%;
  border-radius:80px;
}
#timer:active {
  color:#FFF;
  background-color:#611;
}
#timer-label{
  height:40px;
  text-height:30px;
  font-size:150%;
  padding-top:10px;
  padding-bottom:10px;
}
.tilted {
  transform:rotateX(90deg);
  z-index:-1;
}
#reset-button {
  position:absolute;
  width:150px;
  left:85px;
  font-size:200%;
  text-align:center;
  border-radius:10px;
  transition:transform .8s;
}
.negative {
  background-color:#FFF;
  color:#611;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}


/*Downloaded from https://www.codeseek.co/SRHerzog/steveandaposs-pomodoro-timer-VjbgKB */
var sessionTime=1500;
var breakTime=300;
var activeTimer=["Session",sessionTime];
var running=false;
var countdown;
function displayTime(time){
  var hours="";
  var minutes="";
  var seconds="";
  if (time/3600>=1){
    hours=Math.floor(time/3600) + ":";
    minutes=time%3600;
  }
  else {
    hours="";
    minutes=time;
  }
  console.log(time,minutes);
  if (minutes/60<10) minutes="0" + Math.floor(minutes/60) + ":";
  else minutes="" + Math.floor(minutes/60) + ":";
  if (time%60<10) seconds="0" + time%60;
  else seconds="" + time%60;
  return hours + minutes + seconds;
  console.log(hours + minutes + seconds);
}
function toggleTimer() {
  if (running){
    running=false;
    clearInterval(countdown);
  }
  else {
    running=true;
    if (activeTimer[1]===sessionTime){
      $("#controls").addClass("tilted");
      $("#reset-button").removeClass("tilted");
    }
    countdown=setInterval(count, 1000);
  }
}
function count() {
  activeTimer[1]--;
  console.log(activeTimer[1]);
  $("#timer").text(displayTime(activeTimer[1]));
  if (activeTimer[1]<1){
    if (activeTimer[0]==="Session"){
      activeTimer[1]=breakTime;
      activeTimer[0]="Break!";
      }
    else reset();
    $("#timer-label").text(activeTimer[0]);
  }
}
function reset(){
  activeTimer[1]=sessionTime;
  $("#timer").text(displayTime(activeTimer[1]));
  activeTimer[0]="Session";
  clearInterval(countdown);
  $("#reset-button").addClass("tilted");
  $("#controls").removeClass("tilted");
  running=false;
}
$("#reset-button").on("click",reset);
$("#timer").on("click",toggleTimer);
$("#minus-break").on("click",function(){
  if (breakTime>60){
    breakTime-=60;
    $("#break-time").text(breakTime/60);
  }
});
$("#plus-break").on("click",function(){
  if (breakTime<=3600){
    breakTime+=60;
    $("#break-time").text(breakTime/60);
  }
});
$("#minus-session").on("click",function(){
  if (sessionTime>60){
    sessionTime-=60;
    $("#session-time").text(sessionTime/60);
    activeTimer[1]=sessionTime;
    $("#timer").text(displayTime(activeTimer[1]));
  }
});
$("#plus-session").on("click",function(){
  if (sessionTime<=14400){
    sessionTime+=60;
    $("#session-time").text(sessionTime/60);
    activeTimer[1]=sessionTime;
    $("#timer").text(displayTime(activeTimer[1]));
  }
});

Comments