25 + 5 Clock tests 12, 13, 15 not passing

While I was building my 25 + 5 Clock, I noticed that although to me it seems to be working just fine, tests 12, 13, and 15 keep failing; however, test number 14 is not.
When I play the timer to test it manually, I can see it’s working fine: the timer reach 00:00 before switching to “break” or “session” and the new timer starts counting down from the current value in break-length or session-length. The error message doesn’t help much either; all it says is: Cannot read property ‘1’ of null. this happens for the three tests. Would appreciate some help on that, thanks.

Your code so far
Here’s a link to my CodePen: https://codepen.io/Inferno888/pen/qBmbWpo?editors=0110

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64

Challenge: Build a 25 + 5 Clock

Link to the challenge:

After looking at some more examples of people who had the same problem as me, I found out that some have solved it by preventing the timer from going down to 00:00 and starting the next countdown after the timer reaches 00:01; however, that didn’t work for me. I found also another solution that used a custom setInterval method, but it didn’t work in my case too. If anyone is reading this, please help.

Update: as I tried to figure out what’s going on I built the whole thing again from scratch, this time using strings instead of numbers to display all numbers on the screen and using parseInt() whenever I want to increment or decrement anyone of them. Unfortunately, this also didn’t work and I still fail tests 12, 13, and 15 (but not 14) with an error of [cannot read property ‘1’ of null]. Any help would be appreciated, thanks.

Welcome back! It’s been almost 2 weeks since I initially ran into this issue and almost 1 week since I posted this. I am proud to say that I finally found the solution! The whole problem was rooted in the display format, not the logic. The timer worked perfectly fine to the human eye; however, the problem was that when someone was to use the increment or decrement buttons, the value would decrement or increment correctly, but if it’s less than 10, it will display as it is; for example if I kept decrementing the value of the session minutes till it became 8, the time-left element would display 8:00, which the user stories warn against:

NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

What this user story means is AT ALL TIMES the time-left element MUST be in mm:ss. Of course I took care of this when I was building the project, which made so much harder for me to debug this issue as when someone would play the timer, the minutes that were 8:00 would automatically convert to 08:00 because I had the code that does this ONLY in the event handler of the start_stop element, which is why it didn’t correct the display when the event handler of any decrement or increment handler fired; instead, it waited for the person, or the test code in this case, to fire the start_stop handler in order for it to correct the display. As the test suite actually decrements the session length and the break length in order for the testing to finish quickly, a piece of code that would correct the display in the increment, decrement handlers is necessary for the project to pass all the tests. So, the solution was to add that code in all the increment AND decrement handlers so that the display is ALWAYS corrected automatically if the numbers go below 10. Although I’ve already figured out the solution, I thought it’d be a great idea to leave it here for anyone in the future to refer to if they faced that same issue because all the posts I could find never detailed that the problem might be arising from the increment/decrement handlers and only focused on correcting the display in the start_stop handler.

2 Likes

THANK YOU SOOOO MUCH!!!
I was very bothered & couldn find the problem, i would like that the error was clearer, was about to make a new topic but hopefully i found the answer.
Again, thank you so much <3<3<3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.