Pomodoro Timer

JavascriptPomodoroTimer.markdown

Pomodoro timer

Timer options: start, pause, reset; change Session and Break duration values on the go.

A Pen by V on CodePen.

License.

qOwLXR: index.html

<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss|3d-float' rel='stylesheet' type='text/css'>
<div class="container-fluid nopadding">
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#pomodorotimer"><span class="glyphicon glyphicon-time" ></span> POMODORO TIMER</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/673c585699d89431331b" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <a name="pomodorotimer"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-md-12">
        <h2 class="font-effect-emboss">Pomodoro Timer					</h2>
        <p class="c-btn">
        <a href="#" onclick="setItOff();" class="trigger font-effect-neon">
          <span class="glyphicon glyphicon-time jump" >
            <br> SET IT OFF
          </span>
        </a>
        </p>
        <p id="settings" class="font-effect-emboss">
          Session:
          <a href="#" onclick="decreaseDuration();">
            <span class="glyphicon glyphicon-minus"></span>
          </a>
          <span class="duration">25</span>
          <a href="#" onclick="increaseDuration();">
            <span class="glyphicon glyphicon-plus"></span>
          </a>
          | 
          Break:
          <a href="#" onclick="decreaseBreak();">
            <span class="glyphicon glyphicon-minus"></span>
          </a>
          <span class="break">5</span>
          <a href="#" onclick="increaseBreak();">
            <span class="glyphicon glyphicon-plus"></span>
          </a>
        </p>
        <div class="alrt alert alert-info" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          Parameters <b>Session</b> and <b>Break</b> can be adjusted while the timer is running.<br>Changes will be applied instantly (every second).</div>
        <p id="output" class="font-effect-emboss">
          Timer output
        </p>
        <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
          aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            <span id="current-value">
              Completion info
            </span>
          </div>
        </div>
        <p class="actions">
          <a class="font-effect-neon" href="#" onclick="pause();">
            <span class="glyphicon glyphicon-pause">
              <br>PAUSE
            </span>
          </a>
          <span class="gap"></span>
          <a class="font-effect-neon" href="#" onclick="stopAndReset();">
            <span class="glyphicon glyphicon-remove">
              <br>RESET
            </span>
          </a>
        </p>
        <span class="credits font-effect-emboss">licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

script.js

$(document).ready(function(){
  $(".jump").addClass("animated bounce");
});
function decreaseDuration(){
  var current = $(".duration").html();
  var decreased = current - 1;
  $(".duration").html(decreased);
}
function increaseDuration(){
  var current = $(".duration").html();
  var increased = current - (-1);
  $(".duration").html(increased);
}
function decreaseBreak(){
  var current = $(".break").html();
  var decreased = current - 1;
  $(".break").html(decreased);
}
function increaseBreak(){
  var current = $(".break").html();
  var increased = current - (-1);
  $(".break").html(increased);
}
var sessionDuration = 0;
var sessionBreak = 0;
var sessionTime = 0;
var breakTime = 0;
var minutes = 0;
var seconds = 0;
var repeat;
var bars = document.getElementsByClassName("progress-bar");
var dataLoading = 0;
function setItOff(){
  $(".alrt").css({"display":"block"});
  repeat = setInterval(timer,1000);
  function timer(){
    sessionDuration = $(".duration").html() * 60;
    sessionBreak = $(".break").html() * 60;
    if (breakTime > sessionBreak){
      sessionTime = 0;
    }
    if (sessionTime <= sessionDuration){
      minutes = Math.floor(sessionTime / 60);
      seconds = sessionTime - minutes*60;
      var outputTime = minutes+":"+seconds;
      $("#output").html("Session time: "+outputTime);
      $("#current-value").html(sessionTime+" seconds");
      dataLoading = 100 * sessionTime / sessionDuration;
      bars[0].style.width = '' + dataLoading + '%';
      breakTime = 0;
      sessionTime = sessionTime + 1;
    }else{
      if (breakTime <= sessionBreak){
        minutes = Math.floor(breakTime / 60);
        seconds = breakTime - minutes*60;
        var outputTime = minutes+":"+seconds;
        $("#output").html("Break: "+outputTime);
        $("#current-value").html(sessionBreak - breakTime+" seconds");
        dataLoading = 100 - (100 * breakTime / sessionBreak);
        bars[0].style.width = '' + dataLoading + '%';
      }
      breakTime = breakTime + 1;
    }
  }
}
function pause(){
  clearInterval(repeat);
}
function stopAndReset(){
  clearInterval(repeat);
  $("#output").html("Timer reset by user");
  $(".duration").html("25");
  $(".break").html("5");
  $("#current-value").html("Completion info");
  bars[0].style.width = '0%';
  sessionDuration = 0;
  sessionBreak = 0;
  sessionTime = 0;
  breakTime = 0;
  minutes = 0;
  seconds = 0;
}

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

.home {background: transparent url('http://cache.desktopnexus.com/cropped-wallpapers/2000/2000556-1366x768-%5BDesktopNexus.com%5D.jpg?st=ED4CkYkSZpz-yRiY8GwECA&e=1448219555') fixed center top / cover;min-height: 100vh;height: auto !important;margin-top: 0.95em;}
.nopadding {padding: 0;}
body {font-family: 'Play', sans-serif;font-size: 2.4em;}
.navbar-brand {font-size: 1em;}
.img-border {border-radius: 50%;height: 40vh;}
.sect {padding-top: 1em;}
.social-btn-blk {background-color: #000000;}
.social-btn-wht {background-color: #ffffff;}
.portfolio-item a{text-decoration:none;}
.preview{display:none; position:absolute;width:auto !important;height:7em;z-idex:100;}
.portfolio-item a img:hover{background-color:yellow;opacity:0.9;}
.portfolio-item a:hover + .preview,.preview:hover{display:inline-block;position:absolute;}
.portfolio-img {display:inline-block;height: 7em;z-idex:1;}
.portfolio-hover:{width:100%;height:100%;background:grey;}
.img-fit{width:100%;}
.c-btn{text-align:center;}
.trigger{dispay:block;text-align:center;}
.actions{text-align:center;}
#output{text-align:center;}
#settings{text-align:center;}
.actions a{text-decoration:none;}
h2{text-align:center;margin-top:21.5vh;margin-bottom:1em;}
p{margin-top:1em;}
.gap{display:inline-block;width:0.5em;}
.alrt{display:none;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />