Demo: Pomodoro Clock

HTML Code:

<body>
  <div class="header">
  <h1>Pomodoro Timer</h1>
  <h2>A Free Code Camp Student Project</h2>
  </div>  
  <div class=container>
  <div class=controls>
    <div class="breakControl">
    <div class="breakUp btn btn-primary">&#8679</div>
    <div class="breakTime">5</div>
    <div class="breakDown btn btn-primary">&#8681</div>
    </div>
    <div class="sessionControl">
    <div class="sessionUp btn btn-primary">&#8679</div>
    <div class="sessionTime">5</div>
    <div class="sessionDown btn btn-primary">&#8681</div>
    </div>
 </div>  
   </div> 
  <div class="clock">
    <div class="clockDisplay btn">Timer</div>
  </div>  
    <h3 class="intervalType">Select Break and Session Intervals - Click On Timer to Start</h3>
  
</body>

CSS Code:

body{
  text-align: center;
  font-weight: bold;
  font-family:"Garamond";
  background-image: url(http://wallup.net/wp-content/uploads/2016/01/167565-abstract-dark-black_background-digital_art-artwork.png);
  background-size: 100%;
}

.header{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
    color:white;
}
.controls{  
  z-index: 2;
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  width: 300px;
  padding-bottom:20px;
  top: 40px;
  color: white;  
}

.sessionControl{
  cursor:pointer;
  float:right;
  padding-top: 5px;  
}

.breakControl{
  cursor:pointer;
  float:left;
  padding-top: 5px;
}

.breakUp{
  box-shadow: inset -1px -6px 12px 1px blue;
}
.breakDown{
  box-shadow: inset -1px -6px 12px 1px blue;
}

.sessionUp{
  box-shadow: inset -1px -6px 12px 1px blue;
}
.sessionDown{
  box-shadow: inset -1px -6px 12px 1px blue;
}

.sessionLabel{
  padding-top: 5px;
}

.breakLabel{
  padding-top: 5px;
}

.clock{
    margin: auto;
   position:relative;
   bottom:20px;
  top: 20px;
//  z-index: 1;
  width: 370px;
  height: 150px;
  background: #99a3d8;
  box-shadow: 1px 1px 20px 5px #b1b6ce, inset -1px -6px 12px 1px #ced3ef;
  border-radius: 150px;
  padding-top: 40px;
}

.clockDisplay{
  cursor:pointer;
  width: 200px;
  height: 70px;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  background: yellow;
  color: black;
  box-shadow: inset -1px -1px 6px 1px yellow;
}

.intervalType{
  font-size: 18px;
  font-weight: bold;
  color: white;
  padding-top: 40px;
}

JavaScript Code:

$(document).ready(function() {

var buzzer = new Audio('http://dragoncoin.com/piano/bellsound.mp3');
  
$clockDisplay=$(".clockDisplay"); 
$controls=$(".controls");  
$breakUp=$(".breakUp");
$breakDown=$(".breakDown"); 
$breakTime=$(".breakTime");
$sessionUp=$(".sessionUp"); 
$sessionDown=$(".sessionDown"); 
$sessionTime=$(".sessionTime");
$intervalType=$(".intervalType");
$header=$(".header");  
  
  var flag=false;
  var breakTime=parseInt($breakTime.html());
  var sessionTime=parseInt($sessionTime.html()); 
  var clockDisplay=parseInt($clockDisplay.html()); 
  var count, breakCount;
  var counter, counter2;

// Start the count-down when the clock is clicked  
  $clockDisplay.click (function(){
    if (flag==false){
      count=sessionTime*60;
      startTimer();
    } else {
//      breakCount=breakTime;
      stopTimer();
    }
  })
  
  function startTimer(){
    buzzer.play();
    $header.hide();
    $intervalType.html("Session in Progress...");
      $clockDisplay.css("background",'green');
//      buzzer.play();
      flag=true;
      $controls.hide();
    counter=setInterval(timer,1000);
    function timer(){
      count-=1;
      if (count==0){
        clearInterval(counter);
        breakCount=breakTime*60;
        breakTimer();
      }
//      $clockDisplay.html(count);
      updateDisplay(count);
    } 
  }
  
  function stopTimer(){
    buzzer.play();
    count=sessionTime;
    breakCount=breakTime;
    $intervalType.html("");
    $clockDisplay.css("background",'yellow');
    updateDisplay(sessionTime*60);    
    $controls.show();
//    $header.show();
    clearInterval(counter);
    clearInterval(counter2);
    flag=false;
  }
  
  function breakTimer(){
    buzzer.play();
    $intervalType.html("Break Time In Progress...");
    $clockDisplay.css("background",'yellow');
    counter2=setInterval(timer,1000);
    function timer(){
      breakCount-=1;
      if (breakCount==0){
        clearInterval(counter2);
        count=sessionTime*60;
        startTimer();
      }
      updateDisplay(breakCount);
    }
  }
  
// Controls for Session Length
$sessionDown.click(function() {
  if (+$sessionTime.text() > 5) {
    clockDisplay=sessionTime-=5;
    count=sessionTime*60;
    $sessionTime.text(sessionTime);
    $clockDisplay.html("Sessions");
//    $clockDisplay.text(clockDisplay);
  }
});

$sessionUp.click(function() {
  sessionTime+=5;
  count=sessionTime*60;
  $sessionTime.text(sessionTime);
  $clockDisplay.html("Sessions");
//  $clockDisplay.text(clockDisplay);
});
  
  // Controls for Break Length
$breakDown.click(function() {
  if (+$breakTime.text() > 5) {
    breakTime-=5;
    breakCount=breakTime*60;
    $breakTime.html(breakTime);
    $clockDisplay.html("Breaks");
  }
});

$breakUp.click(function() {
  breakTime+=5;
  breakCount=breakTime*60;
  $breakTime.html(breakTime);
  $clockDisplay.html("Breaks");
});

// This function displays a formatted time value on screen
function updateDisplay(t) {
  var hours = Math.floor(t / 3600);
  t -= hours * 3600;
  var minutes = Math.floor(t / 60);
  t -= minutes * 60;
  var seconds = Math.floor(t);
  var clock = formatDigit(hours) + ':' + formatDigit(minutes) + ':' + formatDigit(seconds);
  $clockDisplay.html(clock);
//  console.log(clock);
}  

// format the time to always show two digits
function formatDigit(x){
  return ("0" + x).slice(-2);
}  
  
}) // Ends document.ready.function
Categories: