Front End Development Libraries Projects - Build a 25 5 Clock

JavaScript
1

Hello everyone.
I’ve been working on the countdown timer. The tests fail, but the code does everything the tests are supposedly testing for, as far as I can tell! I’m quite new to frontend/backend stuff, so there must be something I’m doing wrong, but I have no idea, because it all seems to be working as intended.
For example, it says my session/break inc/dec buttons aren’t working. However, when I click the increment button (whose id is correct), the new value is shown in the correct display element (I double checked with f12 and everything).
Any insights would be appreciated…

Your code so far

Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

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

Link to the challenge:

2

I’m also no expert at this, but I’d use a line of this sort to update the state:


handleBreakUp(){
    this.setState((state)=>({...state, brk: Math.min(60, state.brk + 1)}));
  }
  handleBreakDown(){
    this.setState((state)=>({...state, brk: Math.max(1, state.brk - 1)}));
  }

Apparently, that guarantees that the state is the one you think it is, and not React running several in a batch

3

Hi Equinox!
Thanks for the insight. It didn’t change the test results… But it’s something to look at nevertheless. I’ll keep on trucking tomorrow.

4

Using react 18, you may or may not have problems with the tests your code is currently failing (all except timer test #14 should pass on a good project I believe). You can try using react 17 and re-running the tests and you may pass some of them, but I believe there is an actual problem in the code and not just a react 17/18 problem.

What seems to be the problem since you are having start/stop issues and off-by-one issues on these tests is that you have an off-by-one-render problem between what you think your code is doing and what your code is doing. These are usually indicated by failures like timer test #9. In this project it is quite often caused by a call to setInterval() running one second after you think it is or by a render not happening right away when you think it should. You can begin to track the problem by logging times from your buttons and display updates so that you can see if there are 2 seconds elapsing from when you start a countdown to when the display changes.

The advice to set state with the function form is good, but not because it will prevent batching, which it actually allows. This will just avoid state mutating affects that are bad to debug.

5

It turns out (after about 4 hours of investigation) that I had accidentally put the onClick property of my reset button in the font-awesome icon instead of in the button itself. As such, I didn’t see a difference, since the icon covers all but a sliver of the edge of the button. However, pressing the button itself does nothing! And so the tests cascaded into failure after failure and I got only 16/29. Fixing the onClick property pushed me to 29 immediately.

This was with React 18 too, so I’m not sure where that bug came from.
Thanks for your help!

6

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