Countdown to John Wick 4

by trentHarlem

HTML

<div class="container">
  <h1>
    Countdown to<br>
    John Wick Chapter 4
  </h1>
  <small>Release Date:</small><br />
  <small>Thursday March 23rd 2023</small>
  <div id='display' class='container'>

  </div>
</div>

CSS

* {
  padding: 0px;
  margin: 0px;
}

body {
  font: 1.8em system-ui;
  text-align: center;
  background: #232323;

}

.container {
  background: #444;
  max-width: 468px;
  color: cyan;
  margin: auto;
  padding: 5px;
  border: 1px solid black;
  border-radius: 10px;
}

h1 {
  text-align: center;
  font: 1.1em helvetica, system-ui;
  margin: 5px;
}

small {
  font: 0.6em helvetica, sans-serif;
}

.count-down {
  display: inline-flex;
  margin: auto;
}


.timer {
  padding: 5px;
  margin: 5px;
}

JavaScript

const app = document.getElementById('app')
let countDownDate = new Date('March 23, 2023 15:00:00').getTime()


const x = setInterval(function() {

  let now = new Date().getTime();

  let distance = countDownDate - now;

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


  // format any single digit dates/times
  const format = t => t < 10 ? '0' + t : t;

  document.getElementById("display").innerHTML = `
        <div class="count-down">
            <div class="timer">
                <h2 class="days">${format(days)}</h2>
                <small>Days</small>
            </div>
            <div class="timer">
                <h2 class="hours">${format(hours)}</h2>
                <small>Hours</small>
            </div>
            <div class="timer">
                <h2 class="minutes">${format(minutes)}</h2>
                <small>Minutes</small>
            </div>
            <div class="timer">
                <h2 class="seconds">${format(seconds)}</h2>
                <small>Seconds</small>
            </div>
        </div>
        `

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("display").innerHTML = "EXPIRED";
  }
}, 1000);




//  format any single digit times/dates 
//.    const format = t => t < 10 ? '0' + t : t;