I need help with my project-25+5 clock

hello there,
i’m getting 22/29 for my project.
since i don’t have audio yet (decided to add it in the end).
i have 4 errors on the timer section which i can’t really understand since everything works fine…
my codepen:
https://codepen.io/yogev120/pen/JjWMEpG
thank you :slight_smile: :grinning:

1 Like

Here are things I noticed.

  1. Using variable names that differ only in one letter being lower or upper case is too risky.
this.state = {
     sessiontime:1500000,breaktime:300000,bre:true
      ,sessionTime:25,breakTime:5,changed:true
    };
  1. Having two sets of code for session and break timers make the code harder to track and maintain. I believe it is cleaner to keep just one timer and one inc and one dec and so forth. Use a flag to keep track of the clock state (break is going or session is going). When the timer is up, check the flag and reset the time left to either session length or break length. By keeping just one variable for time left, the logic for testing for starting and stoping the clock gets easier.

  2. When I observe your clock, it looks like the display of 00:00 did not stay for one second. It seems like the display of 00:00 appears but immediately get resets. Errors #12 to #15 are most likely due to this behavior. This was the case for me and several others. Your logic for testing the time left may be okay, but your setState could be problematic. When you update the state based on the current state, you want to use the (prevState) instead of something like

this.setState({breaktime:(this.state.breaktime-1000)}) 

you want

this.setState({breaktime: prev.state.breaktime - 1000})

Also, when you use setState, you want to wait until the states are updated before calling the clock display to change because setState is asynchronous. This is how I did it in my code

  countdown = () => {
    this.setState(
      (prev) => ({timeLeft: prev.timeLeft - 1}),
      () => {
              if (this.state.timeLeft < 0) {
                this.switchClock()
              } else {
                this.updateDisplayValue()
              }             
            }
    )
  }

The function switchClock() changes the state of the clock to SESSION or BREAK. The function updateDisplayValue() converts the time left to MM:SS format. Notice that I’m checking timeLeft < 0. This is ensure that 00:00 stays for 1 sec. My state is initialized like this:

 state = {
    timeLeft: SESSION_INIT_VAL * 60,
    displayValue: "25:00",
    timer_func: null,
    isClockRunning: false,
    breakLength: BREAK_INIT_VAL,
    sessionLength: SESSION_INIT_VAL,
    clockType: SESSION
  }
2 Likes

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