Build a 25 + 5 Clock

JavaScript
1

Hi, im having problems on step 23, as it says that “4” should equal to 4.983333333333333 and I have no idea what is wrong with it

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      break: 300,
      timer: 1500,
      isRunning: false,
      breakTime: false
    };
    // this.handleClick() = this.handleClick.bind(this)
    // this.toggleClock() = this.toggleClock.bind(this)
  }
  handleClick = (isIncrement, type) => {
    this.setState((prevState) => {
      if(prevState[type] > 60 && prevState[type] < 3600) {return {[type]: isIncrement ? prevState[type] + 60 : prevState[type] - 60}}
      else if (prevState[type] === 60 && isIncrement) {return {[type]: prevState[type] + 60}}
    }) 
  }
  
  toggleClock = () => {
    this.setState((prevState) => {
      if (!prevState.isRunning) {
        this.interval = setInterval(this.startTimer, 1000);
      } else {
        // Detener el temporizador usando el ID guardado
        clearInterval(this.interval);
      }
      return { isRunning: !prevState.isRunning };
    });
  };
  
 startTimer = () => {
      this.setState((prevState) => {
      if (prevState.timer === 0 && prevState.break === 0) {
        this.reset();
        return {};
      }
      if (prevState.timer > 0 && !prevState.breakTime) {return {timer: prevState.timer - 1}}
      else if (prevState.timer === 0 && prevState.break > 0) {return {break: prevState.break - 1, breakTime: true}}
    }) 
   
    }
 reset = () => {
   clearInterval(this.interval);
   this.setState((prevState) => ({
     timer: 1500,
     break: 300,
     isRunning: false,
     breakTime: false,
   }))
 }
  
  render() {
   const timerMinutes = Math.floor(this.state.timer / 60).toString().padStart(2, "0")
   const timerSeconds = Math.floor(this.state.timer % 60).toString().padStart(2, "0")
   const breakMinutes = Math.floor(this.state.break / 60).toString().padStart(2, "0")
   const breakSeconds = Math.floor(this.state.break % 60).toString().padStart(2, "0")
    return (
      <div>
        <div className="upper">
          <h1>25 + 5 Clock</h1>
          <button id="session-increment" onClick={() => this.handleClick(true, "timer")}>Session +1</button>
          <button id="session-decrement" onClick={() => this.handleClick(false, "timer")}>Session -1</button>
          <button id="break-increment" onClick={() => this.handleClick(true, "break")}>Break +1</button>
          <button id="break-decrement" onClick={() => this.handleClick(false, "break")}>Break -1</button>
          <p id="time-left" className="display">{!this.state.breakTime ? timerMinutes : breakMinutes}:{!this.state.breakTime ? timerSeconds : breakSeconds}</p>
          <p id="session-label">Session:</p>
          <p id="session-length">{this.state.timer / 60}</p>
          <p id="break-label">Break:</p>
          <p id="break-length">{this.state.break / 60}</p>
          <button id="start_stop" className="clockBtn" onClick={this.toggleClock}>{!this.state.isRunning ? "Start Clock" : "Stop Clock"}</button>
          <button id="reset" className="resetBtn" onClick={this.reset}>RESET</button>
          <h1 id="timer-label">{!this.state.breakTime ? "You're on session" : "You're on break"}</h1>
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Clock />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("target-node"));
root.render(<App />);
2

You definitely do not want decimal numbers. I assume you can just floor the label values in the JSX.

The rest is audio tests, which you do not have code for.

Please in the future provide people with an easier way of testing your code. Use an online editor and post the code with the test script.