countdown.js

const Countdown = {
  init() {
    this.container = document.querySelector('.countdown');
    if ( !this.container || !this.container.dataset.targetDate ) {
      return;
    }
    this.parts = {
      days: document.querySelector('.countdown__part--days'),
      hours: document.querySelector('.countdown__part--hours'),
      minutes: document.querySelector('.countdown__part--minutes'),
      seconds: document.querySelector('.countdown__part--seconds')
    }
    this.targetDate = new Date(this.container.dataset.targetDate);
    this.update();
    window.setInterval(this.update.bind(this), 1000);
  },

  timeRemaining() {
    const now = new Date();
    const difference = Date.parse(this.targetDate) - Date.parse(now) + now.getTimezoneOffset() * 60 * 1000;

    if (difference <= 0) {
      window.location.replace('/login');
    }

    const seconds = Math.floor( (difference / 1000) % 60 );
    const minutes = Math.floor( (difference / 1000 / 60) % 60 );
    const hours = Math.floor( (difference / (1000 * 60 * 60)) % 24 );
    const days = Math.floor( difference / (1000 * 60 * 60 * 24) );

    return {
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  },

  update() {
    const remaining = this.timeRemaining();
    for (const key in remaining) {
      if (remaining.hasOwnProperty(key)) {
        const count = remaining[key];
        if (this.parts[key]) {
          this.parts[key].innerHTML = `<strong>${count}</strong> ${this.getLabel(key, count)}`;
        }
      }
    }
  },

  getLabel(key, count) {
    let label = key.substring(0,1).toUpperCase() + key.substring(1);
    if (count === 1) {
      label = label.replace(/s$/, '');
    }
    return label;
  }
};

export default Countdown;

countdown.scss

// SASS Variables and Mixins imports excluded for clarity.

.countdown {
  background-image: $gradient__aqua;
  color: $color__white;
  padding: 0 $space__4;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
  height: 100%;
  min-height: -webkit-fill-available;

  &__article {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__header {
    h1 {
      font-size: $font_size__xl;
    }
  }

  @include breakpoint(large) {
    &__article {
      flex-direction: row;
      align-items: center;
    }

    &__header,
    &__body {
      width: calc(50% - #{$space__4});
    }

    &__header {
      margin-right: $space__4;

      h1 {
        font-size: $font_size__xxl;
        margin: 0;
      }
    }

    &__body {
      margin-left: $space__4;
    }
  }

  &__parts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "days days days"
      "hours minutes seconds";
    column-gap: $space__3;
    row-gap: $space__3;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  &__part {
    font-size: $font_size__sm;
    font-weight: $font_weight__light;

    strong {
      border-bottom: 1px solid $color__baby_blue;
      display: block;
      font-size: $font_size__xxl;
      font-weight: $font_weight__bold;
      line-height: 1;
      padding-bottom: $space__2;
      margin-bottom: $space__2;
    }

    &--days {
      font-size: $font_size__md;
      grid-area: days;

      strong {
        font-size: 168px;
      }
    }

    &--hours {
      grid-area: hours;
    }

    &--minutes {
      grid-area: minutes;
    }

    &--seconds {
      grid-area: seconds;
    }
  }
}

countdown.twig

<div class="countdown" data-target-date="{{ siteLaunch.dateAndTime | date("D M d Y H:i:s") }} UTC">
  <article class="container countdown__article">
    <header class="countdown__header">
      <h1>
        {{ entry.landingBlurb | typogrify }}
      </h1>
    </header>
    <div class="countdown__body">
      {% set now = date("now", timezone="UTC") %}
      {% set difference = siteLaunch.dateAndTime.diff(now) %}
      <ul class="countdown__parts">
        <li class="countdown__part countdown__part--days"><strong>{{ difference.days }}</strong> {{ (difference.days == '1') ? 'Day' : 'Days' }}</li>
        <li class="countdown__part countdown__part--hours"><strong>{{ difference.h }}</strong> {{ (difference.h == '1') ? 'Hour' : 'Hours' }}</li>
        <li class="countdown__part countdown__part--minutes"><strong>{{ difference.i }}</strong> {{ (difference.i == '1') ? 'Minute' : 'Minutes' }}</li>
        <li class="countdown__part countdown__part--seconds"><strong>{{ difference.s }}</strong> {{ (difference.s == '1') ? 'Second' : 'Seconds' }}</li>
      </ul>
    </div>
  </article>
</div>