Here is how I built the countdown timer at the top of CodeSwaps

I'm running a promotion and I wanted to make it clearer on the homepage about it. I researched a few different things but it was leading to a lot of unnecessary code bloat and with the solution I tried it was quite expensive to use the unbranded version, so I decided to code it myself.

You can see it working here. Hopefully the code will be useful to someone else here too.

<a class="countdown-wrapper" href="https://www.codeswaps.com/giving-away-1500-dollars/" target="_blank">
  ⚡️ $1500 CodeSwaps Giveaway! 2nd winner in:
  <div id="countdown">
    <div class="countdown-timer">
      <div class="countdown-timer-group">
        <div id="days" class="countdown-timer-digits"></div><span>Days</span>
        </div>
      <div class="countdown-timer-group">
        <div id="hours" class="countdown-timer-digits"></div><span>Hours</span>
      </div>
      <div class="countdown-timer-group">
        <div id="minutes" class="countdown-timer-digits"></div><span>Mins</span>
      </div>
      <div class="countdown-timer-group">
        <div id="seconds" class="countdown-timer-digits"></div><span>Secs</span>
      </div>
    </div>
  </div>
</a>

.countdown-wrapper {
  color: #fff;
  text-align: center;
  display: flex;
  text-decoration: none;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2px 10px;
  background: #000;
  min-height: 60px;
  border-bottom: 1px solid #333;
  animation: slideDown 0.3s;
  animation-delay: 1s;
  animation-fill-mode:forwards, none;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  transform: translateY(-100%);
  opacity: 0;


  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  &:hover,
  &:visited {
    color: #fff;
  }
}

.countdown-timer {
  display: flex;
  margin: 4px 10px 0 10px;
  justify-content: center;

  &-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    min-width: 38px;
  }

  &-digits {
    background: #ffd803;
    color: #141414;
    font-weight: 700;
    padding: 3px 0;
    border-radius: 3px;
    margin: 0 4px;
    display: block;
    width: 100%;
  }

  span {
    font-size: 11px;
    margin-top: 2px;
    display: block;
  }
}

(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  //Change end date as required, next deadline is end of August
  let givesway = "Aug 30, 2021 00:00:00",
    countDown = new Date(givesway).getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
        distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
        document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

      //hide when date is reached
      if (distance < 0) {
        let countdownBanner = document.getElementById("countdown-banner");
        countdownBanner.style.display = "none";

        clearInterval(x);
      }
      //seconds
    }, 0)
  }());