I am left with passing user Story 8 in order to finish the my pomodoro project. I dont know what is wrong, I used moment().format(“mm:ss”) to format my time. It keeps telling me time-left is not formatted correctly: expected '00' to equal '60'. I am getting real frustrated here as i have been stuck on this, please any help will be appreciated.
Welcome to the forum @jonathanudeh
So the forum can assist please post your full code.
Use the following method to post code to the forum:
- On a separate line type three back ticks.
- On a separate line paste your code.
- On the last line type three back ticks. Here is a single back tick `
Happy coding
Here is my code, hope i didn’t misuse the comments 
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
session: 25,
break: 5,
time: 25 * 60 * 1000,
mode: "Session",
isTimerRunning: false,
isItBreakTime: false
}
this.handleReset = this.handleReset.bind(this);
this.handleBrkIncrement = this.handleBrkIncrement.bind(this);
this.handleBrkDecrement = this.handleBrkDecrement.bind(this);
this.handleSessIncrement = this.handleSessIncrement.bind(this);
this.handleSessDecrement = this.handleSessDecrement.bind(this);
this.handlePlayPause = this.handlePlayPause.bind(this)
}
componentDidUpdate(prevProps, prevState) {
if(prevState.time <= 0 && prevState.mode === "Session" && prevState.isTimerRunning) {
//when time is at 0 and mode is session it switches mode to break and plays the sound to indicate
this.setState({
time: this.state.break * 60 * 1000,
mode: "Break",
isItBreakTime: true
})
this.audio.play()
}
//when time is at 0 and mode is break it switches the mode to session and plays sound to indicate
if(prevState.time <= 0 && prevState.mode === "Break" && prevState.isTimerRunning) {
this.setState({
time: this.state.session * 60 * 1000,
mode: "Session",
isItBreakTime: false
})
this.audio.play()
}
}
handleBrkIncrement() {
//To increase the break value
if (this.state.isTimerRunning) {
//Here if the timer is running you can't increase the break value
this.setState({ break: this.state.break})
} else {
if(this.state.isItBreakTime) {
//Here if the timer is paused while the mode is on break or while it's break time and you increase the break value it reflects on the timer
this.setState({
break: this.state.break >= 60 ? this.state.break : this.state.break + 1,
time: (this.state.break * 60 * 1000) + 1000 * 60
})
} else {
//here if the timer is paused but it isn't break time yet the break value will increase if pressed but not reflect on the timer
this.setState({
break: this.state.break >= 60 ? this.state.break : this.state.break + 1
})
}
}
}
handleBrkDecrement() {
//To reduce the break value
if (this.state.isTimerRunning) {
//Here if the timer is running you can't reduce the break value
this.setState({ break: this.state.break})
} else {
//Here if the timer is paused while the mode is on break or while it's break time and you reduce the break value it reflects on the timer
if(this.state.isItBreakTime) {
this.setState({
break: this.state.break <= 1 ? this.state.break : this.state.break - 1,
//this is so when the break value is at 01:00 it won't reduce further causing it to go over to session
time: ((this.state.break * 60 * 1000) - 1000 * 60) <= 0 ? (this.state.break * 60 * 1000) : ((this.state.break * 60 * 1000) - 1000 * 60)
})
} else {
//here if the timer is paused but it isn't break time yet the break value will increase if pressed but not reflect on the timer
this.setState({
break: this.state.break <= 1 ? this.state.break : this.state.break - 1
})
}
}
}
handleSessIncrement() {
//To increase the session value
if (this.state.isTimerRunning) {
//Here if the timer is running you can't increase the session value
this.setState({
session: this.state.session
})
} else {
if(this.state.isItBreakTime) {
//here if the timer is paused but it isn't session time yet the session value will increase if pressed but not reflect on the timer
this.setState({
session: this.state.session >= 60 ? this.state.session : this.state.session + 1
})
} else {
//Here if the timer is paused while the mode is on session or while it's session time and you increase the session value it reflects on the timer
this.setState({
session: this.state.session >= 60 ? this.state.session : this.state.session + 1,
time: (this.state.session * 60 * 1000) + 1000 * 60
})
}
}
}
handleSessDecrement() {
//To reduce session value
if (this.state.isTimerRunning) {
//Here if the timer is running you can't reduce the session value
this.setState({
session: this.state.session
})
} else {
if(this.state.isItBreakTime) {
//here if the timer is paused but it isn't session time yet the session value will reduce if pressed but not reflect on the timer
this.setState({
session: this.state.session <= 1 ? this.state.session : this.state.session - 1
})
} else {
//Here if the timer is paused while the mode is on session or while it's session time and you reduce the session value it reflects on the timer
this.setState({
session: this.state.session <= 1 ? this.state.session : this.state.session - 1,
//this is so when the session value is at 01:00 it won't reduce further causing it to go over to break
time: ((this.state.session * 60 * 1000) - 1000 * 60) <= 0 ? (this.state.session * 60 * 1000) : ((this.state.session * 60 * 1000) - 1000 * 60)
})
}
}
}
handleReset() {
clearInterval(this.interval)
this.setState({
session: 25,
break: 5,
time: 25 * 60 * 1000,
mode: "Session",
isTimerRunning: false,
isItBreakTime: false
})
this.audio.pause()
this.audio.currentTime = 0
}
handlePlayPause() {
if(this.state.isTimerRunning) {
//if timer is running and you press it it pauses timer
clearInterval(this.interval)
this.setState({isTimerRunning: false})
} else {
//if timer is not running or paused it starts or resumes timer
this.interval = setInterval(() => this.setState({
time: this.state.time - 1000,
isTimerRunning: true
}), 1000)
}
}
render() {
return (
<div>
<h1>Pomodoro Clock</h1>
<h2>25 + 5 Clock</h2>
<Display
break={this.state.break}
session={this.state.session}
reset={this.handleReset}
breakIncrease={this.handleBrkIncrement}
breakDecrease={this.handleBrkDecrement}
sessionIncrease={this.handleSessIncrement}
sessionDecrease={this.handleSessDecrement}
//used moment to format timer
time={moment(this.state.time).format('mm:ss')}
playPause={this.handlePlayPause}
mode={this.state.mode}
isTimerRunning={this.state.isTimerRunning}
/>
<audio
id="beep"
src="https://s3-us-west-1.amazonaws.com/benjaminadk/Data+synth+beep+high+and+sweet.mp3"
ref={ref => this.audio = ref}
></audio>
</div>
)
}
}
class Display extends React.Component {
render() {
return (
<div>
<div id="break-container">
<div id="break-label">Break Length</div>
<button id="break-decrement" onClick={this.props.breakDecrease}>↓</button>
<div id="break-length">{this.props.break}</div>
<button id="break-increment" onClick={this.props.breakIncrease}>↑</button>
</div>
<div id="session-container">
<div id="session-label">Session Length</div>
<button id="session-decrement" onClick={this.props.sessionDecrease}>↓</button>
<div id="session-length">{this.props.session}</div>
<button id="session-increment" onClick={this.props.sessionIncrease}>↑</button>
</div>
<hr></hr>
<h1 id="timer-label">{this.props.mode}</h1>
<h1 id="time-left">{this.props.time}</h1>
<button id="start_stop" onClick={this.props.playPause}>{this.props.isTimerRunning ? <span></span> : <span>▶</span> }</button>
<button id="reset" onClick={this.props.reset}>⟲</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("clock"))
@Teller that any idea on how I can pass test #8
time-left is not formatted correctly: expected ‘00’ to equal ‘60’
If I try to set the Session Length time to 60 the time-left goes from 59 to 00 and then to 01 where it stops. It looks like it is moment doing it.
console.log(moment(60).format('mm:ss')) // 00:00
@lasjorg I fixed solved one part of it, now it stops at 00 and no longer goes to 01. But no matter what what I try 60minutes still doesn’t render as 60:00, it always shows up as 00:00 i.e in hour format(01:00:00).
Found this on stackoverflow but it shows up as invalid date on my timer, I think it’s cause it’s uses template literal so moment sees it as a string, though on my console it shows as 60:00 which is what I need to pass the test
var d = moment.duration(3600000); // in ms
// slice used for add leading zero
var str = `${d.hours() * 60 + d.minutes()}:${('0' + d.seconds()).slice(-2)}`;
Any idea on how I can make this work?
this is the link to the project on codepen
https://codepen.io/jonathanudeh/pen/OJeVZbo?editors=0011