Spaces:

ShayanRl
/

testdate

Running

ShayanRl commited on Apr 10, 2025

Commit

c119792

verified ·

1 Parent(s): b375cd3

Update index.html

Files changed (1) hide show

index.html CHANGED Viewed

@@ -2,46 +2,40 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Date and Ages</title>
   <style>
-    body { font-family: Arial, sans-serif; padding: 20px; }
-    #time { font-weight: bold; margin-bottom: 20px; }
     ul { list-style-type: none; padding: 0; }
-    li { margin: 5px 0; }
-    .age { color: blue; margin-right: 5px; }
-    .month { color: green; margin-right: 2px; }
-    .day { color: orange; }
   </style>
 </head>
 <body>
-  <div id="time"></div>
-  <ul id="ageList"></ul>
   <script>
-    // Show current time
-    function updateTime() {
-      const now = new Date();
-      const timeString = now.toLocaleTimeString();
-      document.getElementById("time").textContent = "Current time: " + timeString;
-    }
-    updateTime();
-    setInterval(updateTime, 1000); // Update every second
-    // Get tomorrow + 8 days
-    const targetDate = new Date();
-    targetDate.setDate(targetDate.getDate() + 9);
-    const month = targetDate.toLocaleString('default', { month: 'short' }); // "Apr"
-    const day = String(targetDate.getDate()); // "19"
-    const ages = [22, 25, 30];
-    const ul = document.getElementById("ageList");
-    ages.forEach(age => {
-      const li = document.createElement("li");
-      li.innerHTML = `<span class='age'>${age}</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 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; }
   </style>
 </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>