25 + 5 Clock Project - So Close! Need Help (27/29)

JavaScript
1

Hi all,

I’ve been battling this thing for a week now. I finally got down to 27/29 testing correctly. Not understanding why these two are failing:

Capture
Capture978×592 144 KB

Can anyone offer some advice or nudges?

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakLength: 5,
      sessionLength: 25,
      minutes: 25,
      seconds: 0,
      isPaused: true,
      buttonStatus: "START",
      status: "SESSION",
      color: 'btn btn-success m-1'
    };
    this.handleBreakClick = this.handleBreakClick.bind(this);
    this.handleSessionClick = this.handleSessionClick.bind(this);
    this.handleStartStopClick = this.handleStartStopClick.bind(this);
  }

  handleBreakClick(direction) {
    if (this.state.buttonStatus === "START") {
      if (this.state.breakLength === 1 && direction === "decrease break") {
        this.setState({
          breakLength: 1
        });
      } else if (
        this.state.breakLength === 60 &&
        direction === "increase break"
      ) {
        this.setState({
          breakLength: 60
        });
      } else {
        switch (direction) {
          case "increase break":
            this.setState((prevstate) => ({
              breakLength: prevstate.breakLength + 1
            }));
            break;
          case "decrease break":
            this.setState((prevstate) => ({
              breakLength: prevstate.breakLength - 1
            }));
            break;
          default:
            this.state = {
              breakLength: 5
            };
        }
      }
    }
  }

  handleSessionClick(direction) {
    if (this.state.buttonStatus === "START") {
      if (this.state.sessionLength === 1 && direction === "decrease session") {
        this.setState({
          sessionLength: 1
        });
      } else if (
        this.state.sessionLength === 60 &&
        direction === "increase session"
      ) {
        this.setState({
          sessionLength: 60
        });
      } else {
        switch (direction) {
          case "increase session":
            this.setState((prevstate) => ({
              sessionLength: prevstate.sessionLength + 1,
              minutes: prevstate.minutes + 1
            }));
            break;
          case "decrease session":
            this.setState((prevstate) => ({
              sessionLength: prevstate.sessionLength - 1,
              minutes: prevstate.minutes - 1
            }));
            break;
          default:
            this.state = {
              sessionLength: 25
            };
        }
      }
    }
  }

  handleStartStopClick(button) {
    if (this.state.isPaused === true) {
      this.setState({
        isPaused: false,
        buttonStatus: "STOP",
        color: 'btn btn-danger m-1'
      });
      this.sessionInterval = setInterval(() => this.sessionTick(), 1000);
    } else if (this.state.isPaused === false) {
      this.setState({
        isPaused: true,
        buttonStatus: "START",
        color: 'btn btn-success m-1'
      });
      clearInterval(this.sessionInterval);
    }
  }

  handleResetClick(button) {
    document.getElementById("beep").pause();
    document.getElementById("beep").currentTime = 0;
    clearInterval(this.sessionInterval);
    this.setState({
      breakLength: 5,
      sessionLength: 25,
      minutes: 25,
      seconds: 0,
      isPaused: true,
      buttonStatus: "START",
      status: "SESSION",
      color: 'btn btn-success m-1'
    });
  }

  sessionTick() {
    if (this.state.minutes > 0 && this.state.seconds === 0) {
      this.setState({ minutes: this.state.minutes - 1 });
    }

    if (this.state.minutes >= 0 && this.state.seconds !== 0) {
      this.setState({ seconds: this.state.seconds - 1 });
    } else if (this.state.minutes >= 0 && this.state.seconds === 0) {
      this.setState({
        seconds: 59
      });
    }
    
    if (
      this.state.minutes === 0 &&
      this.state.seconds === 0 &&
      this.state.status === "SESSION"
    ) {
      this.setState({
        status: "BREAK"
        });
      setTimeout(() => {
        document.getElementById("beep").play();
        this.setState({
           minutes: this.state.breakLength,
           seconds: 0
        });
      }, 1000);
    } else if (
      this.state.minutes === 0 &&
      this.state.seconds === 0 &&
      this.state.status === "BREAK"
    ) {
       this.setState({
          status: "SESSION"
        });
      setTimeout(() => {
         document.getElementById("beep").play();
        this.setState({
          minutes: this.state.sessionLength,
          seconds: 0
        });
      }, 1000);
    }
  }

  render() {
    const breakLength = this.state.breakLength;
    const sessionLength = this.state.sessionLength;
    const timer =
      this.state.minutes.toString().padStart(2, "0") +
      ":" +
      this.state.seconds.toString().padStart(2, "0");
    return (
      <main>
        <div id="break-label" className="card p-2 m-1 bg-dark text-white">
          <h4>Break Length</h4>
          <div id="break-length">{breakLength}</div>
          <button
            className="btn btn-secondary m-1"
            id="break-increment"
            onClick={() => this.handleBreakClick("increase break")}
          >
            INCREASE
          </button>
          <button
            className="btn btn-secondary m-1"
            id="break-decrement"
            onClick={() => this.handleBreakClick("decrease break")}
          >
            DECREASE
          </button>
        </div>

        <div id="session-label" className="card p-2 m-1 bg-dark text-white">
          <h4>Session Length</h4>
          <div id="session-length">{sessionLength}</div>
          <button
            className="btn btn-secondary m-1"
            id="session-increment"
            onClick={() => this.handleSessionClick("increase session")}
          >
            INCREASE
          </button>
          <button
            className="btn btn-secondary m-1"
            id="session-decrement"
            onClick={() => this.handleSessionClick("decrease session")}
          >
            DECREASE
          </button>
        </div>

        <div className="card p-2 m-1 bg-dark text-white">
          <h4 id="timer-label">TIMER ({this.state.status})</h4>
          <div id="time-left" className="well">
            {timer}
          </div>
          <button
            className={this.state.color}
            id="start_stop"
            onClick={() => this.handleStartStopClick("start stop")}
          >
            {this.state.buttonStatus}
          </button>
          <button
            className="btn btn-warning m-1 text-black"
            id="reset"
            onClick={() => this.handleResetClick("reset")}
          >
            RESET
          </button>
        </div>
        <audio
          id="beep"
          src="https://d9olupt5igjta.cloudfront.net/samples/sample_files/44824/df41f9b7107d3d0e3bdca7508db883c638a5fb5b/mp3/_Alesis-S4-Plus-Bari-Sax-C2.mp3"
          type="audio/mpeg"
          preload="preload"
        ></audio>
      </main>
    );
  }
}

