Pomodoro Clock

Tutorials of (Pomodoro clock) by Steven bamford

<!DOCTYPE html>
<html >
<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/ */
#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/ */
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);
  
  
});

This awesome code ( Pomodoro Clock ) is write by Steven Bamford, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Steven Bamford