Responsive Timer Application built with JS, CSS & HTML

Hi there! Good job

I have some recommendations for you

• you need to stretch the background with background-size: cover

• in my opinion, the calcTimer function is redundant. Instead, you could use the following construction:

let diff = dateToLaunch - today;

function calculateTimer() {
.......
}

window.addEventListener('DOMContentLoaded', () => {
  const timerInterval = setInterval(calculateTimer, 1000);

  if (diff <= 0) {   
    clearInterval(timerInterval)
  }
});

• In each interval tick you declare new variables with functions, this reduces performance

  const days = String(Math.trunc(time / (1000 * 60 * 60 * 24))).padStart(2, 0);
  const hours = String(Math.trunc((time / (1000 * 60 * 60)) % 24)).padStart(2, 0);
  const minutes = String(Math.trunc((time / 1000 / 60) % 60)).padStart(2, 0);
  const seconds = String(Math.trunc((time / 1000) % 60)).padStart(2, 0);

I would make calculations in separate constants. The date calculation would look like this:

const DAYS = 1000 * 60 * 60 * 24;
....
const left = {
  DAYS: null
  .....
}
...
calculateTimer() {
....
left.DAYS = Math.trunc(time / DAYS)

daysValue.textContent = days > 10 ? + days : `0${days}` ;   // use ternar because padStart is experimental
}

I hope my feedback will be useful.

Good luck and fun coding 🤝⌨️