25 + 5 Clock project

Code Feedback
1

I need some help. I don´t know what´s wrong.I´m stuck.
This is my code:

2

not sure perhaps your body element or container needs padding at the top?

3

I want to know what is wrong in the
timer component…
Why the setInterval method does not restart the counter. I want to know how to set up the setInterval method properly.

4

Not too sure about that one

5

Hello, first of all, nice job on your project, I really like it!
I was testing it, and noticed with a console log that the timeLeft variable never goes below 0, and you have one if that will execute when timeLeft is bigger than zero and another one that will execute when timeLeft is less than zero, so when timeLeft is exactly zero nothing happens.
Change the if (timeLeft < 0) to if (timeLeft <= 0) and it should works. :grinning:

6

Hi, thanks for your comments.I tried what you said but still does not work. In fact, I cannot see the results of the test.It takes too long and the page does not respond.Maybe it is my internet connection.

7

It was not your internet connection, it was my bad, with <=, the timer would never reach zero.
I did some changes and it is working here, it still won’t pass the reset button test, I don’t know how to solve that

  useEffect(() => {
    let interval = null;
    if (isRunning && timeLeft >= 0) { // Change > to >=
      setTimeLeft(
        timerType === "Session"
          ? sessionLength * 1000 - elapsedTime // -1000 No need for this - 1000
          : breakLength * 1000 - elapsedTime //- 1000 No need for this - 1000
      );

      interval = setInterval(() => {
        setElapsedTime((elapsedTime) => elapsedTime + 1000);
      }, 1000);
    }
    if (timeLeft < 0) { // Can't be <=, or the timer will never reach zero (my bad)
      // setTimeLeft(0); Unnecessary, you already are changing this 5 lines below
      clearInterval(interval);
      beep.play();
      setBeepPlay(true);
      setElapsedTime(0);
      setTimerType(timerType === "Session" ? "Break" : "Session"); // Unnecessary arrow function
      setTimeLeft(timerType === "Session" ? sessionLength * 1000 : breakLength * 1000); // No need for the + 1000
    }
    if (reset) {
      clearInterval(interval);
      setTimerType('Session')
      setTimeLeft(sessionLength * 1000);
      setElapsedTime(0);
      if(beepPlay) {
        setBeepPlay(false);
        beep.pause();
        beep.currentTime = 0;
      }
    }
    return () => clearInterval(interval);
  }, [reset, isRunning, beepPlay, elapsedTime, beep, breakLength, sessionLength, timeLeft, timerType]);
8

Thanks for your help.But me too, I was not able to solve the problem with the reset button. I made a new project without redux and it is working properly. I will be working in the other one with the redux store. see if I can find a solution.

This is the link to the new one:

9

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