Front End Development Libraries Projects - Build a 25 5 Clock - Only decrement test fail

Hello,

I have been at this for past two days. All my test pass except for the ones that are related to break-length user stories, which are 2,3,6,7,14 and 15. I used DRY principles to use the same code for incrementing and decrementing both session and break length. See partial code snippet below, I have also included a link to CodePen at the bottom:

handleIncrementDecrement = (type, operator) => {
    // if (this.state.startFlag) return;
    let typeToUpdate = type == "Session" ? "sessionLength" : "breakLength";

    if (this.state.timerLabel !== type) {
      if (operator === "-" && this.state[typeToUpdate] > 1) {
        this.setState({ breakLength: this.state[typeToUpdate] - 1 });
      } else if (operator === "+" && this.state[typeToUpdate] < 60) {
        this.setState({ breakLength: this.state[typeToUpdate] + 1 });
      }
    } else {
      if (operator === "-" && this.state[typeToUpdate] > 1) {
        this.setState({
          [typeToUpdate]: this.state[typeToUpdate] - 1,
          timer: this.state[typeToUpdate] * 60 - 60,
        });
      } else if (operator === "+" && this.state[typeToUpdate] < 60) {
        this.setState({
          [typeToUpdate]: this.state[typeToUpdate] + 1,
          timer: this.state[typeToUpdate] * 60 + 60,
        });
      }
    } 
  };

The session-length related tests pass but the break-length tests fail. I am assuming it has something to do with how react renders asynchronously or my setInterval function is not set up properly. I have tried to look at other projects and most of them use hooks which use UseEffect(), I am using classes.

I would appreciate if someone could review and provide me any hints.

Your code so far
FCC React Certification Excercise (codepen.io)

Your browser information:

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

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

Link to the challenge:

Hey Kiran, take into account I’m not really experienced but I finished that project a week ago and passing those tests really gave me a hard time, so let’s see if I learnt something :sweat_smile:

I noticed certain bugs in how the app should function. I liked the fact that you can’t tweak the break or session lengths once the clock is running, however once you hit stop you can get some weird things done.

  1. If a session or break are running and I hit stop I’m allowed to change the time of the current running session or break. Let’s say a session is stopped at 14:35 if I start decreasing the session the timer will change to 24:00 instead of continuing from were it was, idk if that was intended or not.
  2. If a break is running and I hit stop, I can press the increment or decrement session button and get some interesting changes on the break length.
  3. Of course, whenever the break length is changed using session buttons I get a discordance between the actual break timer and the current running break time.
  4. Session’s time can only be changed while in a session.

Now some personal recommendations for what worked for me to get the app to pass the tests.

  1. Using different intervals for breaks and sessions.
  2. I wouldn’t let my timer reach negative numbers.
  3. I feel like the handleIncrementDecrement function is a little bit too elaborated, maybe it’s because I’m a newbie but I preferred the commented one.
  4. If you wanna try out how things are working you could decrease the interval to a 100 or 50 so that it runs smoothly and add console.log(whatever) to check on how your state is changing along the tests and see where you get some differences on expected and output.

Hope it helps!!

1 Like

Hello Yunsuklee,

Thank you taking the time to review my code. I really appreciate it.

  1. If a session or break are running and I hit stop I’m allowed to change the time of the current running session or break. Let’s say a session is stopped at 14:35 if I start decreasing the session the timer will change to 24:00 instead of continuing from were it was, idk if that was intended or not.
  2. If a break is running and I hit stop, I can press the increment or decrement session button and get some interesting changes on the break length.
  3. Of course, whenever the break length is changed using session buttons, I get a discordance between the actual break timer and the current running break time.
  4. Session’s time can only be changed while in a session.
    I have will take your insights and

1 and 2 are intended but 3 and 4 are not intended. I’ll have a look and make the required modifications.

  1. Using different intervals for breaks and sessions.

I thought of this but thought the code would be repeating.

  1. I wouldn’t let my timer reach negative numbers.

I am only checking if the timer has reached below 0, then change the state from “Break” to “Session”. Otherwise, if I check at (timeLeft== 0) the clock is changing from session time 00:01 to break time 25:00 without hitting 00:00.

  1. I feel like the handleIncrementDecrement function is a little bit too elaborated, maybe it’s because I’m a newbie but I preferred the commented one.

The commented code is only half the code, the other half is the top part which I have modified to use dynamic variables. So, I have reduced the code by half and making it reusable.

That being said I was able to figure out what was wrong. It was such a basic mistake :sweat_smile:; I had swapped the Id’s for break increment and decrement in my code. So, the code was working fine but the tests were failing.

I figured out the mistake. I had been using the wrong Id’s for break increment and decrement buttons. I had them swapped and the tests were failing.

1 Like

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