ReactDOM.render(
  <div>
    <Timer />
  </div>,
  document.getElementById("app")
);

Link to CodePen

2

Never Mind - ! I got it HAHAHAHA! I finally beat it!

I ended up moving the part if statement that checks for minutes and seconds to equal zero into its own function. Then call that function at the beginning of the sessiionTick function with a setTimeout around it.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakLength: 5,
      sessionLength: 25,
      minutes: 25,
      seconds: 0,
      isPaused: true,
      buttonStatus: "START",
      status: "SESSION",
      color: 'btn btn-success m-1'
    };
    this.handleBreakClick = this.handleBreakClick.bind(this);
    this.handleSessionClick = this.handleSessionClick.bind(this);
    this.handleStartStopClick = this.handleStartStopClick.bind(this);
  }

  handleBreakClick(direction) {
    if (this.state.buttonStatus === "START") {
      if (this.state.breakLength === 1 && direction === "decrease break") {
        this.setState({
          breakLength: 1
        });
      } else if (
        this.state.breakLength === 60 &&
        direction === "increase break"
      ) {
        this.setState({
          breakLength: 60
        });
      } else {
        switch (direction) {
          case "increase break":
            this.setState((prevstate) => ({
              breakLength: prevstate.breakLength + 1
            }));
            break;
          case "decrease break":
            this.setState((prevstate) => ({
              breakLength: prevstate.breakLength - 1
            }));
            break;
          default:
            this.state = {
              breakLength: 5
            };
        }
      }
    }
  }

  handleSessionClick(direction) {
    if (this.state.buttonStatus === "START") {
      if (this.state.sessionLength === 1 && direction === "decrease session") {
        this.setState({
          sessionLength: 1
        });
      } else if (
        this.state.sessionLength === 60 &&
        direction === "increase session"
      ) {
        this.setState({
          sessionLength: 60
        });
      } else {
        switch (direction) {
          case "increase session":
            this.setState((prevstate) => ({
              sessionLength: prevstate.sessionLength + 1,
              minutes: prevstate.minutes + 1
            }));
            break;
          case "decrease session":
            this.setState((prevstate) => ({
              sessionLength: prevstate.sessionLength - 1,
              minutes: prevstate.minutes - 1
            }));
            break;
          default:
            this.state = {
              sessionLength: 25
            };
        }
      }
    }
  }

  handleStartStopClick(button) {
    if (this.state.isPaused === true) {
      this.setState({
        isPaused: false,
        buttonStatus: "STOP",
        color: 'btn btn-danger m-1'
      });
      this.sessionInterval = setInterval(() => this.sessionTick(), 1000);
    } else if (this.state.isPaused === false) {
      this.setState({
        isPaused: true,
        buttonStatus: "START",
        color: 'btn btn-success m-1'
      });
      clearInterval(this.sessionInterval);
    }
  }

  handleResetClick(button) {
    document.getElementById("beep").pause();
    document.getElementById("beep").currentTime = 0;
    clearInterval(this.sessionInterval);
    this.setState({
      breakLength: 5,
      sessionLength: 25,
      minutes: 25,
      seconds: 0,
      isPaused: true,
      buttonStatus: "START",
      status: "SESSION",
      color: 'btn btn-success m-1'
    });
  }
  
  newCountDown(){
    if (
      this.state.minutes === 0 &&
      this.state.seconds === 0 &&
      this.state.status === "SESSION"
    ) {
        document.getElementById("beep").play();
        this.setState({
           minutes: this.state.breakLength,
          status: "BREAK",
           seconds: 0
        });
    } else if (
      this.state.minutes === 0 &&
      this.state.seconds === 0 &&
      this.state.status === "BREAK"
    ) {
         document.getElementById("beep").play();
        this.setState({
          minutes: this.state.sessionLength,
          status: "SESSION",
          seconds: 0
        });
    }
  }

  sessionTick() {
    setTimeout(() => {this.newCountDown(),1000});
    if (this.state.minutes > 0 && this.state.seconds === 0) {
      this.setState({ minutes: this.state.minutes - 1 });
    }

    if (this.state.minutes >= 0 && this.state.seconds !== 0) {
      this.setState({ seconds: this.state.seconds - 1 });
    } else if (this.state.minutes >= 0 && this.state.seconds === 0) {
      this.setState({
        seconds: 59
      });
    }
  }

  render() {
    const breakLength = this.state.breakLength;
    const sessionLength = this.state.sessionLength;
    const timer =
      this.state.minutes.toString().padStart(2, "0") +
      ":" +
      this.state.seconds.toString().padStart(2, "0");
    return (
      <main>
        <div id="break-label" className="card p-2 m-1 bg-dark text-white">
          <h4>Break Length</h4>
          <div id="break-length">{breakLength}</div>
          <button
            className="btn btn-secondary m-1"
            id="break-increment"
            onClick={() => this.handleBreakClick("increase break")}
          >
            INCREASE
          </button>
          <button
            className="btn btn-secondary m-1"
            id="break-decrement"
            onClick={() => this.handleBreakClick("decrease break")}
          >
            DECREASE
          </button>
        </div>

        <div id="session-label" className="card p-2 m-1 bg-dark text-white">
          <h4>Session Length</h4>
          <div id="session-length">{sessionLength}</div>
          <button
            className="btn btn-secondary m-1"
            id="session-increment"
            onClick={() => this.handleSessionClick("increase session")}
          >
            INCREASE
          </button>
          <button
            className="btn btn-secondary m-1"
            id="session-decrement"
            onClick={() => this.handleSessionClick("decrease session")}
          >
            DECREASE
          </button>
        </div>

        <div className="card p-2 m-1 bg-dark text-white">
          <h4 id="timer-label">TIMER ({this.state.status})</h4>
          <div id="time-left" className="well">
            {timer}
          </div>
          <button
            className={this.state.color}
            id="start_stop"
            onClick={() => this.handleStartStopClick("start stop")}
          >
            {this.state.buttonStatus}
          </button>
          <button
            className="btn btn-warning m-1 text-black"
            id="reset"
            onClick={() => this.handleResetClick("reset")}
          >
            RESET
          </button>
        </div>
        <audio
          id="beep"
          src="https://d9olupt5igjta.cloudfront.net/samples/sample_files/44824/df41f9b7107d3d0e3bdca7508db883c638a5fb5b/mp3/_Alesis-S4-Plus-Bari-Sax-C2.mp3"
          type="audio/mpeg"
          preload="preload"
        ></audio>
      </main>
    );
  }
}

ReactDOM.render(
  <div>
    <Timer />
  </div>,
  document.getElementById("app")
);
3

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