Pomodoro Questions and Feedback

Code Feedback
1

https://br3ntor.github.io/Purple-Pomodoro/

Still needs some tweaks and cleanup but I think it’s passable.
Any feedback is welcome. Think the colors should be tweaked? I want to know what you would do!

Code is ugly and sloppy? Point it out! I don’t mind if the feedback sounds harsh.

If anyone feels like reading, below I will talk/rant about some issues I’ve run into with the timer and progress bar. I don’t think I really need to be concerned about them because of how rare they seem to be but I thought I’d see if anyone had any insights.

To get an accurate timer I first subtract the start time from the time right now in milliseconds. It then divides by 1000 to get seconds that are decimal numbers which I then use Math.floor() on.

    const TIME_LEFT = timerLength - Math.floor((Date.now() - START) / 1000);

On the rare occasion I will get two of the same numbers in a row, like 34 seconds and on the next tick 34 again, but then it will get back on track and next tick will be 32.

If I console log the number, without applying Math.floor(), I see this happens when the first number is something like 34.001 and then the second is something like 34.999.

    console.log((Date.now() - START) / 1000);

dupe
dupe146×596 9.88 KB

Whenever I’m on the tab of my pomodoro the logged numbers are always 34, 35.001, 36.003, 37.002 for example.

When I switch tabs or load a new website on a tab the decimal portion will jump from between .1xx to .9xx but stay consistent after the jump and returns to the lower range (34.002) when the web page tab is reselected.

tab
tab106×528 8.7 KB
<–Tab change behavior

The repeating digits happen very rarely and I’m not sure it has anything to do with the decimal part of the number changing when switching tabs. I can’t seem to recreate the issue consistently.

The other random bug I’ve seen that’s even more rare is sometimes, I think the second if statement of the updateProgressBar() function, if (timeLeft == 0), never evaluates and that causes the circle progress bar not to reset.

It’s kind of a gamble to reproduce the first issue and the second one I can’t seem to reproduce.

I thought I could solve the first with Math.round() but when I switch tabs it would round the number up and I would get a duplicate number from Math.round(13.94) and then Math.round(14.076) using the above picture as an example.

I suppose using Math.round() would solve the issue of rare duplicate numbers when tab has focus. I’ll have to see.

If anyone has any thoughts I’m all ears.

2

If I’m not mistaken some of the issues is because setInterval() is not an accurate timer and depends a lot on what else is happening (see this SO thread for example). In fact, if the version hosted on GitHub pages is the same version, I actually managed to get times that are quite removed from the second in the log by switching tabs and loading other pages (for example, 7.552).

One way (not tested) to potentially get around this is to have setInterval run at much smaller intervals (say, 50 ms) and do something like a simplified game loop:

let ticked = 0; // Keeps track of how many exact seconds has been processed

pomTimer = setInterval(updateClock, 50);

function updateClock() {
  const sigmaTime = Date.now() - START;
  const deltaTime = sigmaTime - ticked;

  /*
   * I'm not sure if there is a chance that deltaTime can be > 1999 ms, but
   * if there is a chance that it can, a for loop may be more appropriate
   */
  if (deltaTime > 1000) {
    // Do things that needs to be done every second.

    ticked++;
  }
}

To be fair, the clock is nicely made as far as I can tell without poking into anything. :smile: So good job on getting it done with a nice design, too! Good luck!

1 Like
3

Appreciate the response, ty!