Countdown timer

I’m looking to make a 30-minute countdown timer that I can stop/start/reset. I’ve looked up a bunch of JS code, and this one makes the most sense to me, but it still doesn’t work. Any ideas?

const defaultValue = 30 * 60;
var countDownTime = defaultValue;
const findTimeString = () => {
var minutes = String(Math.trunc(countDownTime / 60));
var seconds = String(countDownTime % 60);
if (minutes.length === 1) {
minutes = “0” + minutes;
}
if (seconds.length === 1) {
seconds = “0” + seconds;
}
return minutes + seconds;
};
const countContainer = document.querySelectorAll(“.count-digit”);
const renderTime = () => {
const time = findTimeString();
countContainer.forEach((count, index) => {
count.innerHTML = time.charAt(index);
});
};
const startAction = document.getElementById(“start-timer”);
const startTimer = () => {
if (isStopped) {
isStopped = false;
timerID = setInterval(runCountDown, 500);
}
};
startAction.onclick = startTimer;
const runCountDown = () => {
countDownTime -= 1;
renderTime();
if (countDownTime === 0) {
stopTimer();
countDownTime = defaultValue;
}
};
const stopAction = document.getElementById(“stop-timer”);
const stopTimer = () => {
isStopped = true;
if (timerID) {
clearInterval(timerID);
}
};
stopAction.onclick = stopTimer;
const resetAction = document.getElementById(“reset-timer”);
const resetTimer = () => {
stopTimer();
countDownTime = defaultValue;
renderTime();
};
resetAction.onclick = resetTimer;

We would need your HTML too so we can verify that your JS is referencing the elements correctly.

Also, please use the triple back tick method to paste your code in here. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

So please edit your first post and wrap your JS in triple back ticks.

And if you really want to ensure that someone takes the time to help you then you should put this in a public place and then give us a link to it, such as in codepen.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.