Countdown to Total Solar Eclipse

by trentHarlem

HTML

<div class="container">
  <h1>
    Countdown to<br>
    Total Solar Eclipse
  </h1>
  <small>Event Date:</small><br />
  <small>Monday April 8, 2024</small>
  <div id='display' class='container'>

  </div>
  <img class="nasa-picture" src="https://science.nasa.gov/wp-content/uploads/2022/10/eclipse-map-2024-1920-1.png?w=2048&format=webp" alt="Nasa image: North America Solar Eclipse path of totality for April 8th 2024" />
  <div class="info">
    <p>
      The next total solar eclipse will be viewable from North America, beginning near Mazatlan, Mexico around 11:07 am PDT on April 8.
      <br /> <br />
      According to NASA’s maps, the path of totality—namely, the locations in which you’ll actually be able to experience the sun being covered completely by the moon—will then enter Texas and stretch along a northeastern path touching Oklahoma, Arkansas, Missouri, Illinois, New York, Vermont, New Hampshire, and Maine.
      <br /> <br />
      It will then exit the US, enter Canada, and exit off the Atlantic coast of Newfoundland at 5:16 pm NDT.
    </p>
  </div>
</div>

CSS

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

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

.container {
  background: #333;
  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: 10px 5px;
}

.nasa-picture {
  width: 100%;
}

.info {
  color: whitesmoke;
  padding: 5px;
  margin: 10px 5px;
  font: 0.6em helvetica, system-ui;
}

JavaScript

const app = document.getElementById('app')
let countDownDate = new Date('April 8, 2024 13:07: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);