25 + Clock works fully but test won't pass

JavaScript
1

Tell us what’s happening:
Hey everyone.

I hope I’m not going crazy here. My code works perfectly as per the user stories but when I run the tests, Timer #1 just refuses to pass.

I’m getting this message 25 + 5 has paused but time continued elapsing: expected '00' to equal '59'

Your code so far
here’s the code:

Your browser information:

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

Challenge: Build a 25 + 5 Clock

Link to the challenge:

2

Apparently, your reset() is not clearing the timer.

I use useRef() for the timer so I can easily and directly stop the timer as a response to a button click.

  const timer = useRef(null)
  . . .
 const stopTimer = () => {
    clearInterval(timer.current)
    setIsClockRunning(false)
  }

  const startTimer = () => {
    setIsClockRunning(true)
    timer.current = setInterval(countdown, TICK)
  }

  const countdown = () => {
    setTimeLeft(timeLeft => timeLeft - 1)
  }

timeLeft is time left in seconds. Also, you want to think about reducing the number of useEffect methods. When there are multiple useEffect methods, it gets harder to visualize the effects. You really need just one useEffect, i.e., monitor the time left. Like this

  useEffect(() => {
      if (timeLeft < 0) {
        switchClock()
      } else {
        updateDisplay()
      }
    }, [timeLeft]
  )

switchClock() toggles between Session and Break. updateDisplay() converts timeLeft to display format MM:SS. (Note: Actually you can use another useEffect to clearInterval on unmount.)

3

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