pomodoroClock

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

Thumbnail
This awesome code was written by divi-The-Great, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright divi-The-Great ©
  • HTML
  • CSS
  • JavaScript
    <audio id='buzzer' src='http://codingtutorials360.com/14244764.mp3' type"audio/mpeg"></audio> 
<div class ="text-center"> 
  <img src="http://bigpocketeducationalworkshops.com.au/wp-content/uploads/2014/11/TomatoSauce-Icon.gif" height="100px" width="100px"></img>
<h1 id="title">Pomdoro Clock</h1>
  <div class = "timeDiv">
    <h1  id = "title1">Session Time</h1>
<a href="#" class ="btn btn-secondary" id="minus5Clock">-</a>
<h2 id="timeType"></h2>
<h2 id ="num">5</h2>
<a href="#" class ="btn btn-secondary" id="add5Clock">+</a>
<a href="#" class= "btn btn-primary" id = "reset">Reset</a>
     </div>
    <div id="breakDIV">
      <h1 id="title2">Break Time</h1>
<a href="#" class ="btn btn-secondary" id="minus5Break">-</a>
<h2 href="#" id="breakNum">5</h2>
<a href="#" class ="btn btn-secondary" id="add5Break">+</a>
    </div>
    <a href="#" class= "btn btn-primary" id = "start">Start</a>
 
</div>

/*Downloaded from https://www.codeseek.co/divi-The-Great/pomodoroclock-jLOZZE */
    body{
  background-color: #ce1818;
  color:white;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}
h2 {
  display:inline;
}
#start, #reset{
  margin:10px;
}
#title {
  font-family: 'Lemonada', cursive;
}
img {
  margin:20px;
}
a {
  font-size: 30px!important;
  color: white;
margin:10px!important;
}


/*Downloaded from https://www.codeseek.co/divi-The-Great/pomodoroclock-jLOZZE */
    //Run jQuery in here
$(document).ready(function(){
  //Stores minutes converted to int
  var count=parseInt($("#num").html());
  //Stores break length converted to minutes
  var breakTime= parseInt($("#breakNum").html());
  //Audio file to play when time is up
  var buzzer = $('#buzzer')[0];
  //Hides Reset button on load
  $("#reset").hide();
  //Starts timer on click
  $("#start").click(function(){
    //Hide Buttons while running countdown
    $("#start").hide();
    $("#minus5Clock").hide();
     $("#add5Clock").hide();
    $("#minus5Break").hide();
     $("#add5Break").hide();
    $("#breakNum").hide();
    $("#title1, #title2").hide();
    //Set the countdown type to session and show it
      $("#timeType").html("Session Time: ");
    $("#timeType").show();
     var counter = setInterval(timer,1000);
    //Convert times to seconds
    count*=60;
    breakTime*=60;
    //Function to countdown session
    function timer(){
    //Decrease seconds session
      count -=1;
    if(count===0){
      //Play sound to let user know session is over
            buzzer.play();
      //End the session timer
      clearInterval(counter);
      //Start the break timer
      var startBreak = setInterval(breakTimer,1000);
      //Hide the session time
      $("#num").hide();
    }
      //Format the time for 0 seconds
      if (count%60===0){
        $("#num").html(Math.floor(count/60)+":" + "00");
      }
      //Format the time where seconds is less between 1-9
      else if (count%60<10){
        $("#num").html(Math.floor(count/60)+":" + "0" + count%60);
      }
      //Formats time for 10-59 seconds
      else{
        $("#num").html(Math.floor(count/60)+":" + count%60);
      }
    //Logic for break timer
        function breakTimer(){
          //Sets the time heading to break
           $("#timeType").html("Break Time: ");
          //Show the break time
          $("#breakNum").show();
          //Decrement break time seconds
      breakTime-=1;
      if (breakTime===0){
        clearInterval(startBreak);
           $("#reset").show();
         buzzer.play();
      }
          if (breakTime%60===0){
        $("#breakNum").html(Math.floor(breakTime/60)+":" + "00");
      }
      else if (breakTime%60<10){
        $("#breakNum").html(Math.floor(breakTime/60)+":" + "0" + breakTime%60);
      }
      else{
        $("#breakNum").html(Math.floor(breakTime/60)+":" + breakTime%60);
      }
          
         
    }
  }
  
    
  });
  $("#reset").click(function(){
      count =25;
    breakTime=25;
    $("#num").html(count);
    $("#breakNum").html(breakTime);
   $("#start").show();
    $("#minus5Clock").show();
     $("#add5Clock").show();
    $("#minus5Break").show();
     $("#add5Break").show();
    $("#breakNum").show();
      $("#timeType").html("Session Time: ");
    $("#timeType").hide();
  
   
    $("#num").show();
    $("#title1, #title2").show();
    $("#reset").hide();
  });
  
  
  
  
  
$("#minus5Clock").click(function(){
  if(count>5){
    count=count-5;
  $("#num").html(count);
  } 
});
  $("#add5Clock").click(function(){
    count=count+5;
  $("#num").html(count);
});
  $("#minus5Break").click(function(){
  if(breakTime>5){
    breakTime=breakTime-5;
  $("#breakNum").html(breakTime);
  } 
});
  $("#add5Break").click(function(){
    breakTime=breakTime+5;
  $("#breakNum").html(breakTime);
});
  
});

Comments