| <!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"); |
| |
| |
| 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> |
|
|
