Now I’m working on my version of 25 + 5 Clock, this is my version on codepen: https://codepen.io/faber_g/pen/WNJOOwp
And this is example from Freecodecamp and tasks to complete: https://codepen.io/freeCodeCamp/full/XpKrrW (example)
The main idea of this timer is when timer countdown to "00:00" it should switch between "Break" and "Session" cycles. I do it in this way:
<div id="time-left" style={this.state.timerAmount < 60 ? { color: 'red' } : { color: 'black' }}>{this.clockInfo() === "00:00" ? this.changeName() : this.clockInfo()}</div>
The problem of my code is that it doesn't countdown to "00:00" or it switchs too fast, so you can only see "00:01" and then it changes to new cycle.
First in my function this.changeName() I go with this code, but it swithes too fast, so you can not see "00:00":
changeName() {
if (this.state.timerAmount === 0 && this.state.timerName === 'Session') {
this.playSound();
setTimeout(() => {this.setState(state => ({
timerAmount: this.state.breakMinutes * 60,
timerName: 'Break'
})); },2000);
}
else if (this.state.timerAmount === 0 && this.state.timerName === 'Break') {
this.playSound();
this.setState(state => ({
timerAmount: this.state.sessionMinutes * 60,
timerName: 'Session'
})); }
}
Then I've tried by using innerHTML/innerText/innerContent first stay on "00:00" and after that using setTimeout for this.setState to change velue for new cycle with delay, but in this case I get empty element for some time and then it is start new cycle:
changeName() {
if (this.state.timerName === 'Session') {
document.getElementById('time-left').innerHTML = "00:00"
this.playSound();
setTimeout(() => {this.setState(state => ({
timerAmount: this.state.breakMinutes * 60,
timerName: 'Break'
})); },2000);
}
else if (this.state.timerName === 'Break') {
document.getElementById('time-left').innerText = "00:00";
this.playSound();
setTimeout(() => {this.setState(state => ({
timerAmount: this.state.sessionMinutes * 60,
timerName: 'Session'
}));} , 2000);
}
How to make Timer countdown to 00:00, stay on this value for a while and change to another cycle?