Critique my Pomodoro clock!

Project Link - https://codepen.io/tlannoye11/full/wdEPxK/

One thing I’ve noticed but cannot figure out how to correct is on the Break timer. The green outline from the session timer appears to be very faintly surrounding the red outline from the break timer, even though the code to draw that outline should be doing either one but not both. Not sure what’s going on there or how to correct it.

EDIT: Another thing I couldn’t figure out was why I was able to define the height/width of my canvas in the HTML, but not in the CSS.

Any other feedback/bug reports would be very helpful. Thanks!

Hey, when I pause and restart the session timer the filling animation is not visible anymore.
And after finishing the first minute, it starts another session of an hour instead of a break (I am guessing that is what is supposed to happen).

I am just reporting as I don’t have the knowledge yet to come up with solutions. Good luck!

I was just thinking is there are border on the clipped fill rectangle. That might be causing the outline after the onBreak changes the fillStyle. Just brainstorming.

Fixed the bug with the fill animation going away after a pause/restart. The formula to determine how much to fill with each second was using the current paused time, which was zero in some cases, as opposed to the original starting time, which cannot be zero. This caused some bad divide-by-zero math.

Still no idea what’s up with the border on the break timer.

I took a look at your code and think it might be that you need to re-draw the timer when it is all filled up?
So in resetTimer, call drawTimer, then the border gets re-drawn in the right color and the problem should be solved.

Oh, and I think some of your comments need an update. Especially for some of the if-statements. I can see you check something, but why are you checking it? Putting that in the comments prevents repeated debugging of the same problems.

I put a call to drawTimer() within resetTimer, but it didn’t seem to change anything.

When I commented out the entire section that draws the outline, it seems to work fine, which is odd because it calls the same line on session or break.

I did also fix another bug I found where the speed of the filling animation would not change for sessions/breaks of different times.