25 + 5 clock project , I've tried everything

Hi all.
I hope someone is willing to take a look at my project. I hate to ask again
I’ve tried everything, and I would really like to know what I’m doing wrong.
Several of the tests are not passing.

I read at this site about how to add async/await to setState:
stackoverflow

I’ve also used this post , about how to pause a timer
stackoverflow
I’ve noticed that the timer acts wonky after pausing , so maybe I went wrong there somewhere?

codepen

thanks :slight_smile:

I think you’re really over-complicating things. Just because setState is async doesn’t mean that you have to await every single action that’s performed. Have you tried just throwing all that promised-based stuff away from the code?

I did that challenge with React not long ago, and I found that setTimeout works much better than setInterval in React. You’re working with class-based components, which is something I once learned but never used, so I won’t be of much help, but a functional component with useEffect that watches for changes of the time worked perfectly. You set a timeout of 1 second, and put the time inside the dependency array of useEffect.

Time changes (runs down one second) --> effect sets up a new timeout of 1 second --> and so on.

Generally I’d recommend moving away from class-based components.

Thanks. Yes, I tried removing the async/await , but then it fails even more.
I tried changing to settimeout , but it did not change it.

I really don’t want to change to components if I don’t have to. Is there a way to fix my current code ?

Considering you can complete this challenge in any framework, feel free to use React class components if you like. I used components and it was fairly straightforward. However, you are really just using one component (App) and it’s doing everything. I had an app component and separate components for the session controls, break controls, and timer display, but again that’s down to preference, size of the components, maintainability, etc. So you’re not right or wrong using one component, but you may find it easier one way or the other. As far as the await/async issue goes, I don’t think you need them here. I completed all the front end projects with them.

As far as the test errors, some are easier than others. For timer test 1, as the test states, the code is not changing the labels back properly on reset, as the label should be ‘Session’ instead of ‘Break’. Audio test 3 is also easy as most people use document.getElementById('beep').play() to start the audio and then something like

document.getElementById('beep').pause();
document.getElementById('beep').load();

to reset the audio.

For the remaining tests, it’s hard to tell if they are failing because of the label issue above or if the timer is really not reaching zero as the test results say (it looks like the timer is reaching 00:00). Timer test 13 indicates that there is a problem with the break times, and watching the tests as they happen seems to verify this.

So I would fix the easy stuff above, then try to fix the break times for timer test 13, and then see what happens. That may be enough to fix everything, or it may break more stuff, but at least the error messages will (probably) be more relevant.

Good luck.

1 Like

i’m not sure i understand with the reset label? When I press reset , the default break value resets to 5 , the default session to 25, and the default time to 25:00 , like it’s supposed to , but yet it’s wrong ? So baffling. Not annoyed at you obviously , just this stupid timer

Start the timer (set both to 1) let the session run out so the break time starts, now click reset. You can see the timer-label still says “Break”.

1 Like

thanks, now I see it . I completely overlooked that :stuck_out_tongue: