Tell us what’s happening:
As far as I can tell, my Pomodoro clock works perfectly, and fulfils the conditions specified in the project description. But when I run the tests on Codepen, only 20 out of 29 pass. This is actually the second Pomodoro clock I have made; the first one was written in pure Javascript. When it failed to pass the tests despite apparently functioning correctly, I decided to try again, this time using React. We are meant to use a front-end framework for the project in any case, and I thought the tests might be more compatible with React. But when I finished my second clock, I found that the tests still failed…
The tests which fail are:
Timer: 1, 9-15
Audio: 1
The only explanation I can think of is that it is something to do with how the timer is updated.
Originally, I used a setInterval of 1000ms to update the timer every second, which - in React at least - seemed to work fine. But as this is potentially inaccurate (since the interval is not always exactly 1000ms), I switched to a setInterval of 10ms which calls an update function. The update function checks whether or not 1000ms has elapsed since the last update, and if necessary updates the timer.
It might be significant that this update function keeps being called whether or not the timer has been stopped (it just doesn’t do anything if the timer status is not set to “running”). Could it be that the tests expect the reset and stop buttons to clear all running intervals? However, my first attempt (using native JS), did clear the running intervals when the timer was stopped, and that still didn’t pass the tests.
I am starting to think that there is something really obvious I have overlooked. But I don’t know what it is. If anyone can help me, I will be immensely grateful.
I have tried clearing the browser cache, but to no avail.
Your code so far:
Here is a link to my project on CodePen:
I have tried to comment my code so that it is as clear as possible what does what.
Your browser information:
User Agent is: Chrome/68.0.3440.84.