- 신청 마감 임박 -
00
00
00
00
Days Hours Minutes seconds

<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>