Tell us what’s happening:
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?
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.
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.:
setting the new status (session? or break?);
setting the new state duration
setting the interval status
call the function that do the clock ticking
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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.