I have a pomodoro timer that is supposed to count down the "workminutes" a user has input and then the break minutes and then loop. The timer starts to count down WorkMinutes like it should and then break minutes(like it should), it then restarts and counts down the workminutes again like it should BUT when its done with that and it comes to the breakminutes a second time instead of counting down from eg. 1 minute it counts from -1 minute and up, so -1 minute and one second and so on. I'm a complete beginner in JavaScript so it would be very nice if you kept that in mind, any help i greatly appreciated. Here is the JavaScript code:
// we need some variables to store the work and break minutes
var workSeconds = "120", breakSeconds = "60";
// and a referens to interval
var xInterval;
var audio = new Audio('Bell_finished.mp3');
// start function
function start() {
xInterval = setInterval(workCountDown, 1000);
}
// stop function
function stop() {
clearInterval(xInterval);
}
// reset function; calls stop, save which re-stores the values of user inputs and then starts again.
function reset() {
stop();
save();
start();
}
// save function that saves the values of user inputs
function save() {
workSeconds = parseInt(document.getElementById("TaskTime").value)*60;
breakMinutes = parseInt(document.getElementById("BreakTime").value)*60;
}
// working count down function
function workCountDown() {
// counting down work seconds
workSeconds--;
// showing work seconds in "0:0" format:
document.getElementById("timer").innerText = Math.floor((workSeconds / 60)).toString() + ":" + (workSeconds % 60).toString();
// if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
if (workSeconds == 0) {
audio.play();
console.log("relaxing...");
clearInterval(xInterval);
xInterval = setInterval(breakCountDown, 1000);
}
}
// breaking count down function
function breakCountDown() {
// counting down break seconds
breakSeconds--;
// showing break seconds in "0:0" format:
document.getElementById("timer").innerText = Math.floor((breakSeconds / 60)).toString() + ":" + (breakSeconds % 60).toString();
// if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
if (breakSeconds == 0) {
audio.play();
console.log("ready to work...");
reset();
}
}
as I said in the comment it works fine, just change breakMinutes to breakSeconds inside save function. here is an implementation of your code. you can run the snippet here and see the result
// we need some variables to store the work and break minutes
let workSeconds = "120",
breakSeconds = "60";
// and a referens to interval
let xInterval;
let isStarted = false;
// start function
function start() {
xInterval = setInterval(workCountDown, 1000);
}
// stop function
function stop() {
clearInterval(xInterval);
}
// reset function; calls stop, save which re-stores the values of user inputs and then starts again.
function reset() {
stop();
save();
start();
}
// save function that saves the values of user inputs
function save() {
workSeconds =
parseInt(document.getElementById("TaskTime").value || 120, 10) * 60;
breakSeconds =
parseInt(document.getElementById("BreakTime").value || 60, 10) * 60;
}
// working count down function
function workCountDown() {
// counting down work seconds
workSeconds--;
// showing work seconds in "0:0" format:
document.getElementById("timer").innerText =
Math.floor(workSeconds / 60).toString() +
":" +
(workSeconds % 60).toString();
// if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
if (workSeconds === 0) {
console.log("relaxing...");
clearInterval(xInterval);
xInterval = setInterval(breakCountDown, 1000);
}
}
// breaking count down function
function breakCountDown() {
// counting down break seconds
breakSeconds--;
// showing break seconds in "0:0" format:
document.getElementById("timer").innerText =
Math.floor(breakSeconds / 60).toString() +
":" +
(breakSeconds % 60).toString();
// if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
if (breakSeconds === 0) {
console.log("ready to work...");
reset();
}
}
const startButton = document.getElementById("start-btn");
startButton.addEventListener("click", (e) => {
isStarted = !isStarted;
if (isStarted) {
save();
start();
startButton.textContent = "Stop";
} else {
stop();
startButton.textContent = "Start";
document.getElementById("timer").innerText = 0;
}
}); <label>Work Time: <input type="number" id="TaskTime" value="1" /></label>
<label>Break Time: <input type="number" id="BreakTime" value="1" /></label>
<div id="timer">0</div>
<button id="start-btn">Start</button>