index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upcoming Birthdays</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    ul { list-style-type: none; padding: 0; }
    li { margin: 8px 0; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; width: fit-content; }
    .age { font-weight: bold; color: #333; margin-right: 10px; }
    .month { color: #0077cc; margin-right: 5px; }
    .day { color: #cc5500; }
  </style>
</head>
<body>

  <ul id="birthday-list"></ul>

  <script>
    const offsets = [8, 15, 30];
    const ages = [22, 25, 30];
    const ul = document.getElementById("birthday-list");

    // Start from tomorrow
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);

    offsets.forEach(offset => {
      const date = new Date(tomorrow);
      date.setDate(date.getDate() + offset);

      const month = date.toLocaleString('default', { month: 'short' });
      const day = date.getDate();

      ages.forEach(age => {
        const li = document.createElement('li');
        li.setAttribute('data-offset', offset);
        li.setAttribute('data-age', age);
        li.innerHTML = `
          <span class="age">${age}</span>
          <span class="month">${month}</span>
          <span class="day">${day}</span>
        `;
        ul.appendChild(li);
      });
    });
  </script>

</body>
</html>