Pomodoro - pause and restart only works once

Pomodoro - pause and restart only works once
0.0 0

#1

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;
				}
			}
		}
	});

});