Time until 4:20 PM for OBS (HTML/CSS/JS)

[plucky turret]

@cold wing

Bogard Uploaded Some Code

I'm doing a really crusty job learning JS/CSS with this project.
The goal is a countdown display until 4:20 PM but my choice of animations causes margins/borders to change during the animation?
Is there a better CSS method / animation to tackle the visual side?
Why can't I forEach over an array of variables to increment?
Thanks for any ideas/advice.

Uploaded these files to a Gist

420timer.html

View The Gist

For safety reasons we do not allow file attachments.

[cold wing]

I was tempted to just adjust the padding/margin while I adjust the borders but that's a bit too-crusty even for me?

[vestal chasm]

If you don't want stuff to change in size either use a mono-spaced font or give the container a fixed width and center the content

[cold wing]

The text is a separate element, it was dancing with the span when it was a child element.
Now the span is just an absolute positioned element but still cares about padding/margins, which are updating when the border sizes change.
If it wasn't trying to keep the span centered it wouldn't be moving around as the borders swell up/shrink?

I wonder if giving it ample fixed margins/padding would solve the wiggling? 🤔