File size: 1,394 Bytes
b375cd3 622562a b375cd3 c119792 b375cd3 55ddd85 c119792 b375cd3 622562a b375cd3 55ddd85 c119792 622562a c119792 622562a 55ddd85 c119792 55ddd85 c119792 55ddd85 b375cd3 63a8b15 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!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>
|