flexbox

Hi Eugene! 👋

Firstly this looks great, and I love that you've added your own spin to the design with the Christmas theme.

The setInterval in your code is probably not behaving quite as you expect. The second argument is the delay between executions of the callback in milliseconds. So for example:

setTimeout(() => {
  console.log('Hi Eugene');
}, 5000)

Would print Hi Eugene to the console every 5000ms (or 5s) for ever (and ever and ever...).

You've set the delay to Infinity which by some strange twist of JavaScript logic is converted into 0, which means you're executing the callback as soon as possible at the time, but realistically probably 100s or 1000s of times a second.

Since you only need the clock to tick every second, you can change Infinity to something a little less demanding like 1000 or perhaps 500 if you want the clock to tick closer to the actual time your system clock ticks. Anything lower than 60 is redundant because that's likely to be your screen refresh rate, so you wouldn't notice it at all.

You can stop the setInterval with clearInterval. This StackOverflow post has some good examples.

You should also grab your clock's DOM elements outside of the callback, because otherwise you're retrieving them from the page every time the callback runs (which is an expensive operation for JavaScript). Something like this will be a lot more efficient:

const days = document.querySelector('#days');
const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
const seconds = document.querySelector('#seconds');

setInterval(e => {
  // rest of code 
}, 1000);

OK, I hope that all makes sense. Please let me know if you have any questions!