I am a beginner at Javascript and I am creating a Pomodoro timer and the buttons are as seen in the image.
When the user clicks on either of the 3 top buttons I want the timer to switch to 25:00, 5:00 or 15:00, respectively. However, when clicked on, the timer initiates. I only want the timer to initiate once the 'start' button is clicked [Problem 1].
Secondly, when the pause button function is called, the timer display stops however it keeps running in the background [Problem 2] and to be honest I have little idea as how to resume the timer from where it was paused - despite searching the internet. Please can someone help me with this, I am really struggling here! Thank you!
var timer = {
pomodoro: 25,
longBreak: 15,
shortBreak: 5
}
var currentTimerType = timer.pomodoro;
function timer_pomodoro() {
currentTimerType = timer.pomodoro;
timer_start();
}
function timer_short() {
currentTimerType = timer.shortBreak;
timer_start();
}
function timer_long() {
currentTimerType = timer.longBreak;
timer_start();
}
var minutesToAdd = 0;
function timer_start() {
switch(currentTimerType) {
case timer.pomodoro:
minutesToAdd=25;
break;
case timer.shortBreak:
minutesToAdd=5;
break;
case timer.longBreak:
minutesToAdd=15;
break;
}
var currentDate = new Date();
var futureDate = new Date(currentDate.getTime() + minutesToAdd*60000);
countDownDate = futureDate;
var now = new Date().getTime();
document.getElementById('seconds').innerHTML = '00';
document.getElementById('minutes').innerHTML = minutesToAdd;
x = setInterval(myTimer, 1000);
}
function myTimer() {
var currentDate = new Date();
var futureDate = new Date(currentDate.getTime() + minutesToAdd*60000);
var now = new Date().getTime();
var distance = countDownDate - now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('seconds').innerHTML = seconds;
document.getElementById('minutes').innerHTML = minutes;
if (seconds == 0 & minutes == 0) {
clearInterval(x);
}
}
function pause() {
clearInterval(x);
}
For Problem 1, you call timer_start(); in all the functions timer_long, timer_short, and timer_podomoro. Removing those calls will fix it, and you only need to call timer_start() when the start button is clicked.
For Problem 2, in the code provided I'm not sure how it would fail, but to continue it, youll want to store the current value of the timer somewhere outside of start. For example:
var timerStart = {}
function timerStart() {
timerStart.pomodoro = new Date();
}