25 + 5 Clock (Pomodoro Timer) not passing test 12 (decrease Break Time)

JavaScript
1

This is a WIP, but I’m concerned about why test 12 is failing and setting break time to a negative number or session time to zero.

If I try to set times manually there’s no problem so I do not know what to solve here.

Thank you all in advance.

2

setting break time to a negative number

is cased by this line

this.setState((state) => ({
            breakTime: state.breakTime - 60, <-------
            backupBreakTime: state.backupBreakTime - 60
          }));

and what happen is when state.breakTime = 5 remove 60 from the 5 you will get -55.
so check your logic in


    if (this.state.timerState === "stopped") {
      if (/break/gi.test(e.currentTarget.id)) {
        if (e.currentTarget.value === "-" && this.state.breakTime > 60) {
          this.setState((state) => ({
            breakTime: state.breakTime - 60,
            backupBreakTime: state.backupBreakTime - 60
          }));
        } else if (
          e.currentTarget.value === "+" &&
          this.state.breakTime < 3600
        ) {
          this.setState((state) => ({
            breakTime: state.breakTime + 60,
            backupBreakTime: state.backupBreakTime + 60
          }));
        }
      } else if (/session/gi.test(e.currentTarget.id)) {
        if (e.currentTarget.value === "-" && this.state.sessionTime > 60) {
          this.setState((state) => ({
            sessionTime: state.sessionTime - 60,
            backupSessionTime: state.backupSessionTime - 60
          }));
        } else if (
          e.currentTarget.value === "+" &&
          this.state.sessionTime < 3600
        ) {
          this.setState((state) => ({
            sessionTime: state.sessionTime + 60,
            backupSessionTime: state.backupSessionTime + 60
          }));
        }

i maybe wrong Edit : yes I am wrong
but take a break, add comments, console.log values. you are almost there👍

1 Like
3

awesome looking code. Im havig trouble on the 25+5 timer as well but it looks like you are further ahead than me.

Great job!!

1 Like
4

It can’t be.

I’m storing session and break time as seconds, so when you click on decrease break time by 1 minute, you are actually decreasing it by 60 seconds. Break time isn’t 5 but 300, so to speak.

5

I see your point, I tried to change the values of season to negative by pressing -, but that wasn’t possible, so I thought something changing the innerText to negative.

the - can make breakTime and seasonTime go to negatives after the play ▶ button is pressed.

looking back after all you can change the value to negative when the test runs, so the fallback -that stop the innerText of seasonTime and breakTime from going negative- doesn’t run anymore.

I will take deeper look at your code again hopefully I can find something.

1 Like
6

Thank you for pointing that out, I just corrected it.

I think the problem with the test is that it somehow changes value not by pressing a button, but by directly changing the value of it, which is what is giving me so much trouble.

1 Like
7

I am sorry but I actually can’t figure it out.
but things I found hoping this help you
currentTime do go to the negative as well, and if you hard coded it to be 00.00
while breakTime set to 0 and sessionTime set to 0 it will keep switching between break and session infinitly :sweat: ,not much I know.

oh about the tests, they are open source so you can find them here
freeCodeCamp/curriculum at main · freeCodeCamp/freeCodeCamp (github.com)

1 Like
8

Thank you anyway, you helped me so much already.

I don’t understand your last reply, do you mean there is still some bug that makes it possible to set session or break time to negative?

1 Like
9

no it is actually quite funny not related to negative
when you change the code to

handleState(e) {
...
  reset() {
    clearInterval(this.beginCountDown);
    this.setState({
      timerType:"Session",
      timerState: "stopped",
      sessionTime: 0,  <-----
      breakTime: 0,   <----
      currentTime: 0  <----
    });
  }
...
}

then you press ⏹ then press ▶ it loops infinitly between session and break, btw if you keep the code above and run the tests. it will result in it looping infinitly as well.

about currentTime
if you change

handleState(e) {
...
 render() {
    return (
      <div>
        <CurrentTimer
          currentTimer={this.numberToTime(this.state.currentTime)}
          timerType={this.state.timerType}
        />
        <ControlButtons reset={this.reset} playpause={this.playpause} />
        <Settings
          currentSessionTime={this.state.currentTime} <---
          currentBreakTime={this.state.breakTime}
          handleSettings={this.handleSettings}
        />
      </div>
    );
  }
}

it will display currentTime in Session Time: and you will notice it is going negative

1 Like
10

It is supposed to do that, isn’t it? That’s why I don’t set session and break times to zero with the reset button, you wouldn’t set any timer (all the more reason both timers) to zero seconds.

I’m not able to reproduce that(?). When any time comes to zero, it changes to the other time.

11

I finally solved it!

freeCodeCamp test codes don’t get along too well with the new render method of ReactDOM 18

I replaced

const container = document.getElementById("react-container");
const root = ReactDOM.createRoot(container);
root.render(<Pomodoro />);

with

ReactDOM.render(<Pomodoro />,document.getElementById("react-container"));

(which is deprecated by the way)

and it finally passes the corresponding tests.

2 Likes
12

It is supposed to do that, isn’t it?

yes i was just enjoying the loop

freeCodeCamp test codes don’t get along too well with the new render method of ReactDOM 18

nicely done :clap:, although the course doesn’t teach React v18. opening issue in github repo for discussion, maybe helpful for future test if you want. see you around

13

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