25 + 5 Clock Challenge. Having problems with set and clear interval

My 25 hour clock is almost complete.
My problem is that I cannot stop / pause the clock after the first alarm goes off.

I know it has something to do with how I structured the logic.
Can some have a look at the ClockContainer.js component and see where I’m making the mistake.

I’d be very grateful for any tips.

Here is the link to my CodePen:

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36

Challenge: Build a 25 + 5 Clock

Link to the challenge:

Overall comment since you said you solved this already, after review:

Not sure what your code conventions entail, but it seems like you may not be doing yourself a favor with so many single-line conditionals without parenthesis, with operations performed directly in the condition. It is not always straightforward what the parser ought to return.

Also there are a lot of negated returns and changes to values that may or may not be passed by reference, so you can have strange behavior, but again this is likely a code convention thing too. Preference, but what I see here will likely run into strange behaviors with head-scratchers to debug.

It might take a few more characters or lines, but if you can clearly read what is supposed to happen, and the parser has an easy job to interpret your code, you will sleep better at night knowing you will not need to maintain extremely dense and complex code blocks that are referenced by asynchronous operations from tons of possible directions at any given moment.

I can’t get it to work from the start.

Right now, the test bundle won’t run and complains of a script error. If I remove your ClockContainer component from App, then at least the first test passes. If I don’t, all tests fail.

When I try to use the app, most of the buttons don’t work. I can start the timer and stop it. But if I do that and then try to change the break with those buttons, it changes the current session time and locks out the reset button.

On investigation I see you’re using React 18, but using older react constructs. You should either use an older version or audit your code with the upgrading to React 18 information. After I do enough work to get the tests to run with 18, there’s a lot of problems with the display and buttons in addition to the one you mention with the clock.

Given the number of problems and the react version problem, I would address the react version first and make sure you want to use 18. Then, I would work on the buttons since they don’t always seem to function. Next I would work on the time display because it gets garbled (and stays that way) during the tests.

Finally, to begin to solve the start/stop problem, you’re probably going to have to add some console.log() messages around the parts that start and stop the clock to make sure they are actually doing what they are supposed to do.

Before reading the comment. I can tell you that it’s cause of the stopAlarm() function I saw in the resetTimer() dispatch…
So you could delete it and comment it out.

Thanks for taking the time to provide this review.

I will take into account all what you suggested and make necessary changes…

The reply came back above.

This is absolutely true… I included a lot of ternary operations.

I approached this challenge without a plan and tried solving everything probably too quick.

I think I may just restart with a plan and write cleaner code.

1 Like

That is a good idea. It will be a much better project now, and you will get used to re-writing. This is the real law:

  1. Make it work.
  2. Make it right.
  3. Make it awesome ( or fast, people say “fast” – but that is only one fraction of “awesome” )

That will involve several re-writes, refactoring passes, etc.

Remember “practice makes perfect” is wrong. “Perfect practice makes perfect” – so do it right now, and in the future that is how you will code, way more often than not.

Remember, you are not writing code mainly, you are making the programmer who writes code.

Thanks much…

I’m gonna start now.
I may drop the useReducer and just go with useState.

great looking clock, im trying to work my way through that challenge but yours looks way better

Nah bro… I looked at yours… Way less code…
Mine’s over engineered, that’s why I’m getting problems now.
I’m gonna do a simpler rebuild, later…

mine is less code because i dont know as much as you lol.

great job man.