I’m just one user story away from the FCC front end cert >.< I’m passing 28/29 user stories and everything functions properly but I can’t get User Story #8: I can see an element with corresponding id="time-left". NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).
to pass, here is the link to my git repo highlighting the area I think is the problem: https://github.com/rafaelmonroy/pomodoro-clock/blob/master/src/App.js#L90 and here is the link to the live site: https://raf-pomodoro-clock-app.netlify.com/ Thank you in advance if you decide to help CHEERS!
So turns out the problem was with momentjs, it doesn’t allow for time to be rendered as 60:00 , it wraps to 00:00 like a normal clock would. I ended up replacing the way I formatted my time from using moment js to using this function
convertMilliseconds = (ms, p) => {
let pattern = p,
arrayPattern = pattern.split(":"),
clock = [ ],
minutes = Math.floor ( ms / 60000), // 1 Minutes = 60000 Milliseconds
seconds = Math.floor ((( ms % 360000) % 60000) / 1000) // 1 Second = 1000 Milliseconds
// build the clock result
function createClock(unit){
// match the pattern to the corresponding variable
if (pattern.match(unit)) {
if (unit.match(/mm/)) {
addUnitToClock(minutes, unit);
}
if (unit.match(/ss/)) {
addUnitToClock(seconds, unit);
};
}
}
function addUnitToClock(val, unit){
if ( val < 10 && unit.length === 2) {
val = "0" + val;
}
clock.push(val); // push the values into the clock array
}
// loop over the pattern building out the clock result
for ( var i = 0, j = arrayPattern.length; i < j; i ++ ){
createClock(arrayPattern[i]);
}
return clock.join(":")
}
and called it like this in the render section
{this.convertMilliseconds(this.state.sessionLeft, "mm:ss")}
Hope this helps if anyone is having trouble with this.
Happy coding!