Styling the Timer Component

.countdown-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: sans-serif;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-value {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 8px;
  font-size: 2em;
  min-width: 60px;
  text-align: center;
}

.time-label {
  margin-top: 5px;
  font-size: 0.9em;
  color: #7f8c8d;
  text-transform: uppercase;
}

.countdown-heading {
  text-align: center;
  margin-bottom: 20px;
  font-family: sans-serif;
}

HTML Sturcture

<h2 class="countdown-heading">Time remaining until 2025-01-01:</h2>
<div class="countdown-container">
    <div class="time-unit">
        <div class="time-value" id="day-val">0</div>
        <div class="time-label">Days</div>
    </div>
    <div class="time-unit">
        <div class="time-value" id="hr-val">0</div>
        <div class="time-label">Hours</div>
    </div>
    <div class="time-unit">
        <div class="time-value" id="min-val">0</div>
        <div class="time-label">Minutes</div>
    </div>
    <div class="time-unit">
        <div class="time-value" id="sec-val">0</div>
        <div class="time-label">Seconds</div>
    </div>
</div>

JavaScript Logic

const DEST_TIMESTAMP = new Date('2025-01-01T00:00:00').getTime();

function calculateRemaining() {
    const currentTimestamp = Date.now();
    const delta = DEST_TIMESTAMP - currentTimestamp;

    if (delta <= 0) {
        document.getElementById('day-val').textContent = '0';
        document.getElementById('hr-val').textContent = '0';
        document.getElementById('min-val').textContent = '0';
        document.getElementById('sec-val').textContent = '0';
        return;
    }

    const seconds = Math.trunc((delta / 1000) % 60);
    const minutes = Math.trunc((delta / (1000 * 60)) % 60);
    const hours = Math.trunc((delta / (1000 * 60 * 60)) % 24);
    const days = Math.trunc(delta / (1000 * 60 * 60 * 24));

    document.getElementById('day-val').textContent = days;
    document.getElementById('hr-val').textContent = hours;
    document.getElementById('min-val').textContent = minutes;
    document.getElementById('sec-val').textContent = seconds;
}

calculateRemaining();
setInterval(calculateRemaining, 1000);