<main>
  <div class="count-down-container">
    <div class="count-down-box">
      <div class="count-down">
        <h1 id="days">00</h1>
        <p>Days</p>
      </div>
    </div>
    <div class="count-down-box">
      <div class="count-down">
        <h1 id="hours">00</h1>
        <p>Hours</p>
      </div>
    </div>
    <div class="count-down-box">
      <div class="count-down">
        <h1 id="minutes">00</h1>
        <p>Minutes</p>
      </div>
    </div>
    <div class="count-down-box">
      <div class="count-down">
        <h1 id="seconds">00</h1>
        <p>Seconds</p>
      </div>
    </div>
  </div>
  <p class="hint-message">Someone's birthday is coming. &#x1F609;</p>
</main>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

body {
  letter-spacing: -0.5px;
  place-items: center;
  display: grid;
  height: 100vh;
  width: 100%;
}

.count-down-container {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  width: 600px;
  height: 150px;
}

.count-down-box {
  text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
  place-items: center;
  text-align: center;
  display: grid;
  height: 100%;
  width: 100%;
}

.count-down-box:nth-child(1) {
  background-color: #3c79e0;
}

.count-down-box:nth-child(2) {
  background-color: #4285f6;
}

.count-down-box:nth-child(3) {
  background-color: #5390f7;
}

.count-down-box:nth-child(4) {
  background-color: #629af8;
}

.count-down-box h1 {
  font-size: 60px;
  color: white;
}

.count-down-box p {
  font-size: 13px;
  color: white;
}

.hint-message {
  margin: 15px 0px;
  text-align: center;
  font-size: 14px;
}
const remDays = document.getElementById("days");
const remHours = document.getElementById("hours");
const remMinutes = document.getElementById("minutes");
const remSeconds = document.getElementById("seconds");

const birthDay = "27 Dec 2022";

const formatTime = (time) => (time < 10 ? `0${time}` : time);

const countdown = () => {
  const birthDayDate = new Date(birthDay);
  const currentDate = new Date();

  const totalSeconds = (birthDayDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const mins = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  remDays.innerHTML = days;
  remHours.innerHTML = formatTime(hours);
  remMinutes.innerHTML = formatTime(mins);
  remSeconds.innerHTML = formatTime(seconds);
};

// initial call
countdown();

setInterval(countdown, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.