Pomodoro Clock

In this example below you will see how to do a Pomodoro Clock with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Pomodoro Clock</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<body>

<h2 id="title" class="text-center">Pomodoro Clock</h2>

<div id="buttons" style="margin-top:-25px" class="row container">

<div id="sessionlength" class="text-center container"><h1>Session Length</h1>
<div class="row" id="tlength">
  
<div id="minusTime" class="btn">-</div>
 
<div id ="timeLength">25</div>

<div id="plusTime" class="btn">+</div>

</div>

</div>


<div id="restlength2" class="text-center container"><h1 class="text-center">Rest Length</h1>
<div class="row" id="rlength">
  
<div id="minusRestTime" class="btn">-</div>
  
  
<div id ="restLength">5</div>
  
  
<div id="plusRestTime" class="btn">+</div>

</div>
</div>

</div>

<button class="center-block btn btn-secondary" id="reset">Reset</button>

<div id="clock" class="btn center-block">

</div>



</body>

<p class="text-center">Written and coded by Steven Bamford.</p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/sbamford/pomodoro-clock-aBbgVX */
#bg{
  width:450px;
  min-width:450px;
  margin-top:100px;
  padding-top:25px;
  padding-bottom:25px;
  background-color:white;
  border: 2px solid #BDBDBD;
  border-radius:2px;
}


#clock{
  background-color:white;
  font-family: 'Montserrat', sans-serif;
  color:#BDBDBD;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:25px;
  margin-bottom:25px;
  width: 300px;
	height: 300px;
  -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
  font-size:3em;
  border: 5px solid #BDBDBD;
 }

#sessionlength{
  color:#4CAF50;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  margin-top:25px;
  width:160px;
  
}

#restlength2{
  color:#2196F3;
  flex-direction:column;
  margin-top:25px;
  display:flex;
  justify-content:space-around;
  align-items:center;
 
  width:160px;

}

#plusTime{
  font-size:2em;
  height:50px;
  width:40px;
}

#minusTime{
   font-size:2em;
   height:50px;
   width:40px;
}

#timeLength{display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:50px;
  font-size:2em;
  
}

#tlength{
  width:120px;
  min-width:120px;
  height:50px;
  display:flex;
  margin-top:-15px;
}

#rlength{
  display:flex;
  width:120px;
  min-width:120px;
  margin-top:-15px;
 
}
 
#minusRestTime{
  font-size:2em;
   height:50px;
  width:40px;
}

#plusRestTime{
  font-size:2em;
  
  height:50px;
  width:40px;
}

#restLength{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:50px;
  font-size:2em;
}

h1{font-size:1em;
}

#buttons{
  display:flex;
  width:320px;
  margin:auto;
  font-family: 'Montserrat', sans-serif;
}

#pause{
  
  position:absolute;
}

#title{
  margin-top:50px;
  font-size:3em;
  font-family: 'Montserrat', sans-serif;
  color:#B44E86;
}




p{margin-top:10px;
  margin-bottom:50px;
  font-family: 'Montserrat', sans-serif;
  color:#B44E86;
}
  

#reset:hover {
  background-color:#B44E86;
  color:white;
}

#clock:hover{
  background-color:#B44E86;
  color:white;
}

.btn-secondary{
  background-color:white;
  border: 1px solid #B44E86;
  font-family: 'Montserrat', sans-serif;
  color:grey;
  margin-top:10px;
}

/*Downloaded from https://www.codeseek.co/sbamford/pomodoro-clock-aBbgVX */
var moreTime = 60*25;
var restTime =60*5;
var time = moreTime;
var minutes = parseInt(time/60);
var seconds = parseInt(time%60);
if(seconds < 10){
      seconds = "0" + seconds;
    }

var running = false;
var restrunning = false;
$("#clock").html("Session" + "<br />" + minutes + ":" + seconds);



