How to do minus 1 every second, "Build a 25 + 5 Clock"

I need to do minus 1 every second on the this.state.Clock

here is the code
https://codepen.io/DKPK/pen/eYgEdGz

This is the JS code

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Break: 5,
      Session: 25,
      Clock: "",
      OnOff: false,
      currentTimer: "Session",
    };

    this.DecrementBreak = this.DecrementBreak.bind(this);
    this.IncrementBreak = this.IncrementBreak.bind(this);

    this.DecrementSession = this.DecrementSession.bind(this);
    this.IncrementSession = this.IncrementSession.bind(this);

    this.PutOnAndOff = this.PutOnAndOff.bind(this);
    this.reset = this.reset.bind(this);
    this.convertToTime = this.convertToTime.bind(this);
  }
  convertToTime = (count) => {
    let minutes = Math.floor(count / 60);
    let seconds = count % 60;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    
    seconds = seconds < 10 ? "0" + seconds : seconds;
    return minutes + ":" + seconds;
  };
  PutOnAndOff() {
    if (this.state.OnOff == false) {
      this.setState((state) => ({
        OnOff: true
      }));
    } else {
      this.setState((state) => ({
        OnOff: false
      }));
    }
  }

  reset() {
    this.setState({
      Break: 5,
      Session: 25,
      Clock: "",
      OnOff: false
    });
  }

  DecrementBreak() {
    if (this.state.Break > 1) {
      this.setState((state) => ({
        Break: (state.Break -= 1)
      }));
    } else {
    }
  }
  IncrementBreak() {
    if (this.state.Break < 60) {
      this.setState((state) => ({
        Break: (state.Break += 1)
      }));
    } else {
    }
  }

  DecrementSession() {
    if (this.state.Session > 1) {
      this.setState((state) => ({
        Session: (state.Session -= 1)
      }));
    } else {
    }
  }
  IncrementSession() {
    if (this.state.Session < 60) {
      this.setState((state) => ({
        Session: (state.Session += 1)
      }));
    } else {
    }
  }

  render() {
    this.state.Clock === "" ? this.state.Clock = this.state.Session * 60 : this.state.Clock;
    
    return (
      <div id="Layer">
        <div id="text">
          <h1 id="break-label">Break Length</h1>
          <div id="breakB">
            <button
              class="breakButton"
              id="break-increment"
              onClick={this.IncrementBreak}
            >
              <div id="buttonText">
                <i class="	fas fa-arrow-up"></i> Increment
              </div>
            </button>

            <h1 class="NumberText" id="break-length">
              {this.state.Break}
            </h1>

            <button
              class="breakButton"
              id="break-decrement"
              onClick={this.DecrementBreak}
            >
              <div id="buttonText">
                Decrement <i class="	fas fa-arrow-down"></i>
              </div>
            </button>
          </div>

          <h1 id="session-label">Session Length</h1>
          <div id="sessionB">
            <button
              class="sessionButton"
              id="session-increment"
              onClick={this.IncrementSession}
            >
              <i class="	fas fa-arrow-up"></i> Increment
            </button>

            <h1 class="NumberText" id="session-length">
              {this.state.Session}
            </h1>

            <button
              class="sessionButton"
              id="session-decrement"
              onClick={this.DecrementSession}
            >
              Decrement
              <i class="	fas fa-arrow-down"></i>
            </button>
          </div>
        </div>
        <h1 id="timer-label">{this.state.currentTimer}</h1>
        <div id="container">
          <div id="timer-border"></div>
          <h1 id="time-left">{this.convertToTime(this.state.Clock)}</h1>
        </div>
        <button id="start_stop" onClick={this.PutOnAndOff}>
          {this.state.OnOff == false ? (
            <i id="OnOffT" class="fas fa-play"></i>
          ) : (
            <i id="OnOffT" class="fas fa-pause"></i>
          )}
        </button>
        <button id="reset" onClick={this.reset}>
          <i class="fas fa-redo"></i>
        </button>
      </div>
    );
  }
}
let node = document.getElementById("root");
ReactDOM.render(<Clock />, node);

I tried this

this.state.OnOff && this.state.Clock > 0
      ? window.setInterval(
          this.setState((state) => ({ Clock: (state.Clock -= 1) })),
          1000
        )
      : this.state.Clock;

and I tried this

this.state.OnOff && this.state.Clock > 0
      ? setInterval(function () {
          this.setState((state) => ({ Clock: (state.Clock -= 1) }));
        }, 1000)
      : this.state.Clock;

Hey there,

this is a probably a x-y problem.

Why do you think you “need to do minus 1 every second”?
Why does a pomodoro timer need to do minus 1 every second?
What is your original problem?

Moreover, your code overwrites your whole state with the Clock state. But what happens to all the other state data?

1 Like

When I click the play button It will count down 1 second every second.

When It reaches 00:00 it should switch to the break and the audio should turn on.

But I haven’t come that far yet, because I got stuck on how to make it count down.

This is what I don’t understand.

It’s how I set up how the code works.
Minus 1 = Minus 1 second.

It does minus 1 on the Clock, which is the timer. So when it does minus 1 to the Clock it goes down 1 second every second, but my code didn’t work for this. I’m asking for help on how to reduce the timer, so it does a countdown.

I am doing this (state.Clock -= 60)
And it worked, that’s why I am going to do this.state.Clock -= 1.

60 = 1 minute.
1 = 1 second.

I tried this idea

but it didn’t work.

Tried this now

(setInterval(() => this.state.Clock -= 1, 1000))

it didn’t work,
I took it from this example

this.state.OnOff && this.state.Clock > 0
      ? setInterval((this.state.Clock -= 1), 1000)
      : (this.state.Clock -= 0);

This did reduce it by 1 second, but it didn’t continue.

https://codepen.io/DKPK/pen/eYgEdGz

I don’t know how to make it count down when I tap play.

This is my Code

I have been stuck on this one now for a while, I can’t figure out how to make it work.

Please Help

I have merged all of your posts together.
Please stop creating duplicate posts for the same project.

As to your question, I feel like this stackoverflow post should help more.

1 Like

You set the clock as string type and you assign integer type to it, and you also decrement it? I suggest looking through the Moment library which is very helpful in calculating the time and date. Especially is the duration part for this project. Moment.js | Docs

1 Like