I am stuck trying to pass these two tests:
- When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of “timer-label” should display a string indicating a session has begun.
Timer has not changed.
Error: Timer has not changed. - When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id=“session-length” element.
Timer has not changed.
Error: Timer has not changed.
code:
class App extends React.Component {
state = {
breakLength: 5,
sessionLength: 25,
timeLeft: 25 * 60000,
timerIsCounting: false,
sessionIsActive: true,
}
displayTimeLeft = () => {
const { timeLeft } = this.state
let minutes = parseInt(timeLeft / 60000)
let seconds = Math.floor(timeLeft % 60000) / 1000
minutes = minutes < 10 ? `0${minutes}` : minutes
seconds = seconds < 10 ? `0${seconds}` : seconds
return `${minutes}:${seconds}`
}
timerStart = () => {
let { timerIsCounting } = this.state
if (!timerIsCounting) {
let timeStart = new Date().getTime()
let timeElapsed = '0.0'
this.interval = setInterval(() => {
let time = new Date().getTime() - timeStart
timeElapsed = Math.floor(time / 100) / 10
if (Math.round(timeElapsed) === timeElapsed) {
timeElapsed += '.0'
let { timeLeft, sessionIsActive, breakLength, sessionLength } = this.state
if (sessionIsActive) {
if (timeLeft > 0) {
this.setState(() => ({
timerIsCounting: true,
timeLeft: timeLeft - 1000
}))
} else if (timeLeft === 0) {
this.audio.play()
this.setState(() => ({
sessionIsActive: false,
timeLeft: breakLength * 60000
}))
}
} else if (!sessionIsActive) {
if (timeLeft > 0) {
this.setState(() => ({
timerIsCounting: true,
timeLeft: timeLeft - 1000
}))
} else if (timeLeft < -1) {
this.audio.play()
this.setState(() => ({
sessionIsActive: true,
timeLeft: sessionLength * 60000
}))
}
}
}
}, 100)
}
}
timerStop = () => {
this.setState(() => ({
timerIsCounting: false
}))
clearInterval(this.interval)
}
breakIncrement = () => {
let { breakLength } = this.state
if (breakLength >= 1 && breakLength < 60) {
this.setState(() => ({
breakLength: breakLength += 1
}))
}
}
breakDecrement = () => {
let { breakLength } = this.state
if (breakLength > 1 && breakLength <= 60) {
this.setState(() => ({
breakLength: breakLength -= 1
}))
}
}
sessionIncrement = () => {
let { sessionLength, timeLeft } = this.state
if (sessionLength >= 1 && sessionLength < 60) {
this.setState(() => ({
sessionLength: sessionLength += 1,
timeLeft: timeLeft += 60000
}))
}
}
sessionDecrement = () => {
let { sessionLength, timeLeft } = this.state
if (sessionLength > 1 && sessionLength <= 60) {
this.setState(() => ({
sessionLength: sessionLength -= 1,
timeLeft: timeLeft -= 60000
}))
}
}
timerReset = () => {
clearInterval(this.interval)
this.audio.pause()
this.audio.currentTime = 0
this.setState(() => ({
breakLength: 5,
sessionLength: 25,
timeLeft: 25 * 60000,
timerIsCounting: false,
sessionIsActive: true
}))
}
render() {
let { sessionIsActive, sessionLength, breakLength, timerIsCounting } = this.state
let { breakIncrement, breakDecrement, sessionIncrement, sessionDecrement, timerReset, timerStart, timerStop, displayTimeLeft } = this
return (
<div className='app-container'>
<div className='pomodoro-container'>
<div className='break-container'>
<label id='break-label'>Break</label>
<div id='break-length'>{ breakLength }</div>
<button
id='break-decrement'
onClick={() => breakDecrement()}
>-</button>
<button
id='break-increment'
onClick={ () => breakIncrement() }
>+</button>
</div>
<div className='session-container'>
<label id='session-label'>Session</label>
<div id='session-length'>{ sessionLength }</div>
<button
id='session-decrement'
onClick={ () => sessionDecrement() }
>-</button>
<button
id='session-increment'
onClick={ () => sessionIncrement() }
>+</button>
</div>
<div className='timer-container'>
<label id='timer-label'>{ sessionIsActive ? 'Session' : 'Break' }</label>
<div id='time-left'>{ displayTimeLeft() }</div>
<button
id='start_stop'
onClick={ timerIsCounting ? () => timerStop() : () => timerStart() }
>{ timerIsCounting ? 'stop' : 'start' }</button>
<audio
id='beep'
ref={ ref => this.audio = ref }
src='https://goo.gl/65cBl1'
/>
<button
id='reset'
onClick={ () => timerReset() }
>Reset</button>
</div>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Thanks in advance for your help!
-best regards
Jose