Expiring New Badge/Label

<div class="example-card">
  <div class="example-card__start">
    <div class="new-badge__wrapper">
      <div data-expiring-date="22/12/2024" class="new-badge"><span class="new-badge__span">New</span></div>
    </div>
    <h2 class="new-badge__h2">Show<br>New Badge</h2>
  </div>
  <div class="example-card__end">
    <img src="images/image-chair.jpg" loading="lazy" width="540" alt="Image of Chair" class="example-card__img">
  </div>
</div>

.example-card {
  background-color: #efeeec;
  border-radius: 1.5em;
  width: 30em;
  height: 20em;
  padding: 1.25em;
  display: flex;
}

.example-card__start {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.example-card__end {
  width: 50%;
}

.example-card__img {
  object-fit: cover;
  border-radius: .5em;
  width: 100%;
  height: 100%;
}

.new-badge {
  background-color: #ff4c24;
  border-radius: .25em;
  padding: .3em .5em .25em;
  display: none;
}

.new-badge__span {
  color: #efeeec;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.new-badge__h2 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  padding: .25em;
  font-size: 2.75em;
  font-weight: 700;
  line-height: .8;
}

function initExpiringNewBadge() {
  const elements = document.querySelectorAll('[data-expiring-date]');
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  elements.forEach(el => {
    const dateStr = el.getAttribute('data-expiring-date'); // format D/M/YYYY
    const [day, month, year] = dateStr.split('/').map(Number);

    // Construct date object from attribute (month is zero-based in JS)
    const publishedDate = new Date(year, month - 1, day);
    publishedDate.setHours(0, 0, 0, 0);

    // Calculate the difference in days
    const diffInMs = today - publishedDate;
    const diffInDays = diffInMs / (1000 * 60 * 60 * 24);

    // Show badge if the published date is within the last 7 days (0 to 6 days ago)
    if (diffInDays >= 0 && diffInDays < 7) {
      el.style.display = 'block';
    }
  });
}

// Initialize Expiring New Badge/Label
document.addEventListener('DOMContentLoaded', () => {
  initExpiringNewBadge();
});