Unable to Pass 25 + 5 Clock

Tell us what’s happening:
I have a functionally identical clock, but am having issues passing the tests in place.

I’ve updated tag IDs, which match some of the time, but when the tests run, they are giving me weird off-by-a-few errors when going through the automated tests.

Not sure if there’s another way to pass these tests or if I’m doing something remarkably wrong.

Really appreciate your help, love the website, and love the projects. So close to that certification :sweat_smile:

Your code so far
Link to my codepen - https://codepen.io/jpmeyers/full/XWaLxrr

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Build a 25 + 5 Clock

Link to the challenge:

Welcome there,

I cannot tell what the issue is, but some weird behaviour I can see is:

  • Increment the Break to 60
  • Try decreasing it. For me, it gets stuck, and does not allow me to decrease it again

Hope this helps

You’re on the right track.
I don’t have enough skill to read other people’s code, although I made mine with class based react too.

But a few hints I could throw here:

  1. Try putting console.log(this.state) in the render method of your main app, to see how this.state changes as you ran the app. Look for anything that’s not expected.
  2. Read the error message for each error (the first line in the box of the error stack) and try to find out what it really means, and why.
  3. “Timer has not reached 00:00.” might means that the spec does not have enough time to see that the timer reached 00:00, but the app has already reset. I delayed my app to reset 1000ms after it hits zero and it works.
  4. " The audio element with id of “beep” must stop playing and be rewound to the beginning when the element with the id of “reset” is clicked." It’s like youtube player, if you reset the app in the middle of playing it, the track slider (for the audio player) must be brought back to the very beginning of the track. I saw you did something in line 161 with currentTime = 0, but I’m not sure if the implementation details you did is correct or not. Just mark it for the moment, and address the timer has not reached 00:00 first. If you’ve addressed the timer not reached 00:00 error, but this one still gives an error, then quite probably your detail implementation needs to be tweaked.
  5. When a Session is ticking, if I click increment (either with or without stopping it first) the Session length at display is 60:00 instead of just adding 1 minute to the previous display. It might contribute to some of the error message, or not.
  6. When Break is ticking, if I click increment/decrement without stopping it, the Break in display suddenly became 60:00. You might want to adjust that too.
    Compare its behavior with the given model.
  7. I’m not sure why you import jQuery. Just a reminder, React use virtual DOM to change the real DOM. We don’t want to manipulate the real DOM directly. Every DOM manipulation must be done and tracked through this.state.
1 Like

It’s not your fault that ur app doesn’t pass the tests) I had the same problem! The main problem here is in tests. Tests don’t really see that your app comes 00:00 when it actually does. For solving it I had to add two properties in the state - minutes and seconds. After that, the timer should show minutes and seconds properties from the state, not the converted Date object

Also, try adding console.log to functions in the FCC example to see how the app should behave and compare it to your app. I think you will see the difference

1 Like

Super useful and detailed going through all of my points, I really appreciate all the pointers. I’ll go through with a more fine-tooth-comb. I think that 00:00 timer issue might be a big one.

Also good catch on the break and session incrementers… must have something funky there. Cheers!