Many people make very similar statements in their posts. I’ve seen cases where the code actually look really good but somehow fail one or two tests. Even in such cases, the tests are not wrong. There were errors in the code. So I think people should not conclude “my work is perfect, why is it failing tests, there must be something wrong with the FCC tests” too soon. First, assume there’s something wrong with your code. I’m directing this opinion to the FCC community in general.
Now, back to your code. I looked at your code and found problems immediately. Here are some. When the clock is ticking, you should not be able to click the up and down buttons of the session and break length. But I can do that with your clock. When the clock reaches 00:00, it won’t stay for one second. The display immediately switches. The visual appearance of the clock is not a critical aspect of the project, but in your clock, the position of - and + changes when the length becomes less than 2 digits. This behavior is not just about User Interface. It affects the operation. I was clicking minus but when the display gets to 9, all of sudden I’m clicking plus.
In my opinion, your code is unnecessarily complex. For example
countDownSecs(){
this.setState(state => {
const clock = state.sessionClock ? "sessionLength" : "breakLength";
let newClock = {};
const seconds = state[clock].sec==="00" ? "00" : parseInt(state[clock].sec);
const minutes = state[clock].min;
newClock[clock] = {
// EVERY TIME SECONDS REACHES 0 MARK, DECREMENT MIN BY ONE IF DOUBLE DIGIT, IF SINGLE DIGIT, APPEND LEADING 0, OTHERWISE LEAVE AS IS
min: seconds.toString()==="00" && parseInt(minutes) >= 11 ? (parseInt(minutes)-1).toString() : seconds.toString()==="00" && parseInt(minutes) < 11 && parseInt(minutes) > 0 ? "0" + (parseInt(minutes)-1).toString(): minutes,
// IF MINUTES HAS REACHED 0, AND SECONDS IS 0, LEAVE SECONDS AS 0, IF STARTING, CHANGE TO 59, IF IN SINGLE DIGITS APPEND 0, OTHERWISE DECREMENT BY ONE AND UPDATE
sec: seconds.toString()==="00" && minutes.toString()==="00" ? "00" :
seconds.toString()==="00" ? "59" : seconds<11 ? "0" + (seconds-1).toString(): (seconds-1).toString()
}
return newClock;
});
};
The code is very hard to read. It is very difficult to follow the logic, and therefore, very difficult to see if the code is correct or not. Why all these string conversion for testing? You’re putting too much logic inside the countdown function. Don’t mix the internal logic and the display. Why use strings like below?
this.setState({
sessionLength : {
min: "25",
sec: "00"
},
breakLength : {
min: "5",
sec: "00"
},
sessCounterMin: "25",
breakCounterMin: "5",
sessionComplete: false,
sessionClock: true
})
Just use a simple integer for sessionLength and breakLength.
All you really need to do is keep one state variable to track the time left. Decrement this variable every sec and check if the timer is up. If yes, then switch the clock (session to break and vice versa). If no, update the display. Something like this
countdown = () => {
this.setState(
(prev) => ({timeLeft: prev.timeLeft - 1}),
() => {
if (this.state.timeLeft < 0) {
this.switchClock()
} else {
this.updateDisplayValue()
}
}
)
}
The callback function is needed here because the setState method is asynchronous. You need to ensure that the timeLeft value has changed before switching the clock or update the display. The updateDisplayValue method will convert the timeLeft value to MM:SS format. This is only the place you want to deal with string conversion.
My recommendation is not to keep on debugging your current code, but step back to the design level and start from there.