POMODORO CLOCK Proj with React Hooks 28/29 Help

Github Link for code
App deployed at Netlify for tests

I hope to get some help on this project. Current score is 23/29. I haven’t added audio yet, but the errors prior to the audio part I couldn’t quite figure out why.

I wrote a custom hook that would wait 1 second before running the clock again to solve the 00:00, dunno if it’s causing my other errors.

TIA!

[UPDATE]
score: 25/29

A bit frustrated with the last failed tests.

  • I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

  • If the timer is running and I click the element with id=“start_stop”, the countdown should pause.

  • I should not be able to set a session or break length to > 60.

  • If the timer is paused and I click the element with id=“start_stop”, the countdown should resume running from the point at which it was paused.

I think the app is supposed to pass these tests. Kindly see for yourself. Help…

[UPDATE]
score: 26/29

I might be able to solve 2 of the last 3, which may leave me with this:

  • I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

I just have to do something before I resume working on this.

[UPDATE]
score: 28/29

So apparently I have accidentally removed my usePause hook, but I put it back on and it’s working. Now this last problem.

  • I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

The next two lines goes:
time-left is not formatted correctly: expected ‘59’ to equal ‘60’
AssertionError: time-left is not formatted correctly: expected ‘59’ to equal ‘60’

Like, my timer never goes ‘60’…

const timer = () => {

    let minutes = Math.floor(timeLeft / 60);

    let seconds = timeLeft - minutes * 60;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;

    return `${minutes}:${seconds}`;

  };

and that goes into <span id="time-left">{timer()}</span>

Anyone? :smiley:

[UPDATE]
I just change my topic category to #help, maybe I 'll have better luck here. :smiley:

[FINAL UPDATE]
score: 29/29

Finally!!!

I just need to design this now. :smiley:

1 Like

I recently helped with similar problem with react hooks:

Check how you you go from clicking “Up” button to updating time in blue “Session” block.

1 Like

Actually I found a different bug, or I don’t know if it’s still related to your solution… But the timer actually stops (freezes) when I press any of the up/down buttons… then continues the timer after releasing the button… Any thoughts on that?

Hi! I honestly am not sure if the solution you suggested directly solves my problem, but it did get me to change my code. I initially just really wanted to try out custom hooks to learn, I feel like I did, there’s so much more to learn and absorb. I think your solution will still help anyone who comes across this post so… Thanks! :smiley:

Hello, to pass test 8 is it necessary to update the clock at the same time that I click on the increment and decrement buttons?

1 Like

Hi, have you solved this yet? I haven’t been active on the forums for days, sorry… If you haven’t solved yours yet, kindly link your post so I can try and help. Hopefully, you’re already done with this project. Best of luck! :smiley:

1 Like