25-5 Clock Feedback Time

Hi, here is my project: Session Break Clock

I had an important exam today and I had been studying. But after a couple of days I am back on bussiness.

Code:


import React from 'react'

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      session: 25,
      break: 5,
      sessionOn: "Session didn't get started yet.",
      seconds: "00",
      minutes: 25,
      run: true,
      sessionOrBreak: true
    }
    this.timer = 0;
    this.alarmSound = 0;
    this.decreaseSession = this.decreaseSession.bind(this);
    this.decreaseBreak = this.decreaseBreak.bind(this);
    this.increaseBreak = this.increaseBreak.bind(this);
    this.increaseSession = this.increaseSession.bind(this);
    this.handleStart = this.handleStart.bind(this);
    this.countDown = this.countDown.bind(this);
    this.handleReset = this.handleReset.bind(this);
    this.playSound = this.playSound.bind(this);

    
  }
  
  countDown(){
    let second = this.state.seconds - 1;
    this.setState({
      seconds: String(second).replace(/^[0-9]$/, "0" + second)
    });
    if (this.state.seconds == -1) {
      this.setState({
        seconds: 59,
        minutes: String(this.state.minutes - 1).replace(/^[0-9]$/, "0" + String(this.state.minutes - 1))
      })
    } if (this.state.minutes == 0 && this.state.seconds == 0){
      this.playSound();
    } if (this.state.minutes == -1 && this.state.sessionOrBreak == true){
      this.setState({
        minutes: String(this.state.break).replace(/^[0-9]$/, "0" + String(this.state.break)),
        sessionOrBreak: !this.state.sessionOrBreak,
        sessionOn: "Break in progress.",
        seconds: "00"
      })
      
    } else if (this.state.minutes == -1 && this.state.sessionOrBreak == false){
      this.setState({
      minutes: String(this.state.session ).replace(/^[0-9]$/, "0" + String(this.state.session)),
      sessionOrBreak: !this.state.sessionOrBreak,
      sessionOn: "Session in progress.",
      seconds: "00"
    })
    }
    
  }

  handleStart(){
    if (this.state.run === true){
      this.timer = setInterval(this.countDown, 1000);
      console.log("Clock Working.")
      if (this.state.sessionOrBreak === true) {
        this.setState({
          sessionOn: "Session in progress."
        })
      } else if (this.state.sessionOrBreak === false) {
        this.setState({
          sessionOn: "Break in progress."
        })
      } 
      document.getElementById("play-pause-pic").src = "media/pause.png";
    } else if (this.state.run === false){
      clearInterval(this.timer);
      console.log("Clock Stopped.")
      if (this.state.sessionOrBreak === true) {
        this.setState({
          sessionOn: "Session on hold."
        })
      } else if (this.state.sessionOrBreak === false) {
        this.setState({
          sessionOn: "Break on hold."
        })
      }
      document.getElementById("play-pause-pic").src = "media/play.png";
    }
    this.setState({
      run: !this.state.run
    })
  }
  
  decreaseBreak(){
    if (this.state.run === true){
    if (this.state.break >= 2){
      this.setState({
        break: this.state.break - 1
      })
      if (this.state.sessionOrBreak === false){
        this.setState({
          minutes: String(this.state.break - 1).replace(/^[0-9]$/, "0" + String(this.state.break - 1)),
          seconds: "00"
        })
      }
    }
  }
  }
  increaseBreak(){
    if (this.state.run === true){
    if (this.state.break <= 59){
      this.setState({
        break: this.state.break + 1
      })
      if (this.state.sessionOrBreak === false){
        this.setState({
          minutes: String(this.state.break + 1).replace(/^[0-9]$/, "0" + String(this.state.break + 1)),
          seconds: "00"
        })
      }
    }
  }
  }
  decreaseSession(){
    if (this.state.run === true){
    if (this.state.session >= 2){
      this.setState({
        session: this.state.session - 1,
      })
      if (this.state.sessionOrBreak === true){
        this.setState({
          minutes: String(this.state.session - 1).replace(/^[0-9]$/, "0" + String(this.state.session - 1)),
          seconds: "00"
        })
      }
    }
  }
  }
  
  increaseSession(){
    if (this.state.run === true){
    if (this.state.session <= 59){
      this.setState({
        session: this.state.session + 1,
      })
      if (this.state.sessionOrBreak === true){
        this.setState({
          minutes: String(this.state.session + 1).replace(/^[0-9]$/, "0" + String(this.state.session + 1)),
          seconds: "00"
        })
      }
    }
    
  }
  }
  handleReset(){
    clearInterval(this.timer);
    this.setState({
      session: 25,
      break: 5,
      sessionOn: "Session didn't get started yet.",
      seconds: "00",
      minutes: 25,
      run: true,
      sessionOrBreak: true
    })
    if (this.alarmSound !== 0){
    this.alarmSound.pause();
    this.alarmSound.currentTime = 0;
  }
    console.log("Clock is reset.");
  }
  playSound(){
    this.alarmSound = document.getElementById("beep");
    this.alarmSound.currentTime = 24;
    this.alarmSound.play();
  }
  render(){
    
    return(
      <div className="container">
        <div id="clock">
          <div id="first-line" className="first-line">
        <div id="break-label">Break Length</div>
        <section id="break-section">
        <div className="set-time" id="break-increment" onClick={this.increaseBreak}>
        <img src="media/plus.png" alt="increase-breaktime" width="50px" height="50px"/>
        </div>
        <div className="set-time" id="break-decrement" onClick={this.decreaseBreak}>
        <img src="media/minus.png" alt="increase-breaktime" width="50px" height="50px"/>
        </div>
        </section>
        <div id="session-label">Session Length</div>
        <section id="session-section">     
        <div className="set-time" id="session-increment" onClick={this.increaseSession}>
        <img src="media/plus.png" alt="increase-breaktime" width="50px" height="50px" />
        </div>
        <div className="set-time" id="session-decrement" onClick={this.decreaseSession}>
        <img src="media/minus.png" alt="decrease-breaktime" width="50px" height="50px" />
        </div>
        </section>   
        </div>
        <div id="break-length">{this.state.break}</div>
        <div id="session-length">{this.state.session}</div>
        <div className="mx-auto" id="timer-label">{this.state.sessionOn}</div>
        <div id="time-left">{this.state.minutes}:{this.state.seconds}</div>
        <audio id="beep" src="media/beep.mp3" type="audio/mp3"></audio>
        <div id="start_stop" onClick={this.handleStart}><img id="play-pause-pic" src="media/play.png" alt="play-pause" width="50px" /></div>
        <div id="reset" onClick={this.handleReset}><img id="reset-pic" src="media/replay.png" alt="reset" width="50px" /></div>
        </div>
      </div>
    )
  }
}


export default App;

Instead of copy/pasting your code it would be better if you just gave us the link to your github repo. Also, if you are going for the certification then you should leave the FCC tests in there so we can run them ourselves.

This seems to work fine but it is not keyboard accessible at all :frowning: I suggest you use <button>s for all of the things that look like buttons on your page and you will automatically gain a bunch of accessibility.

1 Like

I upload after I test it myself. I didn’t want it to take up space in the page actually :smiley: .

I thought it would be faster for the people in forum to see my code here directly.

And for the keyboard accesibility, the project didn’t require it but I will actually try to add that, thanks for your feedback!

I added the FCC test btw.

If you ask people to evaluate your project then most people will want to run the tests. Also, it’s just a hamburger menu so I don’t think it will take up much space :slight_smile:

For a very small snippet of code, yes. For an actual project, probably not.

You should strive to make everything you build as accessible as possible. It is implied, there aren’t going to be specific instructions asking you to do this. Try to make accessibility a requirement in everything you do from the beginning. If you plan on doing this stuff professionally it is a big deal.

Thanks for the great advises. I will build projects accordingly.