Pomodoro Timer

index.html

<h1>Pomodoro Clock</h1>
<h2 class='status'>Working</h2>
<div class="time">
 <!--  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div> -->
  <div class="console-text">
    <div class="clock-background"></div>
    <div class="content">25</div>
  </div>
</div>
<div class='controls'>
  <button class='btn btn-success start'>Start</button>
  <button class=" btn btn-primary pause">Pause</button>
  <button class=" btn btn-info resume">Resume</button>
  <button class=" btn btn-danger reset">Reset</button>
</div>

<div class="setting">
  <div class='title'>Session</div>
  <button href="#" class='btn btn-danger minus'> - </button>
  <h2>25</h2>
  <button href="#" class='btn btn-success plus'> + </button>
</div>
<div class="break">
  <div class='title'>Break</div>
  <button href="#" class='btn btn-danger break-minus'> - </button>
  <h2>5</h2>
  <button href="#" class='btn btn-success break-plus'> + </button>
  
</div>

Pomodoro Timer.markdown

Pomodoro Timer

25 mins with 5 mins break

A Pen by Alex on CodePen.

License.

script.js

var work_time = parseInt($('.setting h2').text());
var break_time = parseInt($('.break h2').text());
var work_text = "Working";
var break_text = "Break";
var count;
var timeLeft;
var content = $('.content');
var $status = $(".status").text();
var clock_height = $('.clock-background');

var audio = new Audio('http://www.oringz.com/oringz-uploads/55_microsong-3notes-reverb.mp3')
var timer, isStartMode = true,
    isPaused = true;
// timer function
function timing() {
   timer = setInterval(function() {
    var hours = Math.floor(count/3600);
    var mins = Math.floor(count/60) - hours * 60;
    var sec = count  % 60;
    
    if (sec < 10) {
      sec = "0" + sec
    };
    if (hours > 0){
       $('.content').text( hours + ':' + mins + ':' + sec );
     } else {
       $('.content').text(mins + ':' + sec );
     }
     if (count === 0) {   
       audio.play();
       var $status = $('.status').text();// recapture the element 
       if ($status === work_text) {
         $('.status').text(break_text);
         count = work_time * 60;
         $('.console-text').css('background-color','#C11515') ;
         $('.console-text').css('border-color','#C11515') ;
         $('.start').trigger('click');
         
       } else {
          $('.status').text(work_text);
         count = break_time * 60;
         $('.console-text').css('background-color','#075217');
         $('.console-text').css('border-color','#075217');
         $('.start').trigger('click');
        
       }
    }
    
    count --;
     //count the percent of timeLeft
    var percent, x;         
    if ($('.status').text() === work_text) {
        x = (work_time * 60);
       } else {
        x = (break_time * 60);
        
       }
      percent = count / x * 100;
     //update the height
     clock_height.height(percent + "%");
  }, 1000);
}
//hide resume and pause on initial state
$('.resume').hide();
$('.pause').hide();

//Event listener
//start
$('.start').click(function() {
  $('.pause').show();
  $(".minus, .plus").attr("disabled", true); //disable buttons
  $(".break-minus, .break-plus").attr("disabled", true); //disable buttons
  // this will make only 1 timer run at a time
  if (timer){
    clearInterval(timer);
    timer = null;
  }
  //start the timer
  if(isStartMode){
    var $status = $(".status").text();
    if ($status === "Working") {
     count = work_time * 60;
    }
    if ($status === "Break") {
      count = break_time *60;
    }
  }
  timing();// initial the timer
  $(this).hide(); // hide the button
  isStartMode = true;
})
$('.pause').on('click',function() {
   if(timer) {
      clearInterval(timer);
      timer = null;
    }
  $('.pause').hide();
  $('.resume').show();
});
$('.resume').on('click', function() {
  isStartMode = false;
  $('.start').trigger('click');
  $('.pause').show();
  $('.resume').hide();
})

$('.reset').on('click', function() {  
  $(".minus, .plus").attr("disabled", false);
  $(".break-minus, .break-plus").attr("disabled", false);
  isStartMode = true;
  clearInterval(timer);
  $('.status').text(work_text);
  content.text(work_time);
  $('.start').show();
  $('.resume').hide(); 
  $('.pause').hide(); 
  
})

//increment/ decrement session buttons
$('.minus').on ('click', function(){
  if (work_time === 1 ){
    return;
  }
  work_time -=1;
  $('.setting h2').text(work_time);  
  content.text(work_time);
  
});
$('.plus').on ('click', function(){
  work_time += 1;  
  $('.setting h2').text(work_time);
  content.text(work_time);

});
// increment/ decrement for break buttons

$('.break-minus').on ('click', function(){
  if (break_time === 1 ){
    return;
  }
  break_time -=1;
  
  $('.break h2').text(break_time);
});
$('.break-plus').on ('click', function(){
  break_time += 1;
  $('.break h2').text(break_time);
  
});

//check status function 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

body {background-color: #B5E0FF;}
h1, .status {
  text-align: center;
}
.time {
  text-align: center;
  font-size: 35px;
}
.controls{
  text-align: center;
}
.console-text{
  background-color: #075217;
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border: 2px solid #075217;
  border-radius:100%;
  margin-bottom: 20px;
  overflow: hidden;
}
.clock-background {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #540505;
}
.content {
  color: white;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.title {
  font-size:20px;
}
.setting, .break  {
  text-align: center;
  margin-top: 20px;
}

/* buttons */
.setting {
  float: left;
  width: 50%;
}
.btn-success {
  background-color:#0A670A;
}
.btn-danger {
    background-color: #C5140E;
}
.minus, .setting h2, .plus, .break-minus, .break-plus,  .break h2{
  display: inline-block;
  margin: 0 10px;
  
}
.minus, .plus,.break-minus, .break-plus {
  margin-top: -10px;
  padding: 0 12px;
  font-size: 20px;
}
.minus, .break-minus {
  background: red;
}
.minus a {
  display: block;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />