Building a Countdown Timer with JavaScript Date Object
Tech
1
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);