$("#clock").on("click", function(){
  

if(running === false){
running = true;
function timer (){
  if(time !== 0){
    
    time--;
    minutes = parseInt(time/60);
    seconds = parseInt(time%60);
    
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    $("#clock").html("Session" + "<br />" + minutes + ":" + seconds);
 $("#clock").animate({backgroundColor:'#4CAF50'});
 $("#clock").animate({color:"#FFFFFF"});
}  

  else if(time === 0){
    function restTimer(){
      if(restTime !== 0){
          restrunning = true;
    $("#clock").animate({backgroundColor:'#2196F3'});
    $("#clock").animate({color:"#FFFFFF"});
    restTime--;
    minutes = parseInt(restTime/60);
    seconds = parseInt(restTime%60);
    
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    $("#clock").html("Rest" + "<br />" +minutes + ":" + seconds);
  }
      else if(restTime === 0){
      $("#clock").animate({backgroundColor: 'white', color:'#BDBDBD'});
      $("#clock").html("Well done!");
      
        
        }
        
      
    };
    
     restTimer();
    }
    
   

   
  };  
  
  
 

startTimer = setInterval(timer, 1000); 
setTimeout(startTimer, 2000);

}
  
else if(running === true){
  
  window.clearInterval(startTimer);
  running = false;

  }   
 

 });


$("#plusTime").on("click", function(){
  if(running === false && restrunning === false){
  moreTime += 60;
  moreMins = moreTime/60;
  time = moreTime;
  minutes = parseInt(time/60);
  seconds = parseInt(time%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }
$("#clock").html("Session" + "<br />" + minutes + ":" + seconds);
  
  
  
  $("#timeLength").html(moreMins);
  }
  
  else if(running === false && restrunning === true){
   moreTime += 60;
   moreMins = moreTime/60;
   time = moreTime;
   minutes = parseInt(time/60);
   seconds = parseInt(time%60);
    if(seconds < 10){
      seconds = "0" + seconds; 
  }
    $("#clock").html("Session" + "<br />" + minutes + ":" + seconds);
    $("#timeLength").html(moreMins);
}
});
  
$("#minusTime").on("click", function(){
  if(running === false  && restrunning === false){ 
  if (moreTime >60){
  moreTime -= 60;
  moreMins = moreTime/60;
  time = moreTime;
  minutes = parseInt(time/60);
  seconds = parseInt(time%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }  
  $("#timeLength").html(moreMins);
   
  $("#clock").html("Session" + "<br />" + minutes + ":" + seconds);
  }
  }  
  
else if(running === false && restrunning === true){
    if (moreTime >60){
  moreTime -= 60;
  moreMins = moreTime/60;
  time = moreTime;
  minutes = parseInt(time/60);
  seconds = parseInt(time%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }  
  $("#timeLength").html(moreMins);
   
  $("#clock").html("Session" + "<br />" + minutes + ":" + seconds);
  }
  
  
  
}

});

var restl = parseInt($("#restLength").text())*60;


$("#minusRestTime").on("click", function(){
  console.log(restl);
  if(running === false && restrunning === false){
    if(restTime >60){
    restl = restl -=60; 
    restTime = restl;
    restMins = restTime/60;
    
    minutes = parseInt(restTime/60);
    seconds = parseInt(restTime%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }  
    
    $("#restLength").html(minutes);
    
    
  }
  }
  
  else if (running === false && restrunning === true){
    if(restTime >60){
    restl = restl -=60; 
    restTime = restl;
    restMins = restTime/60;
    minutes = parseInt(restTime/60);
    seconds = parseInt(restTime%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }  
    $("#restLength").html(minutes);
    
  }
  }
});

$("#plusRestTime").on("click", function(){
  
 if(running === false && restrunning === false){
    restl =restl += 60;
    restTime = restl;
    restMins = restTime/60;
    
    minutes = parseInt(restTime/60);
    seconds = parseInt(restTime%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }  
    
    $("#restLength").html(minutes);
    
 
 
  
  }
  
 else if (running === false && restrunning === true){
    if(restTime >60){
    restTime =restl;   
    restTime += 60;
    restMins = restTime/60;
    
    minutes = parseInt(restTime/60);
    seconds = parseInt(restTime%60);
    if(seconds < 10){
      seconds = "0" + seconds;
    }  
    $("#restLength").html(minutes);
    
    }
    
    
  }
});

var count = 0;




$("#reset").on("click", function(){
  
 
  
 $("#clock").animate({backgroundColor: 'white', color:'#BDBDBD'});
 window.clearInterval(startTimer);  
 
 restTime = restl;
 time = moreTime;
 minutes = parseInt(time/60);
 seconds = parseInt(time%60);
 if(seconds < 10){
      seconds = "0" + seconds;
    }
  
running = false;  
restrunning = false;

$("#clock").html("Session" + "<br />" + minutes + ":" + seconds);
  
  
});

Comments