Pomodoro Clock

index.html

        <div class="container-fluid">
          <div class="logo text-center">Pomodoro Clock</div>
            <div class="row" style="margin-top:40px">
                <div class="col-xs-4"></div>
                <div class="col-xs-2 options text-center">
                    Session
                    <span class="session"><br/>
                        <span class="fa fa-minus sm"></span> 
                            <span class="session-data"> 25 </span>
                        <span class="fa fa-plus sp"></span>
                    </span>
                </div>
                <div class="col-xs-2 options text-center">
                    Break
                    <span class="break"><br/>
                        <span class="fa fa-minus bm"></span>
                            <span class="break-data"> 5 </span>
                        <span class="fa fa-plus bp"></span>
                    </span>
                </div>
                <div class="col-xs-4"></div>
            </div>
            
            <div class="row" style="margin-top:40px">
                <div class="container">
                <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                        <div class="clock"></div>  
                    </div>
                <div class="col-lg-3"></div>
                    </div>
            </div>
            
            <div class="text-center" style="margin-top:50px">
                <h1 class="session-text">Work Time!!!</h1>
                <h1 class="break-text">Break Time!!!</h1>
                <div class="btn-group">
                <button class="btn btn-primary start tip" title="Click to start timer" data-placement="right">Start</button>
                <button class="btn btn-primary stop tip disabled" title="Click to stop and reset timer" data-placement="right">Stop &amp; Reset</button>
                </div>
            </div>
        </div>

pJMevg.markdown

pJMevg

A Pen by Adegbuyi Ademola Oluwamayowa on CodePen.

License.

script.js

(function () {
  var alarm = new Audio("https://www.freesound.org/data/previews/250/250629_4486188-lq.ogg");
  $(".tip").hover(function(){
    $(this).tooltip('show'); 
  });
  
  $(".sm").click(function(){
     var data = $('.session-data').text();
        if(data > 0){
            $('.session-data').text(Number(data)-1);
        }
  }); 
    
  $(".sp").click(function(){
     var data = $('.session-data').text();
     $('.session-data').text(Number(data)+1);
  });  
    
  $(".bm").click(function(){
     var data = $('.break-data').text();
        if(data > 0){
            $('.break-data').text(Number(data)-1);
        }
  }); 
    
  $(".bp").click(function(){
     var data = $('.break-data').text();
     $('.break-data').text(Number(data)+1);
  });

  var sessiontime;
  var breaktime;
  var clock = $('.clock').FlipClock({
    countdown : true,
    autoStart : false,
    callbacks :{
                  interval: function() {
                    if(clock.getTime().time === 0 && sessiontime){
                        clock.setTime(Number(sessiontime)*60);
                        sessiontime = 0;
                        alarm.play();
                        $(".break-text").hide();
                        $(".session-text").fadeIn();
                        breaktime = $('.break-data').text();                     
                    }
                    if(clock.getTime().time === 0 && breaktime){
                        clock.setTime(Number(breaktime)*60);
                        breaktime = 0;
                        alarm.play();
                        $(".session-text").hide();
                        $(".break-text").fadeIn();
                        sessiontime = $('.session-data').text();
                    }
                }
    }
  });
    
    $('.start').click(function(){
      $(".break-text").fadeOut();
      $(".session-text").fadeIn();
      $(this).addClass("disabled");
      $(".stop").removeClass("disabled");
      clock.setTime(Number($('.session-data').text())*60);
      breaktime = $('.break-data').text();
      clock.start();
    });
    
    $('.stop').click(function(){
      $(".break-text").fadeOut();
      $(".session-text").fadeOut();
      $(this).addClass("disabled");
      $(".start").removeClass("disabled");
      clock.reset();
    });
})();

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>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.min.js"></script>

style.css

body{
    background-color: #f44336;
    font-family: 'Ubuntu', cursive; 
    color: #fff;
}
.logo{
    font-family: 'Indie Flower', cursive;  
    font-size: 60px;
    font-weight: bold;
}
.options{
    font-size: 20px;
    font-weight: bold;
}
.popover-title,.popover-content{
    color: #f44336;
    background-color:inherit;
    font-weight: bold;
}
.sm,.sp,.bm,.bp{
    cursor: pointer;
}
.session-text,.break-text{
    display: none;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css" rel="stylesheet" />