Issue Description
The test is not passing all the tests but my project is already working. I check every section of it and it seems everything is alright.
Browser Information
Google Chrome
CodePen / React
- Browser Name, Version:Google Chrome Versión 84.0.4147.135
- Operating System: Windows 10
- Mobile, Desktop, or Tablet: Desktop
Your Code / Link to Your Pen
class App extends React.Component {
constructor() {
super();
this.state = {
breakLength: 5,
sessionLength: 25,
timeMinutes: 25,
timeSeconds: "00",
intervalId: null,
timerLabel: "Session",
startOrStop: false,
sessionOrBreak: "session"
};
this.decrementBreakLength = this.decrementBreakLength.bind(this)
this.incrementBreakLength = this.incrementBreakLength.bind(this)
this.incrementSessionLength = this.incrementSessionLength.bind(this)
this.decrementSessionLength = this.decrementSessionLength.bind(this)
this.handlePlay = this.handlePlay.bind(this)
this.intervalFunc = this.intervalFunc.bind(this)
this.handleReset = this.handleReset.bind(this)
this.handleAudioPlay = this.handleAudioPlay.bind(this)
}
decrementBreakLength(){
if(this.state.breakLength === 1){
} else {
this.setState({
breakLength: this.state.breakLength - 1
})
}
}
incrementBreakLength(){
if(Number(this.state.breakLength) === 60){
} else {
this.setState({
breakLength: this.state.breakLength + 1
})
}
}
incrementSessionLength(){
if(Number(this.state.sessionLength) === 60){
} else {
if(Number(this.state.sessionLength) < 9){
this.setState({
sessionLength: Number(this.state.sessionLength) + 1,
timeMinutes: "0" + (Number(this.state.timeMinutes) + 1)
})
} else {
this.setState({
sessionLength: Number(this.state.sessionLength) + 1,
timeMinutes: Number(this.state.timeMinutes) + 1
})
}
}
}
decrementSessionLength(){
if(this.state.sessionLength === 1){
} else if(this.state.sessionLength <= 10){
this.setState({
sessionLength: this.state.sessionLength - 1,
timeMinutes: "0" + (this.state.timeMinutes - 1)
})
} else {
this.setState({
sessionLength: this.state.sessionLength - 1,
timeMinutes: this.state.timeMinutes - 1
})
}
}
handlePlay(){
if(!this.state.startOrStop){
let intervalIdVar = accurateInterval(this.intervalFunc, 1000);
// store intervalId in the state so it can be accessed later:
this.setState({intervalId: intervalIdVar});
} else {
this.state.intervalId.cancel()
}
this.setState({
startOrStop: !this.state.startOrStop
})
}
intervalFunc(){
if(this.state.timeSeconds === "00"){
if(this.state.timeMinutes <= 10 && this.state.timeMinutes !== "00"){
this.setState({
timeSeconds: 59,
timeMinutes: "0" + (Number(this.state.timeMinutes) - 1)
})
} else if(this.state.timeMinutes === "00"){
this.handleAudioPlay("play")
if(this.state.sessionOrBreak === "session"){
this.setState({
sessionOrBreak:"break"
})
} else {
this.setState({
sessionOrBreak:"session"
})
}
if(this.state.sessionOrBreak === "break"){
if(this.state.breakLength > 9){
this.setState({
timeMinutes: this.state.breakLength,
timerLabel: "Break"
})
} else {
this.setState({
timeMinutes: "0" + this.state.breakLength,
timerLabel: "Break"
})
}
} else {
if(Number(this.state.sessionLength) < 10){
this.setState({
timeMinutes: "0" + this.state.sessionLength,
timerLabel: "Session"
})
} else {
this.setState({
timeMinutes: this.state.sessionLength,
timerLabel: "Session"
})
}
}
} else {
this.setState({
timeSeconds: 59,
timeMinutes: Number(this.state.timeMinutes) - 1
})
}
} else {
if(this.state.timeSeconds <= 10){
this.setState({
timeSeconds: "0" + (Number(this.state.timeSeconds) - 1)
})
} else {
this.setState({
timeSeconds: Number(this.state.timeSeconds) - 1
})
}
}
}
handleReset(){
this.state.intervalId.cancel()
this.setState({
breakLength: 5,
sessionLength: 25,
timeSeconds: "00",
timeMinutes: 25,
timerLabel: "Session"
})
this.handleAudioPlay()
}
handleAudioPlay(accion){
var x = document.getElementById("beep");
if(accion === "play"){
x.play();
} else {
x.pause()
x.load()
}
}
render() {
return (
<div className="container">
<div className="external-box">
<h1>Pomodor Clock</h1>
<div className="box">
<div id="break-label">
<h2>Break Length</h2>
<div className="arrows">
<img
id="break-decrement"
src="https://image.flaticon.com/icons/svg/892/892692.svg"
onClick={this.decrementBreakLength}></img>
<h2 id="break-length">{this.state.breakLength}</h2>
<img
id="break-increment"
src="https://image.flaticon.com/icons/svg/892/892692.svg"
onClick={this.incrementBreakLength}></img>
</div>
</div>
<div id="session-label" >
<h2 >Session Length</h2>
<div className="arrows">
<img
id="session-decrement"
src="https://image.flaticon.com/icons/svg/892/892692.svg"
onClick={this.decrementSessionLength}></img>
<h2 id="session-length">{this.state.sessionLength}</h2>
<img
id="session-increment"
src="https://image.flaticon.com/icons/svg/892/892692.svg"
onClick={this.incrementSessionLength}></img>
</div>
</div>
</div>
<div className="timer">
<h2 id="timer-label">{this.state.timerLabel}</h2>
<h2 id="time-left" style={{marginTop:"0px"}}>{this.state.timeMinutes}:{this.state.timeSeconds}</h2>
</div>
<div className="controls">
<div
id="start_stop"
onClick={this.handlePlay}>
<img
src="https://image.flaticon.com/icons/svg/860/860819.svg"></img>
<img
src="https://image.flaticon.com/icons/svg/545/545666.svg"></img>
</div>
<img onClick={this.handleReset}
src="https://image.flaticon.com/icons/svg/2/2269.svg"
id="reset"
></img>
</div>
</div>
<audio src="https://sampleswap.org/samples-ghost/SOUND%20EFFECTS%20and%20NOISES/Bleeps%20Blips%20Blonks%20Blarts%20and%20Zaps/448[kb]bebebebe-beep-beep-bwoop-bwoop.aif.mp3" id="beep"></audio>
</div>
);
}
}
React.render(<App />, document.getElementById('app'));
``` 
