Build a 25 + 5 Clock timer has not reached 00:00

So I’m almost done with this but I fail 6 tests and all of them are because “Timer has not reached 00:00” even though when I manually test it it goes down to 00:00 and beeps for a second before stopping, so what’s the issue here?

js:

document.addEventListener('DOMContentLoaded', function() {
  const breakDecrement = document.getElementById('break-decrement');
  const breakIncrement = document.getElementById('break-increment');
  const breakLength = document.getElementById('break-length');
  const sessionDecrement = document.getElementById('session-decrement');
  const sessionIncrement = document.getElementById('session-increment');
  const sessionLength = document.getElementById('session-length');
  const timerLabel = document.getElementById('timer-label');
  const timeLeft = document.getElementById('time-left');
  const startStop = document.getElementById('start_stop');
  const reset = document.getElementById('reset');
  const beep = document.getElementById('beep');

  let breakLengthValue = parseInt(breakLength.textContent);
  let sessionLengthValue = parseInt(sessionLength.textContent);
  let isSession = true;
  let isRunning = false;
  let timer = null;
  let totalSeconds = sessionLengthValue * 60;

  breakDecrement.addEventListener('click', function() {
    if (breakLengthValue > 1) {
      breakLengthValue--;
      breakLength.textContent = breakLengthValue;
    }
  });

  breakIncrement.addEventListener('click', function() {
    if (breakLengthValue < 60) {
      breakLengthValue++;
      breakLength.textContent = breakLengthValue;
    }
  });

  sessionDecrement.addEventListener('click', function() {
    if (sessionLengthValue > 1) {
      sessionLengthValue--;
      sessionLength.textContent = sessionLengthValue;
      if (!isRunning) {
        timeLeft.textContent = `${sessionLengthValue}:00`;
        totalSeconds = sessionLengthValue * 60; // Update totalSeconds
      }
    }
  });

  sessionIncrement.addEventListener('click', function() {
    if (sessionLengthValue < 60) {
      sessionLengthValue++;
      sessionLength.textContent = sessionLengthValue;
      if (!isRunning) {
        timeLeft.textContent = `${sessionLengthValue}:00`;
        totalSeconds = sessionLengthValue * 60; // Update totalSeconds
      }
    }
  });

  startStop.addEventListener('click', function() {
    if (!isRunning) {
      isRunning = true;
      startStop.textContent = 'Stop';
      startSession();
    } else {
      isRunning = false;
      startStop.textContent = 'Start';
      clearInterval(timer);
    }
  });

  reset.addEventListener('click', function() {
    clearInterval(timer);
    isRunning = false;
    isSession = true;
    startStop.textContent = 'Start';
    timerLabel.textContent = 'Session';
    breakLengthValue = 5;
    sessionLengthValue = 25;
    breakLength.textContent = breakLengthValue;
    sessionLength.textContent = sessionLengthValue;
    timeLeft.textContent = `${sessionLengthValue}:00`;
    beep.pause();
    beep.currentTime = 0;
    totalSeconds = sessionLengthValue * 60;
  });

  function startSession() {
    clearInterval(timer);
    timer = setInterval(function() {
      if (isRunning) {
        totalSeconds--;

        let minutes = Math.floor(totalSeconds / 60);
        let seconds = totalSeconds % 60;

        if (seconds < 10) {
          timeLeft.textContent = `${minutes}:0${seconds}`;
        } else {
          timeLeft.textContent = `${minutes}:${seconds}`;
        }

        if (totalSeconds === 0) {
          beep.play();
          clearInterval(timer);
          if (isSession) {
            isSession = false;
            timerLabel.textContent = 'Break';
            totalSeconds = breakLengthValue * 60;
          } else {
            isSession = true;
            timerLabel.textContent = 'Session';
            totalSeconds = sessionLengthValue * 60;
          }
          startSession(); // Start the next session or break
        }
      }
    }, 1000);
  }
});

Please provide the HTML or post a link to a live example on something like Codepen (add the test script to it as well).

like this?

I also struggle with those 6 tests because Timer has not reached 00:00, yet my timer can reach 00:00 normally. Does this have to do with how we render the extra 0s (01:01) in DOM?

Minutes needs to be padded with zero, just as your seconds are.

Also, it looks like you are off by one. Try rounding up instead of down (round or ceil).

Please open your own thread and provide your code. Prefer a live example using Codepen, etc.

thank you that fixed it for me

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