Hello. I’m having some problems. You can pause and restart the countdown once, but then it fails - the countdown won’t pause again and it actually goes up to a previous value when you click on it. My best guess is that it’s something to do with the scope of variables, or having one jQuery onclick inside another. Perhaps! Any ideas? Thanks.
https://codepen.io/lpgm/pen/XgzYva
$(document).ready(function() {
var workTime = 1; // In minutes
var breakTime = 5; // In minutes
var workingFlag = true; // False === having a break
var startedFlag = false;
var pausedFlag = false;
var countdownDate, timeLeft, pausedTimeLeft;
$(".bottom-display").on("click", function() {
if (!startedFlag) {
startedFlag = true;
$("#what-to-do").html("<p>Do some work!</p>");
countdownDate = new Date().getTime() + workTime * 60 * 1000;
var ticking = setInterval(countdown, 1000);
} else if (pausedFlag) {
pausedFlag = false;
countdownDate = new Date().getTime() + pausedTimeLeft;
var ticking = setInterval(countdown, 1000);
}
function countdown() {
// Start of new stuff
$(".bottom-display").on("click", function() {
if (!pausedFlag) {
pausedFlag = true;
pausedTimeLeft = timeLeft;
clearInterval(ticking);
}
});
// End of new stuff
timeLeft = countdownDate - new Date().getTime();
console.log(countdownDate, timeLeft);
var hoursLeft = Math.floor(
timeLeft % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)
);
var minutesLeft = Math.floor(timeLeft % (1000 * 60 * 60) / (1000 * 60));
if (minutesLeft < 10) {
minutesLeft = "0" + minutesLeft;
}
var secondsLeft = Math.round(timeLeft % (1000 * 60) / 1000); // Changed from Math.floor
if (secondsLeft < 10) {
secondsLeft = "0" + secondsLeft;
}
$("#countdown").html(
"<p>" + hoursLeft + ":" + minutesLeft + ":" + secondsLeft + "</p>"
);
if (timeLeft < 1000) {
if (workingFlag) {
workingFlag = false;
$("#what-to-do").html("<p>Have a break!</p>");
countdownDate = new Date().getTime() + breakTime * 60 * 1000;
} else {
workingFlag = true;
$("#what-to-do").html("<p>Do some work!</p>");
countdownDate = new Date().getTime() + workTime * 60 * 1000;
}
}
}
});
});