25 + 5 Clock: cannot understand why tests 22-25 fail

I’ve added all elements of the timer, and it seems to work the same as the sample project provided. However, I encounter failures in tests 22-25 (timer tests 12-15). The details are as follows:

Test 22: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of “timer-label” should display a string indicating a break has begun.
Error message: Break time didn’t start with the correct value.: expected 23 to be at most 5

The relevant element does display a new string. I’ve compared it with the sample project as well, and tried both changing the string immediately on hitting 00:00 as well as when the next countdown starts, but none fulfils the test. I do not understand what the error message is trying to say.

Tests 23-25:

  • When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id="break-length" element.
  • When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a session has begun.
  • When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id="session-length" element.

Error messages (in sequence):

  • Timer has reached zero but didn’t switch to Break time: expected ‘Session’ to not equal ‘Session’
  • Timer has reached zero but didn’t switch back to Session time.: expected ‘Session’ to not equal ‘Session’
  • Timer has reached zero but didn’t switch back to Session time.: expected ‘Break’ to not equal ‘Break’

Again, the string changes, and the countdown starts, so I do not understand these messages.

Earlier, I had been getting an error because there was a 1 second delay on pausing and resuming the clock, but that has since been resolved. I’ve tried a setInterval as well so the next countdown doesn’t start immediately, but that doesn’t work either. I would greatly appreciate any help as to where I am going wrong.

My codepen: https://codepen.io/importhuman/pen/eYdGpKN
Sample codepen: https://codepen.io/freeCodeCamp/pen/XpKrrW?editors=0010

Project description: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-25--5-clock

Hello there,

I have not gone through all of your code, but the striking thing for me is the way the app is counting:

var now = duration - (new Date().getTime() - startTime);

The issue here is this code is within a setInterval function, which, in a way, is a clock. So, using this logic, there is a clock within a clock. I have not looked into this, but I would not be surprised to see setInterval, behind the scenes, make use of Date.getTime()`.

What I am trying to say is most implementations of this project do not involve the use of the Date object.

As such, I would highly encourage you to alter this logic to make use of the fact that this code runs once per second:

setInterval(() => { // I run once per second }, 1000);

Hope this helps

1 Like

I’ll look into it and try this approach, thank you :smiley: