A countdown module

countdown.css

.countdown-container {
  font-size: 1rem;
  text-align: center;
}
.countdown-group {
  display: inline-block;
  margin: 0 1em;
}
.countdown-tile {
  border-bottom: 2px solid;
  color: #49565e;
  display: inline-block;
  font-size: 2em;
  margin: 0 .075em;
  width: 1em;
}
.countdown-label {
  font-family: sans-serif;
  font-size: .75em;
  text-transform: uppercase;
  margin-top: .5em;
}

countdown.html

<div id="countdown"></div>

<script src="countdown.js"></script>
<script>
const savedate = new Countdown("#countdown", "June 28 2019 GMT-0600");
</script>

countdown.js

class Countdown {
  constructor(selector, date) {
    this.selector = selector;
    this.date = date;

    this.initialize();
  }

  initialize() {
    // generate the html for our countdown module
    const groups = [ ///  DDD HH MM SS
      {"tilecount": 3, "label": "days"   },
      {"tilecount": 2, "label": "hours"  },
      {"tilecount": 2, "label": "minutes"},
      {"tilecount": 2, "label": "seconds"},
    ];

    const constructModule = (accumulator,current)=> ( /// reducer function to turn data into html
      accumulator += `
        <div class="countdown-group">
          ${`<div class="countdown-tile" data-hook="tile-${current.label}"></div>`.repeat(current.tilecount)}
          <div class="countdown-label">${current.label}</div>
        </div>`
    );
    const module = groups.reduce(constructModule, "");

    document.querySelector(this.selector).classList.add("countdown-container");
    document.querySelector(this.selector).innerHTML = module;
    
    // now that we've built the HTML, start counting
    this.updateCountdown();
    setInterval(()=> this.updateCountdown(), 500);
  }

  getCountdown() {
    const
      diff    = Date.parse(this.date) - Date.parse(new Date()),
      seconds = Math.floor(diff/(1000) % 60),
      minutes = Math.floor(diff/(1000*60) % 60),
      hours   = Math.floor(diff/(1000*60*60) % 24),
      days    = Math.floor(diff/(1000*60*60*24));

    return {
      'days'   : (""+ days).padStart(3,"0"),
      'hours'  : (""+ hours).padStart(2,"0"),
      'minutes': (""+ minutes).padStart(2,"0"),
      'seconds': (""+ seconds).padStart(2,"0"),
    };
  }

  updateCountdown() {
    const
      daysTiles     = document.querySelectorAll(`${this.selector} [data-hook="tile-days"]`),
      hoursTiles    = document.querySelectorAll(`${this.selector} [data-hook="tile-hours"]`),
      minutesTiles  = document.querySelectorAll(`${this.selector} [data-hook="tile-minutes"]`),
      secondsTiles  = document.querySelectorAll(`${this.selector} [data-hook="tile-seconds"]`),
      countdown     = this.getCountdown();

    daysTiles.forEach(   (tile,i) => tile.innerHTML = countdown.days.split("")[i]);
    hoursTiles.forEach(  (tile,i) => tile.innerHTML = countdown.hours.split("")[i]);
    minutesTiles.forEach((tile,i) => tile.innerHTML = countdown.minutes.split("")[i]);
    secondsTiles.forEach((tile,i) => tile.innerHTML = countdown.seconds.split("")[i]);
  }
  
  destroy() {
    const countdown = document.querySelector(this.selector);
    clearInterval(this.interval);
    countdown.classList.remove("countdown-container");
    countdown.innerHTML = "";
  }
}