Pomodoro Timer
https://stackoverflow.com/questions/48057292/how-do-i-resume-the-countdown-timer
by Patrick Hund
HTML
<!-- View 1: the settings contain session length and break length-->
<section>
<div id="session">
<button type="button" id="increaseSession">+</button>
<span id="displaySession">25</span>
<button type="button" id="decreaseSession">-</button>
</div>
<div id="break">
<button type="button" id="increaseBreak">+</button>
<span id="displayBreak">5</span>
<button type="button" id="decreaseBreak">-</button>
</div>
<div><button id="start">START</button>
<button id ="next">NEXT</button>
<button id="stop">STOP</button></div>
</section>
<!--View 2: the timer itself-->
<div id="countdown-timer"></div>
JavaScript
//======MODEL======//
//by default, session lasts 25min, break lasts 5 min
var data = {
session: 25,
break: 5,
isSession: true
}
//===== OCTOPUS=====//
var octopus = {
init: function() {
//initialize the views
settings.init();
timer.init();
},
//========== SETTINGS==========//
//get the time of session and break
getCurrentSession: function() {
return data.session;
},
getCurrentBreak: function() {
return data.break;
},
// set the currently-selected time to the object passed in
setCurrentSession: function(isSession) {
data.isSession = isSession;
},
//increment or decrement the counter
incrementSessionCounter: function() {
data.session++;
settings.render();
},
incrementBreakCounter: function() {
data.break++;
settings.render();
},
decrementSessionCounter: function() {
data.session--;
settings.render();
},
decrementBreakCounter: function() {
data.break--;
settings.render();
}
}
//----- VIEW----//
var settings = {
init: function() {
//display the default session and break with increment and decrement
//listen to click function on either + or - to adjust the timer
this.session = document.getElementById("displaySession");
this.break = document.getElementById("displayBreak");
this.incrementSession = document.getElementById("increaseSession");
this.decrementSession = document.getElementById("decreaseSession");
this.incrementBreak = document.getElementById("increaseBreak");
this.decrementBreak = document.getElementById("decreaseBreak");
this.incrementSession.addEventListener("click", function() {
octopus.incrementSessionCounter();
});
this.decrementSession.addEventListener("click", function() {
octopus.decrementSessionCounter();
});
...