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

[samuel40411]

Tell us what’s happening:

Can not pass two test ：

Test No 11 : When I click the element with the id of “reset”, any running timer should be stopped, the value within id=“break-length” should return to 5, the value within id=“session-length” should return to 25, and the element with id=“time-left” should reset to it’s default state.66918ms

Problem : I can pass the test but sometimes I fail it. It seems to be random.

Test No 27 : When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5

Problem : I am sure that the bell will ring when time countdown to zero, but I always can’t pass the test. I notice that there is a little delay time, is this the reason?

Your code so far

a 25 + 5 Clock

Your browser information:

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

Challenge Information:

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

freeCodeCamp.org

[bappyasif]

@samuel40411

I am sure that the bell will ring when time countdown to zero

• countdown doesnt seems to be showing “00.00” rather it immediately shows something else!!

@samuel40411

I notice that there is a little delay time, is this the reason?

• could be, what have you tried?

what is it that you are trying with this snippet

if (this.state.count === 0) {
        this.setState({
          count : 1
        })

happy coding

[samuel40411]

countdown doesnt seems to be showing “00.00” rather it immediately shows something else!!

But this condition only happens when test code run? I just assume that the test code do something to skip it?

could be, what have you tried?

I just listen to it and notice that there is about 0.x second delay. Maybe I am wrong

what is it that you are trying with this snippet

I write this to prevent multi-function from runing at the same time. If I don’t add it, my code seems will cause that problem due to asynchronous matter.

---

After that I do some test, if I add the code to let the sound beep earlier, test still fail:

if (this.state.timeLeft === 2 ) { // or === 1,2,3, 4, 5; I try them all.
    document.getElementById("beep").play();
}

But If I let the sound beep every cycle, test will pass :

if (this.state.timeLeft > 1 ) { or > 2,3, 4, 5;  but if I add the upper limit like this.state.timeLeft <50, test fails.
   document.getElementById("beep").play();
}

So… the code below is my brute force problem-solving, but I still can’t figure out what cause that. So Strange.

5 + 25 clock v2

[bappyasif]

congrats on finishing

@samuel40411

write this to prevent multi-function from runing at the same time. If I don’t add it, my code seems will cause that problem due to asynchronous matter

• did you try using “useEffect” instead?

happy coding