FFRM Countdown Luxon

by Katarn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.1/luxon.js"></script>
<div id="countdown"></div>

CSS

.ffrm-countdown__container {
  background-image: url(https://cdn.leverade.com/customs/ffrm-countdown-banner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1920 / 240;
  color: #ffffff;
  font-family: monospace;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 50px;
  font-size: 3rem;
}

@media (min-width: 768px) {
  .ffrm-countdown__container {
    font-size: 6rem;
  }
}

@media (min-width: 992px) {
  .ffrm-countdown__container {
    font-size: 9rem;
  }
}

@media (min-width: 1200px) {
  .ffrm-countdown__container {
    font-size: 12rem;
  }
}

.ffrm-countdown__container--finish {
  background-image: url(https://cdn.leverade.com/customs/ffrm-countdown-banner-finish.png);
}

JavaScript

const countdownEndDate = luxon.DateTime.fromISO('2022-07-28T12:00:00+02:00');
const countdownElement = document.querySelector('#countdown');

let countdownInterval = setInterval(updateCountdown, 1000);

function updateCountdown() {
  const countdownDiff = countdownEndDate.diffNow();

  countdownElement.classList.add('ffrm-countdown__container');

  if (countdownDiff.toMillis() <= 0) {
    countdownElement.classList.add('ffrm-countdown__container--finish')
    countdownElement.textContent = '';
    clearInterval(countdownInterval);
    return;
  }

  countdownElement.textContent = countdownDiff.toFormat('h:mm:ss');
}

updateCountdown();