Pomodoro Timer in Javascript

Question

I've made a Pomodoro Timer application. All it does is countdown from a time in minutes given by the user to 0:00. It does this first for a session time, and then switches to a break timer and continuously loops like this until the application is paused or closed.

The time can be adjusted by clicking on a '+' or '-' beside the time.

In doing this project I wanted to learn how i could better organize my code as far as separation of concerns goes. Therefore I'm primarily looking for feedback as to how the the pieces of code could be better organized. I split it up between a model for the data and functions that change the data and a view to draw the application and set up event listeners.

Here is the Javascript :

'use strict';

$(function() {

  var model = (function() {

  var data = {
    minutes : null,
    temp : null,
    tempBreak : null,
    seconds : null,
    timer : {session : true, break : false},
    active : null // check to see if a timer interval is already set.
  };

  var timer;

  function changeTime() {

    data.seconds = (data.seconds > 0) ? data.seconds - 1 : 59;
    data.minutes = (data.minutes > 0 && data.seconds === 59) ? data.minutes - 1 : data.minutes;

    if (data.seconds === 0 && data.minutes === 0) {
      changeTimer();
    }

    view.render();
  }

  function changeTimer() {
    data.timer['session'] = !data.timer['session'];
    data.timer['break'] = !data.timer['break'];
    model.resetTimer();
  }

  return {
    init : function() {
      data.minutes = 25;
      data.temp = data.minutes;
      data.tempBreak = 5;
      data.seconds = 0;
      data.timer['session'] = true;
      data.timer['break'] = false;
      data.active = false;
    },
    incrementMinutes : function() {
      if (!data.active) {
         if (data.timer['session']) {
           data.temp++;
           data.minutes = data.temp;
         } else if (data.timer['break']) {
           data.tempBreak++;
           data.minutes = data.tempBreak;
        }

        model.resetTimer();
      }

      view.render();
    },
    decrementMinutes : function() {
      if (!data.active) {
        if (data.timer['session']) {
          data.temp = (data.temp > 0) ? data.temp - 1 : 0;
          data.minutes = data.temp;
        } else if (data.timer['break']) {
          data.tempBreak = (data.tempBreak > 0) ? data.tempBreak - 1 : 0;
          data.minutes = data.tempBreak;
        }

        model.resetTimer(); 
      }

      view.render();
    },
    getMinutes : function() {
      return data.minutes;
    },
    getSeconds : function() {
      return data.seconds;
    },
    switchToSession : function() {
      if (!data.active) {
        data.timer['session'] = true;
        data.timer['break'] = false;
        model.resetTimer();
        view.render(); 
      }
    },
    switchToBreak : function() {
      if (!data.active) {
        data.timer['session'] = false;
        data.timer['break'] = true;
        model.resetTimer();
        view.render(); 
      }
    },
    getTimerType : function() {
      return (data.timer['session']) ? 'Session' : 'Break';
    },
    startTimer : function() {
      data.active = !data.active;
      if (data.active){
          timer = setInterval(function() {
          changeTime();
        }, 1000); 
      } else {
        model.pauseTimer();
      }
    },
    pauseTimer : function() {
      data.active = false;
      clearInterval(timer);
    },
    resetTimer : function() {
      data.minutes = (data.timer['session']) ? data.temp : data.tempBreak;
      data.seconds = 0;
      view.render();
    }
  };
})();

var view = (function() {
  // Cache the DOM
  var sessionCheck = document.getElementById('session');
  var breakCheck = document.getElementById('break');

  var timerHeading = document.getElementById('timerType');

  var up = document.getElementById('up');
  var down = document.getElementById('down');

  var minutes = document.getElementById('minutes');
  var seconds = document.getElementById('seconds');

  var start = document.getElementById('start');
  var pause = document.getElementById('pause');
  var reset = document.getElementById('reset');

  // Bind events
  sessionCheck.addEventListener('mouseup', model.switchToSession);
  breakCheck.addEventListener('mouseup', model.switchToBreak);
  up.addEventListener('mouseup', model.incrementMinutes);
  down.addEventListener('mouseup', model.decrementMinutes);
  start.addEventListener('mouseup', model.startTimer);
  pause.addEventListener('mouseup', model.pauseTimer);
  reset.addEventListener('mouseup', model.resetTimer);

  var render = function() {
    minutes.innerHTML = model.getMinutes();
    seconds.innerHTML = (model.getSeconds() > 9) ? model.getSeconds() : '0' + model.getSeconds();
    timerHeading.innerHTML = model.getTimerType();
  }

  return {
    render : render
  };


})();

model.init();
view.render();

});

Here is the Pen: http://codepen.io/rfdeveloper/pen/vNXJLQ?editors=001

Answer 1

The internal representation of time can be different from how it is displayed, and is often a good idea to separate the too. For example, here you count down time in two steps:

1. decrement seconds by 1, if negative then set to 59
2. decrement minutes by 1 if seconds is 59

Consider using an internal representation as total seconds, let's say data.totalSeconds, initialize to 25 * 60 (for 25 minutes), and derive the display values from that.

That way, instead of this:

data.seconds = (data.seconds > 0) ? data.seconds - 1 : 59;
data.minutes = (data.minutes > 0 && data.seconds === 59) ? data.minutes - 1 : data.minutes;

if (data.seconds === 0 && data.minutes === 0) {
  changeTimer();
}

The counting down becomes a bit simpler (fewer conditions):

  data.totalSeconds -= 1;
  data.seconds = data.totalSeconds % 60;
  data.minutes = parseInt(data.totalSeconds / 60);

  if (data.totalSeconds === 0) {
    changeTimer();
  }

Answer 2

Timer modelling

With access to a system clock (via javascript's Date and Date() instance methods) :

• a timer can be modelled as a single register start_time (plus a bunch of methods).
• a pausable timer can be modelled as two registers cumulative_time and last_start_time (plus a bunch of methods).

Thus modelled, the basic timer paradigm is timerValue = cumulative_time + time_now - last_start_time. Only simple manipulation of timerValue value is necessary to provide count-up and count-down variants, and is a view consideration, not model.

We should see :

• Javascript's Date.now() and Date() instance(s) somewhere in the code.

And we should not see :

• setInterval(), reliance on which will lead to inaccuracy.
• minutes and seconds anywhere other than in the view. Their presence in the model is indicative of not having fully separated out the view from the model.

Timer as a widget

Your timer is essentially a widget.

As such, it would be more easily invoked by passing in a single container element and having all the internal elements generated on view initialization.

Hence, most of the document.getElementById() statements would become document.createElement(...) statements (or their jQuery equivalents).