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;
I suggest you use 
.