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 BrianBrain, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright BrianBrain ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Pomodoro Clock</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="pomodoroClock">
    <h1>Pomodoro Clock</h1>
 <div id = "container">
 
   <div id = "timer">
     <div id = "time">
       <span id = "minutes">25</span>
       <span id = "colon">:</span>
       <span id = "seconds">00</span>
       
     </div>
       <div id="filler"></div><!-- maybe make this a span id -->
     </div>
     
     <div id = "buttons">
       
       <span id = "workId"><button id = "work">Work</button></span>
        <span id = "workId"><button id = "workMinus">Work -</button>             </span>
        <span id = "workId"><button id = "workPlus">Work +</button>               </span>
       
        <span id = "breakId"><button id = "break">Break</button></span>
        <span id = "breakId"><button id = "breakMinus">Break - </button>
       <span id = "breakId"><button id = "breakPlus">Break + </button>          </span>
       </span>
       <button id="pause">Pause</button>
       <button id="reset">Reset</button>
   </div>
     
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/BrianBrain/pomodoro-clock-GrPJVY */
h1{
  text-align:center;
}
#container{
  
  border: 1px solid #333;
  border-radius: 20px;
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  background: #333;
  
}

#timer{
 
  color: #f00;
  font-size: 50px;
  margin: 10px auto;
  border: 5px solid red;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  positon: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:default;
  
}

#time{
 margin-top: 70px;
 z-index: 1;
 position: relative;
  
}

#filler{
  
  background: #ddffcc;
  height: 0px;
  width: 200px;
  position:absolute;
  bottom: 0;
  
}

#buttons button {
  
  background: #4da6ff;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 5px;
  width: 90px;
  margin: 10px auto;
  font-size: 14px;
  height: 50px;
  border-radius: 50px;
  
}

#breakId{
  color:#fff;
}


#buttons button#work{
  
  background-color:#0039e6;
}
#buttons button#workPlus{
  
  background-color:#b380ff;
}
#buttons button#workMinus{
  
  background-color:#b380ff;
}

#buttons button#break{
  
  background-color: #0c0;

}

#buttons button#pause{
  
  background-color: #cc3300;

}

#buttons button#reset{
  
  background-color: #7300e6;

}

/*Downloaded from https://www.codeseek.co/BrianBrain/pomodoro-clock-GrPJVY */
var pomodoroClock = {
    started: false,
    minutes: 0,
    seconds: 0,
    fillerHeight: 0,
    fillerIncrement: 0,
    interval: null,
    minutesDom: null,
    secondsDom: null,
    fillerDom: null,
    init: function(){

      var self = this;
      this.minutesDom = $('#minutes');//this effects the minutes id
      this.secondsDom = $('#seconds');
      this.fillerDom = $('#filler');
      this.interval = setInterval(function(){
        self.intervalCallback.apply(self);
      }, 1000);  
      
      $('#work').click(function(){
        
         self.startWork.apply(self); //here the minutes are initiated at 25   

      });
      
      /* $('#workMinus').click(function() {  
       //  self.workMinus.apply(self);  //apply to the ids in the DOM for self
         $('#minutes').html)(workMinus() );
         //this.minutes = this.minutes - 1;
         //this.minutes:0;         
      });*/
        $('#workMinus').click(function(mins) {
         /*this.minutes = mins;
         mins++;*/
         $('#minutes').html(mins);
          
      });

     /*   $('#break').click(function() ){
          self.startBreak.apply(self);            
      });
         $('#pause').click(function() ){
          self.startPause.apply(self);            
      });
        $('#reset').click(function() ){
          self.startReset.apply(self);            
      });*/
   },
  resetVariables : function(mins, secs, started){
    this.minutes = mins;
    this.seconds = secs;
    this.started  = started;
    this.fillerIncrement = 200/(this.minutes*60);
    this.fillerHeight=0;
  },
    
    startWork: function() {
      this.resetVariables(25, 0, true);
    },
  
  /* workMinus: function(mins) {
      
      this.minutes = mins;
      mins = mins - 1;
      
    //this.minutes = mins;
   // mins = mins - 1;
      //$('#minutes').html("I am number one"); 
  },*/
  
/*  test: function(){
    $('#minutes').html("this is a test");
  },*/
  
    toDoubleDigit: function(num){
      if(num <10){
        return "0" + parseInt(num,10);
      }
      return num;
    },
    updateDom : function(){
      this.minutesDom.text(this.toDoubleDigit(this.minutes));
      this.secondsDom.text(this.toDoubleDigit(this.seconds));
      this.fillerHeight = this.fillerHeight + this.fillerIncrement;
      this.fillerDom.css('height', this.fillerHeight + 'px');
    },
    intervalCallback : function(){
      if(!this.started) return false;
      if(this.seconds == 0){
        if(this.minutes == 0){
          this.timerComplete();
          return
        }
        this.seconds = 59;
        this.minutes--;
      } else {
        this.seconds--;
      }
      this.updateDom();
      },
      
   timerComplete : function(){
      this.started = false;
      this.fillerHeight = 0;
    }
};

/* $('#workMinus').click(function(mins) {  
        // self.workMinus.apply(self);  //apply to the ids in the DOM for self
         //this.minutes = this.minutes - 1;
         //this.minutes:0; 
   this.minutes = mins;
   workMinus(mins);
          
      });
function workMinus(mins){
  this.minutes = mins;
  mins --;
}*/
   
$(document).ready(function(){
  pomodoroClock.init();
});

Comments