Pomodoro Clock

index.html

<h1 id='title' class='text-primary'>Pomodoro Clock</h1>
<h3 id='status' class='text-muted'></h2>
<div id='timer-wrapper'>
  <h1 id='timer' class='text-danger'><span id='minutes'></span>:<span id='seconds'></span></h1></div>
<div id='buttons'>
  <button id='start-button' class='clock-control btn btn-lg btn-success'>START</button>
  <button id='stop-button' class='clock-control btn btn-lg btn-danger hidden'>STOP</button>
  <button id='resume-button' class='clock-control btn btn-lg btn-info hidden'>RESUME</button>
  <button id='pause-button' class='clock-control btn btn-lg btn-warning hidden'>PAUSE</button>
</div>
<div id='settings'>
  <h1 id='settings-title' class='text-primary'>Session/Break Duration</h1>
  <div id='session-settings' class='settings-cluster'>
    <button id='session-increase-button' class='settings-button btn btn-lg btn-default'>+</button>
    <div id='session-duration' class='duration-settings text-danger'>25</div>
    <button id='session-decrease-button' class='settings-button btn btn-lg btn-default'>-</button>
  </div>
  <div id='break-settings' class='settings-cluster'>
    <button id='break-increase-button' class='settings-button btn btn-lg btn-default'>+</button>
    <div id='break-duration' class='duration-settings text-danger'>5</div>
    <button id='break-decrease-button' class='settings-button btn btn-lg btn-default'>-</button>
  </div>
</div>

pomodoro-clock.markdown

Pomodoro Clock

A simple pomodoro clock made with jQuery & Bootstrap

A Pen by Rem Lampa on CodePen.

License.

script.js

// Clock object
var Clock = function(name, duration, setting) {
  this.name = name;
  this.duration = duration;
  this.setting = setting;
  this.setDuration = function() {
    this.duration = parseInt($(this.setting).html()) * 60 * 1000;
  };
};

$(document).ready(function() {
  var elapsed;

  var sessionClock = new Clock('Session',
    25 * 60 * 1000,
    '#session-duration');
  var breakClock = new Clock('Break',
    5 * 60 * 1000,
    '#break-duration');

  var displayClock = {
    currentClock: sessionClock,

    timer: null,

    timeDisplay: null,

    set: function(duration) {
      var duration = typeof duration !== 'undefined' ? duration: this.currentClock.duration;
      current = new Date(duration),
        minutes = current.getMinutes(),
        seconds = current.getSeconds();

      if (minutes < 10) {
        minutes = '0' + minutes.toString();
      }

      if (seconds < 10) {
        seconds = '0' + seconds.toString();
      }

      $('#minutes').html(minutes);
      $('#seconds').html(seconds);
    },

    start: function() {
      var startTime = new Date(),
        endTime = new Date(new Date().getTime() + this.currentClock.duration - 1000),
        timeDisplay = endTime - startTime;

      $('#status').html(this.currentClock.name + ' in progress!');
      
      var self = this;

      this.timer = setInterval(function() {
        if (timeDisplay === 0) {
          clearInterval(self.timer);
          $('#status').html('');
          self.currentClock = self.currentClock.name === 'Session' ? breakClock : sessionClock;
          self.set();
          self.start();
        }
        self.set(timeDisplay);
        timeDisplay -= 1000;
      }, 1000);

    },

    stop: function() {
      clearInterval(this.timer);
      this.currentClock = sessionClock;
      $('#status').html('');
      this.set();
    },

    pause: function() {
      clearInterval(this.timer);
      var elapsed = (parseInt($('#minutes').html()) * 60 + parseInt($('#seconds').html())) * 1000;
      this.currentClock = new Clock(this.currentClock.name, elapsed, this.currentClock.setting);
    }
  };

  displayClock.set();

  // CLOCK CONTROLS

  $('#start-button').click(function(event) {
    displayClock.start();
    $(this).addClass('hidden');
    $('#stop-button').toggleClass('hidden');
    $('#pause-button').toggleClass('hidden');
    $('#settings').fadeToggle();
  });

  $('#stop-button').click(function(event) {
    displayClock.stop();

    $(this).toggleClass('hidden');

    if (!$('#pause-button').hasClass('hidden')) {
      $('#pause-button').addClass('hidden');
    }
    if (!$('#resume-button').hasClass('hidden')) {
      $('#resume-button').addClass('hidden');
    }
    $('#start-button').toggleClass('hidden');
    $('#settings').fadeToggle();
  });

  $('#pause-button').click(function(event) {
    displayClock.pause();

    $(this).toggleClass('hidden');
    $('#resume-button').toggleClass('hidden');
  });

  $('#resume-button').click(function(event) {
    displayClock.start();
    $(this).toggleClass('hidden');
    $('#pause-button').toggleClass('hidden');
  });

  // SETTINGS CONTROLS

  $('#session-increase-button').click(function(event) {
    var setting = parseInt($('#session-duration').html()) + 1;
    if (setting === 60) {
      setting = 1;
    }
    $('#session-duration').html(new Date(setting * 60 * 1000).getMinutes());
    sessionClock.setDuration();
    displayClock.set();
  });

  $('#session-decrease-button').click(function(event) {
    var setting = parseInt($('#session-duration').html()) - 1;
    if (setting === 0) {
      setting = 59;
    }
    $('#session-duration').html(new Date(setting * 60 * 1000).getMinutes());
    sessionClock.setDuration();
    displayClock.set();
  });

  $('#break-increase-button').click(function(event) {
    var setting = parseInt($('#break-duration').html()) + 1;
    if (setting === 60) {
      setting = 1;
    }
    $('#break-duration').html(new Date(setting * 60 * 1000).getMinutes());
    breakClock.setDuration();
  });

  $('#break-decrease-button').click(function(event) {
    var setting = parseInt($('#break-duration').html()) - 1;
    if (setting === 0) {
      setting = 59;
    }
    $('#break-duration').html(new Date(setting * 60 * 1000).getMinutes());
    breakClock.setDuration();
  });

});

scripts

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

style.css

#title {
  text-align: center;
}

#status {
  text-align: center;
  margin: 0;
}

#timer {
  font-size: 120px;
  text-align: center;
  margin: 0;
}

#buttons {
  text-align: center;
}

#settings {
  margin: 50px;
  text-align: center;
}

.settings-cluster {
  display: inline-block;
  margin: 0 25px;
}

.duration-settings {
  font-size: 36px;
}

styles

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