Front End Development Libraries Projects - Build a 25 5 Clock

Tell us what’s happening:
I am having issues implementing the pause function for the Pomodoro Clock. It’s lines 51 - 93 in the CodePen.
I know it needs to utilize the clearInterval, but where do I put the clearInterval part (currently lines 89-91)?
In my function I know I need to clearInterval if timerOn is true, and I have to initialize interval to call it outside the if statement on line 62 (this if statement starts the whole timer process, going from timerOn false => true).

I think the current problem is that every time I hit play/pause, I will re-initialize interval to an empty variable, so I won’t clear the interval timer inside the if statement. But then if I put clearInterval inside the if statement on line 62, clearInterval won’t trigger when going from timerOn true => false on the next click.

Any advice on how to position the clearInterval, to pause the timer, would be much appreciated. Thanks!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock

Link to the challenge:

1 Like
  • you can keep “interval” in a “state variable” and use it from outside of that “timer function scope” as you like it.

from your codepen comments

How do I make the clear Interval clear the timer, but still have interval initialized outside the if statement?

  • which if block are you referring to here?!

I’m referring to the line 62 if (!timerOn) statement. Because my main problem is being able to stop the interval function that starts the timer, and that function sits inside this if statement.

I’ll try using it as a state variable. Could I begin with setState as just blank e.g. [interval, setInterval] = React.useState(“”), and then when it comes to line 64, setInterval and provide the function in there? Can your state be a function that returns ? I hope my questions make sense.

You are redeclaring the interval variable inside the if statement.

You can’t scope it to the if statement and you probably don’t want it scoped to the handler either, as you might need to use it outside it (e.g. if you want to clear the interval in the reset). It can be a state variable but it doesn’t have to be, you can declare it completely outside the components and it should still work.

Thank you, I found a solution by changing the scope!

Could you further help with the final couple of tests? My current code is passing all but the third and second to last tests about the Audio clip. I don’t understand why because I’ve included the

One of the tests says there’s a timeout, and particularly on test 11/29 and a few of the 20s/29 they take over a minute, sometimes two to check. I don’t know if this is affecting the tests timing out and not passing? Current code: https://codepen.io/tdoherty92/pen/ExOjROb

Thank you in advance!

Inspect the audio element source. Now look at the docs for HTMLMediaElement and see if you can figure out why it is what it is in the DOM.

Hint: You want the src property on the object returned by the Audio constructor for the audio element.

You are missing an id.

You need to reset the duration inside the reset function. You might also want to clear the interval as well.


Not sure fixing that will actually let you pass the tests but it is a start at least.

Also, the audio file you are using seems to load pretty slowly so maybe just use the one from the example project.

https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav

I would suggest you use the audio file directly as you are now and remove the state for it. Then add a ref to the audio element so you can call the methods on the element.

As for the id. It was just confusing me that you are passing both an id and a type prop to one of the Length components but not using the id prop.

The useEffect cleanup function should be able to handle the clear interval as long as the reset function is changing the dependencies and causing it to rerun.

The date code you have for the clock seems to be messing with the ability of the test to hack the timer and I’m also not really sure what the point of it is. If I remove it the tests complete much faster.

onBreak needs to be included in the useEffect dependency array.


If I fix the audio, remove the date code, and fix the dependency array, I pass all the tests.

Thanks for your patience helping me :slight_smile: current status is, the date code is fixed and looks ok, fixed the dependency in useEffect, but audio is still tripping me up.

if I don’t have audio in the state (commented out line 10), then i have to define the audio file in one of the methods like line 12 to play the alarm, with a ref attribute in the audio HTML tag as you said.

I have put an if statement in line 14 inside the play method (line 12) so that the audio file doesn’t constantly play. I assume the audio tag needs to ref both the play method and the reset method (line 85), doesn’t it? So I’d have to have two ref attributes?
When I try this, having a ref to resetTime does not even let the play/controlTime method start. So, I can’t reference reset in the audio tag. It just feels like having the audio in state is the more natural position for it since it’s being used in multiple methods.

If you could point me a little in the right direction that would be great. Just the last two tests remaining. Thank you so much.

Update: I am 28/29 now, with an audioRef going on. For some reason, it’s just the #Audio 1st test that isn’t passing. Reset function is sorted.

Remove the if statement. The playBreakAlarm function is already called inside a condition that is using the state from the updater function. Also, you are not calling it () in the if/else.

Amazing. Completed, thank you so much :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.