<style>
.countdown-card {
width: 550px;
height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 30px;
border: 8px solid black;
padding: 30px;
margin: 0 auto;
}
.title {
font-size: 30px;
margin-top: 15px;
margin-bottom: 10px;
font-weight: 999;
}
.time-boxes {
display: flex;
margin-bottom: 5px;
}
.time-box {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 30px;
border: 2px solid #4D4D4D;
margin-right: 15px;
}
.time-box:last-child {
margin-right: 0;
}
.time-box .number {
font-size: 30px;
font-weight: 800;
color: #F45050;
}
.labels {
display: flex;
justify-content: space-between;
width: 464px;
}
.label {
font-size: 15px;
color: black;
flex: 1;
text-align: center;
font-weight: 200;
}
</style>
<div class="countdown-card">
<div class="title">- 신청 마감 임박 -</div>
<div class="time-boxes">
<div class="time-box days"> <!-- Added Day item -->
<span class="number">00</span>
</div>
<div class="time-box hours">
<span class="number">00</span>
</div>
<div class="time-box minutes">
<span class="number">00</span>
</div>
<div class="time-box seconds">
<span class="number">00</span>
</div>
</div>
<div class="labels">
<span class="label">Days</span> <!-- Updated label to Days -->
<span class="label">Hours</span>
<span class="label">Minutes</span>
<span class="label">seconds</span>
</div>
</div>
<script>
function updateCounter() {
const currentTime = new Date();
const midnight = new Date(currentTime);
midnight.setHours(24, 0, 0, 0); // Set to midnight
const difference = midnight - currentTime;
const days = Math.floor(difference / (1000 * 60 * 60 * 24)); // Calculate days
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.querySelector('.days .number').textContent = days.toString().padStart(2, '0'); // Update Days
document.querySelector('.hours .number').textContent = hours.toString().padStart(2, '0');
document.querySelector('.minutes .number').textContent = minutes.toString().padStart(2, '0');
document.querySelector('.seconds .number').textContent = seconds.toString().padStart(2, '0');
}
updateCounter();
setInterval(updateCounter, 1000); // Update every second
</script>