Pomodoro Clock

index.html

<i class="tag fa fa-volume-up fa-2x"></i>
<i class="tag fa fa-volume-off fa-2x" style="display:none"></i>
<div class="clock">-- : --</div>
<div class="info"></div>
<div class="buttons">
  <div class="tog btn  btns" style="display:none" id="pause">Pause</div>
  <div class="tog btn btns" id="start">Start</div>
</div>
<div class="tog2">
  <div class="col-xs-6 work">
    <div id="minW" class="number">25</div>
    <div id="addW" class="btn btn-primary">+1</div>
    <div id="subW" class="btn btn-primary">-1</div>
    <div class="info2">Work</div>
  </div>
  <div class="col-xs-6 fun">
    <div id="minF" class="number">5</div>
    <div id="addF" class="btn btn-warning">+1</div>
    <div id="subF" class="btn btn-warning">-1</div>
    <div class="info2">Relax</div>
  </div>
</div>
<div class="container hello" style="display: none">
  <div id="stop" class="btn btn-danger btns">Stop</div>
</div>

Pomodoro Clock.markdown

Pomodoro Clock

The pomodoro clock is a time management tecnique that uses a timer to separate your work time in smaller intervals with pauses in between to boost your mental agility. This pomodoro has a sound effect on so you know when your work/relax time is over!

A Pen by Francesco Agnoletto on CodePen.

License.

script.js

$(document).ready(function() {
  var audio = new Audio("http://www.universal-soundbank.com/802a/805020000000000000000000000pkjn800000000000000000000000000000090/g/85055050505050505050505/k/4202.MP3");
  audio.volume=0.5;
  var workSeconds = 1500;
  var funSeconds = 300;
  var switcher = true;

  var Clock = {
    totalSeconds: 0,
    changeW: function(){
      var min = Math.floor(workSeconds / 60 % 60);      
      return min;
    },
    changeF: function(){
      var min = Math.floor(funSeconds / 60 % 60);      
      return min;
    },    
    start: function() {      
      var self = this;
      if(self.totalSeconds === 0){
          self.totalSeconds = workSeconds;
        }
      this.interval = setInterval(function() {        
        if (self.totalSeconds > 0) {
          self.totalSeconds -= 1;
        } else {
          audio.play();
          if (switcher===true) {
            $("body").css("background","#9b59b6");
            $(".info").text("Relax..");
            self.totalSeconds = funSeconds;
            switcher = false;
          } else {
            $("body").css("background","#3498db");
            $(".info").text("Work!");
            self.totalSeconds = workSeconds;
            switcher = true;
          }
        }
        var sec = (self.totalSeconds % 60);
        var min = Math.floor(self.totalSeconds / 60 % 60);

        if (sec < 10) {
          sec = "0" + sec;
        }
        if (min < 10) {
          min = "0" + min;
        }
        $(".clock").text(min + " : " + sec);
      }, 1000);
    },

    pause: function() {
      clearInterval(this.interval);
      delete this.interval;
    },
    resume: function() {
      if (!this.interval) {
        this.start();
      }
    }
  };
  $('#pause').click(function() {
    Clock.pause();
    $("#pause").hide();
    $("#start").show();
  });
  $('#start').click(function() {
    if(Clock.totalSeconds === 0){
      $("body").css("background","#3498db");
      $(".info").text("Work!");
    }
    Clock.resume();
    $(".tog").toggle();
    $("#start").text("Resume");
    $(".tog2").css("display", "none");
    $(".hello").css("display","block");
  });
  $('#addW').click(function() {
    workSeconds += 60;
    $("#minW").text(Clock.changeW);
  });
  $('#subW').click(function() {
    if (workSeconds > 60) {
      workSeconds -= 60;
    }
    $("#minW").text(Clock.changeW);
  });
  $('#addF').click(function() {
    funSeconds += 60;
    $("#minF").text(Clock.changeF);
  });
  $('#subF').click(function() {
    if (funSeconds > 60) {
      funSeconds -= 60;
    }
    $("#minF").text(Clock.changeF);
  });
  $("#stop").click(function(){
    Clock.pause();
    $(".clock").text("-- : --");
    $(".hello").css("display","none");
    $(".tog2").css("display", "block");
    if($("#start").css('display') == 'none'){
      $(".tog").toggle();
    }
    $("#start").text("Start");
    workSeconds = $("#minW").text() * 60;
    funSeconds = $("#minF").text() * 60;
    Clock.totalSeconds = 0;
    $("body").css("background","#2ecc71");
    $(".info").text("");
  });
  $(".tag").click(function(){
    $(".tag").toggle();
  });
  $(".fa-volume-up").click(function(){
    audio.muted = true;
  });
  $(".fa-volume-off").click(function(){
    audio.muted = false;
  });
});

scripts

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

style.css

body{
  background: #2ecc71;
  font-family: 'Montserrat', sans-serif;
  color:#ecf0f1;
  text-align:center;
}
i{
  position:relative;
  left:75px;
  float:left;
  opacity:0.8;
  cursor:pointer;
}
.clock{
  display:block;
  margin: 50px auto 0;
  width:350px;
  font-size:6em;
}
.buttons{
  margin:auto;
}
.btns{
  padding:8px 14px;
  border-radius:8px;
  font-size:36px;
  margin-top:20px;
}
.btns:hover{
  color:#ecf0f1;
}
#start{  
  background:rgba(22, 160, 133,0.8);
}
#start:hover{
  background:rgba(22, 160, 133,1.0);
}
#pause{
  background:rgba(241, 196, 15,0.9);
}
#pause:hover{
  background:rgba(241, 196, 15,1.0);
}
.number{
  font-size:36px;
}
.info2{
  padding-top:10px;
  font-size:32px;
}
.tog2{
  margin-top:40px;
}
.info{
  font-size:32px;
  height:45px;
  font-style:italic;
  margin-bottom:20px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />