Finished the 25 + 5 chronometer but some tests failed and I don't understand why

Tell us what’s happening:
Hi everyone,
I just ran out of clock 25 + 5 but some tests failed because the timer didn’t reach 00:00 but the timer seems to be working fine.

I have searched and read about other problems but have not found an answer.
Here is my project → https://codepen.io/denielden/pen/qBPzVoO

Can anyone help me or give me some feedback?
Thank you!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Challenge: Build a 25 + 5 Clock

Link to the challenge:

When the timer is paused, and the session length is changed it seems the timer is not functioning correctly. The seconds do not reset. Maybe this is one problem.

1 Like

Hi Slimattcode, Thank you for answering!
I corrected it but nothing seems to have changed.

Search this forum about timer has not reached zero. There’s a lot.

Thank you for answering! I searched but couldn’t find the solution. I don’t understand how to eliminate the delay. I don’t use newDate to format the date

Sorry, I can’t help. I don’t understand function components.

I was looking for the callback function that do the switching, that has (encapsulates) everything that must be done when session/break changed, e.g.:

  beep play;
  clearInterval;
  setting the new status (session? or break?);
  setting the new state duration 
  setting the interval status
  call the function that do the clock ticking
  return;

Do you have it? Having all the task encapsulated in a function ensures there’s no lag between one action and the other. Because there are some asynchronous process in this app if i’m not wrong.

And you have to make sure the test saw that timer reached zero, by delaying the switching. Logically we want to switch when timer reached 00:00, but for this one we want to delay 1 second, that means, when time reached -1 second then we call the switching function.

I hope this could inspire you to brainstorm new approach to tweak your app.

1 Like

I used useEffect to make all those changes based on state.

I followed your advice and now I have all the logic inside the handleCountDown function but it always gives me the same errors yet the timer runs and reaches zero (as seen in the console).

However, I noticed that when I start the test the numbers do not flow as they do in the test of the example project

Thanks again for the help!

So a lot of people who did this project got the same problem with the same cause, that is timer has not reached zero simply because the test spec did not see that the timer indeed reached zero. It did not see it because once the app reached zero, the app instantly changed the state.

So, for some people, the solution was to delay the app from changing the state for about 1000 ms. Instead of the app changing the state at 00:00, the app changed the state at -1 second, to leave sufficient time for the test spec to see it.

This might be the cause of your problem, might be not. In any case, don’t get stuck in a problem (like this) for too long. While waiting for someone to help you, I believe it’s better for you to do another project (may be the next project or whatever project that interests you).

I am currently re-learning react too. Sorry I cannot help you much.

I played around a little bit with your app and found some bugs. If I press play, it started, and everytime I press play again, the timer ticks faster.
Also, while the timer ticks, I still could increase and decrease the settings. The example app does not allow it to happen.