Countdown to BF 2042

by trentHarlem

HTML

<h1>
Countdown to<br>
BATTLEFIELD 2042
</h1>
<small>Release Date</small>
 <div id='display' class='container'>

</div>

CSS

body {
  font: 2em system-ui;
}
h1 {
  text-align: center;
  font: 1.1em helvetica, system-ui;
  margin: 5px;
}
.count-down {
  display: inline-flex;
  margin: auto;
}
.timer {
  text-align: center;
  padding: 5px;
  margin: 5px;
}

JavaScript

const app = document.getElementById('app')
var countDownDate = new Date('November 19, 2021').getTime();

var x = setInterval(function() {

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

  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var 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;