Tell us what’s happening:
Hello, i’m working on the project of the 25+5 clock. My code needs to be cleaned, but at this time the test#11 doesn’t pass and I don’t know why. The timer works and change, but in the testing, goes to an infinite loop. Any help?
So many thanks
Your code so far
import React, { Component } from 'react';
import beep from '../assets/sounds/BeepSound.wav';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
displayTime: 25*60,
setSessionTime: 25*60,
setBreakTime: 5*60,
session: 'Working',
timerOn: false,
timerID: null
}
this.formatTime = this.formatTime.bind(this);
this.changeTime = this.changeTime.bind(this);
this.countdown = this.countdown.bind(this);
this.reset = this.reset.bind(this);
}
formatTime(time, type){
if(type == "set"){
let min = Math.floor(time / 60);
return(min);
}else{
let min = Math.floor(time / 60);
let sec = time % 60;
return((min<10?"0"+min:min)+":"+(sec<10?"0"+sec:sec));
}
};
changeTime(amount, type){
//Para el breakTime o el sessionTime
if(type == "break"){
//No puede ser menor que cero o mayor que 60
if((this.state.setBreakTime<=60 && amount <0) || (this.state.setBreakTime>=3600 && amount >0)){
return;
}
this.setState((state) => {
// Importante: lee `state` en vez de `this.state` al actualizar.
return {setBreakTime: state.setBreakTime + amount}
});
}else if(type == "display"){
if(((this.state.displayTime+amount)<0) || (this.state.displayTime>=3600 && amount >0)){
return;
}
this.setState((state) => {
return {displayTime: state.displayTime + amount}
});
}else{
//Para setear el tiempo de Display con Session
if((this.state.setSessionTime<=60 && amount <0) || (this.state.setSessionTime>=3600 && amount >0)){
return;
}
if(!this.state.timerOn){
this.setState((state) => {
return {displayTime: state.setSessionTime + amount, setSessionTime: state.setSessionTime + amount}
});
}
//Solo actualiza el display si no está en marcha
}
};
toggleTimer() {
this.setState((state) => {
return {timerOn: !state.timerOn}
});
}
toggleSession() {
if(this.state.session === 'Working'){
this.setState((state) => {
return {session: 'Brake', displayTime: state.setBreakTime}
});
}else{
this.setState((state) => {
return {session: 'Working', displayTime: state.setSessionTime}
});
}
}
countdown(){
if(!this.state.timerOn){
//En intervalos de 1 seg, en ms
this.state.timerID = setInterval(()=>{
this.changeTime(-1, "display");
//Si el contador llega a 0
if(this.state.displayTime == 0){
//Suena el pitido
this.playAudio();
//Si estabamos trabajando, cambiamos a descanso y al revés
this.toggleSession(); //IF I COMMENT THIS LINE, THE TEST#11 PASS
}
}, 1000);
}else{
clearInterval(this.state.timerID);
}
//Cambiamos el bool a el contrario, indicando que el temporizador está funcionando
this.toggleTimer();
};
reset(){
this.stopAudio();
clearInterval(this.state.timerID);
this.setState((state) => {
// Importante: lee `state` en vez de `this.state` al actualizar.
return {displayTime: 25*60,
setSessionTime: 25*60,
setBreakTime: 5*60,
session: 'Working',
timerOn: false,
timerID: null
}
});
};
playAudio() {
let audio = document.querySelector("#beep");
audio.play();
}
stopAudio() {
let audio = document.querySelector("#beep");
if(!audio.paused) {
audio.pause();
audio.currentTime = 0;
}
}
render() {
return(
<div className="appcontainer">
<div className="clockcontainer">
<div className="digitalclock">
<div className="front"></div>
<div className="feet"></div>
<div className="shadow"></div>
</div>
<div id="timer-label" className="timeLabel">{this.state.session}</div>
<div id="time-left" className="time">{this.formatTime(this.state.displayTime, "display")}</div>
<audio id="beep" preload="auto" src={beep} type="audio/wav"></audio>
<div id="controls" className="controlscontainer">
<div className="length-control">
<div className="btn-name" id="break-label">Break Length</div>
<div className="btns">
<div className="btn"><button className="btn-level" id="break-decrement" value="-" onClick={() => this.changeTime(-60, "break")}><i className="fa fa-arrow-down"></i></button></div>
<div className="btn-level" id="break-length">{this.formatTime(this.state.setBreakTime, "set")}</div>
<div className="btn"><button className="btn-level" id="break-increment" value="+" onClick={() => this.changeTime(60, "break")}><i className="fa fa-arrow-up"></i></button></div>
</div>
</div>
<div className="timer-control">
<button id="start_stop" onClick={this.countdown}>{this.state.timerOn?(<i className="fa fa-pause"></i>):(<i className="fa fa-play"></i>)}</button>
<button id="reset" onClick={this.reset}><i className="fa fa-sync"></i></button>
</div>
<div className="length-control">
<div className="btn-name" id="session-label">Session Length</div>
<div className="btns">
<div className="btn"><button className="btn-level" id="session-decrement" value="-" onClick={() => this.changeTime(-60, "session")}><i className="fa fa-arrow-down"></i></button></div>
<div className="btn-level" id="session-length">{this.formatTime(this.state.setSessionTime, "set")}</div>
<div className="btn"><button className="btn-level" id="session-increment" value="+" onClick={() => this.changeTime(60, "session")}><i className="fa fa-arrow-up"></i></button></div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36.
Challenge: Build a 25 + 5 Clock
Link to the challenge:
