Spaces:

ShayanRl
/

testdate

Running

ShayanRl commited on Apr 10, 2025

Commit

55ddd85

verified ·

1 Parent(s): c119792

Update index.html

Files changed (1) hide show

index.html CHANGED Viewed

@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Future Dates</title>
   <style>
     body { font-family: sans-serif; padding: 20px; }
     ul { list-style-type: none; padding: 0; }
-    li { margin: 10px 0; padding: 10px; 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; }
@@ -14,29 +14,33 @@
 </head>
 <body>
-  <ul id="date-list">
-    <!-- Dates will be added here -->
   </ul>
   <script>
-    const offsets = [8, 15, 30]; // Days to add
-    const ul = document.getElementById("date-list");
     offsets.forEach(offset => {
-      const target = new Date();
-      target.setDate(target.getDate() + offset);
-      const month = target.toLocaleString('default', { month: 'short' });
-      const day = String(target.getDate());
-      const li = document.createElement('li');
-      li.setAttribute('data-offset', offset);
-      li.innerHTML = `
-        <span class="age">+${offset}</span>
-        <span class="month">${month}</span>
-        <span class="day">${day}</span>
-      `;
-      ul.appendChild(li);
     });
   </script>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Future 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; }
 </head>
 <body>
+  <ul id="birthday-list">
+    <!-- Populated by script -->
   </ul>
   <script>
+    const offsets = [8, 15, 30];
+    const ages = [22, 25, 30];
+    const ul = document.getElementById("birthday-list");
     offsets.forEach(offset => {
+      const date = new Date();
+      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>