Tell us what’s happening:
I’m can’t figure out how to reset the css animation on the timer and the tomato clock. Specifically, when you increment or decrement the session, the timer numbers should update, the break delay be adjusted. clicking ‘reset’ should reset the timer and tomato clock to the 25 and 5 minute defaults. I use animation delay in the CSS to initialized the timer and tomato clock but this doesn’t work in react. I tried setting the delay in a style element and that did not work either. I found documentation saying, yeah, this doesn’t work.
I found an example of removing and adding classes to reset an animation on csstricks.com and looked for a react alternative. While I might get this to work to reset the timer and clock, it won’t work for setting the delay when the session or break length is changed. I found a react set of add ons for animtions using reactCSSTransitionsGroup, but I’m lost.
I’ve learned a lot on this project and some cool stuff. I hope someone more experienced can help me out. Thanks in advance.
C
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock