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