25 + 5 Clock Not Passing Most #Timer Tests

Tell us what’s happening:
I’m unable to get my React 25 + 5 Clock to pass most of the tests, even though it technically “works”.

  1. The only test I’m able to pass under the #Timer section is #8. Everything else fails; these are the errors I usually get:
  • Timer has not reached 00:00. (If I console.log the minutes and seconds, the timer is reaching 00:00.)

  • Timeout of 2000ms exceeded. I don’t always get this error, and am not sure why it’s appearing. I’m not intentionally using any async/await functions

  • Errors do not reflect what I’ve coded. For example, I get an error that When I click the element with the id of “break-increment”, the value within id=“break-length” increments by a value of 1, and I can see the updated value. expected ‘4’ to equal ‘9’
    But it seems to be working properly when I click the arrows (and I made sure that the corresponding id is actually in “break-length”)

Can anyone point me in the right direction as to why this isn’t working? Most other users who have posted here are getting most of the tests to pass, but most of mine are failing. I’ve tried coding this in Bootstrap and React and am unable to get the tests to pass.

Your code so far

https://replit.com/@AlexCipollone/255-Clock

Your browser information:

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

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

Link to the challenge:

I don’t see where you have posted your code. A link to the project on codepen would be the best.

Sorry about that - that should have been a replit link. Below is a link to the project on codesandbox.io; if that doesn’t work, I’ll try to share via CodePen. (I have a components folder and need to figure out how to get it to work on CodePen.)

Apparently you can’t preview anonymously with codesandbox so I couldn’t run your code. Timer issues are common around this code however:

            sessionInterval = setInterval(()=>{
                setSessionSeconds(nextSecond);
                timeLeft.innerText = sessionMinutes > 9 ? `${nextMinute}:${nextSecond}` : `0${nextMinute}:${nextSecond}`;
                console.log(timeLeft.innerText);
            },1000);

which will run the interval callback after one second but not immediately like you usually want so it’s often done as

setInterval(myCallback, 1000);
myCallback();

to run immediately and then every second.

That may help, but as I said, I couldn’t run it to debug.

Thanks for that - I haven’t had a chance to try your suggestion yet. I’m going to try sharing my Replit one more time. I was able to copy the below link into an incognito browser and view and run my code. Hopefully this link will show once I hit “Reply” (you have to click “Open Website” to view the FCC test script for some reason):

https://replit.com/@AlexCipollone/255-Clock?fbclid=IwAR2M7pUWvXvvRFuDi0Cjgayn309LuG5q1MKiET2KpCcn8z0L6qLY2dCaeds#index.html

I changed one piece of my code (src/components/SessionTimer.jsx, lines 121 - 126) to implement “myCallback”, but the timer counts down to 10 within a second, then behaves normally.

Do not read or write content from/to the DOM. That is not how React works. You reference reactive variables in the JSX and make changes to the variables in the React code. By content, I mean the actual content of the elements (the text).

element.innerText === 'something' > do not do this.
element.innerText = 'something' > do not do this.

Make sure your handlers are on the actual elements with the required ids. Also, make them button elements if they are buttons.

When you pass a callback you only use the name of the function, you never invoke it ()

I would suggest downgrading to React 17 with this project as the tests are known to have issues with React 18 and function components with hooks.

Thank you - using the name of the callback function fixed that issue. I’ve been working on changing my code so it’s not reading/writing content to the DOM.

Hi all,

Sorry for not responding to this sooner -I had to put this project on hold for a few weeks.

I think I’ve refactored my code correctly according to the recommendations made by @lasjorg but my code is still not passing any of the #Timer tests:

  • I’ve removed all “element.innerText” that I had previously used. Any changes that occur with a variable (i.e. “time-left”) happen through useEffect and JSX variables

  • I’ve made sure that my handlers are on the actual elements with the required id’s. For example, if I click the id “session-increment” (with the FontAwesome icon within the id), it increments, but the test isn’t passing

  • Using the name of the callback function has worked properly since first fixing that

  • I recreated the project in React 17 on my local machine and re-uploaded it to Replit

Is there something I’m still not understanding? Here’s the updated link to my Repl: 25 + 5 Clock

Also, the audio tests are failing, but that’s expected since I haven’t worked too much on that code yet.

If I move the ids and event handlers to the buttons (instead of on the i elements) I pass 23 tests (otherwise only 13).

Timer has switched to Break time, but it didn’t start with the correct value.: expected +0 to equal 5

Looks like some odd type coercion. I would look at the template literals for the view that has math operations inside them.

Why do you need this setTimeout? Having the state setter inside a timeout doesn’t seem right. And don’t use Strings for the delay. Yes, it does implicit type coercion but you shouldn’t rely on that.

setTimeout(() => {
  console.log("Timer has reached 00:00")
  setIsBreak(true)
  console.log('Timer done!')
  setIsBreak(true)
  setTimerLabel("Break")
  setSessionSeconds(sessionSeconds + 60)
  setSessionMinutes(defaultSession)
  setDefaultView(breakMinutes > 9 ? `${defaultSession}:0${0}` : `0${defaultSession}:0${0}`)
}, "3000")

The timer logic seems a bit convoluted to me and I’m not sure if I trust the way you are doing derived state (depending on variables that only update between renders). Maybe try using a function updater.

const [sessionSeconds, setSessionSeconds] = useState(60);
const nextSecond = sessionSeconds - 1;
setSessionSeconds(nextSecond);

function updater

setSessionSeconds(sessionSeconds => sessionSeconds - 1);

I haven’t looked much at the code and this isn’t exactly the easiest project to give help with without debugging all the code. I wouldn’t be surprised if people are not able or willing to fully debug the app, it is easier said than done.

Moving the ids and event handlers was a big help - I am also passing most of the tests now.

I keep getting that “Timer has switched to Break time, but it didn’t start with the correct value.: expected 60 to equal 5” error. Moving the position of the setTimerLabel changes the error and the number of tests that pass (usually 21 - 25) at any time. I’m still trying to figure out if the template literals are causing this

The setTimeout was implemented so the label would change when the timer hit 0. I did change the delay from a String to an int, and am experimenting with using it and removing it

Changing to function updaters didn’t seem to make a difference

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