add a countdown to the event

index.html

@@ -282,9 +282,23 @@ calendar.appendChild(dayElement);
                 }
 updateEventsList();
             }
-            
+            function getDaysRemaining(eventDate) {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const timeDiff = eventDate - today;
+                return Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+            }
+
+            function getDaysRemainingText(eventDate) {
+                const days = getDaysRemaining(eventDate);
+                if (days < 0) return 'Event passed';
+                if (days === 0) return 'Today!';
+                if (days === 1) return 'Tomorrow';
+                return `${days} days remaining`;
+            }
+
             function updateEventsList() {
-                const eventsContainer = document.getElementById('events-container');
+const eventsContainer = document.getElementById('events-container');
                 const upcomingEvents = events
                     .filter(event => new Date(event.date) >= new Date())
                     .sort((a, b) => new Date(a.date) - new Date(b.date));
@@ -308,8 +322,11 @@ updateEventsList();
                                     <span class="w-3 h-3 rounded-full mr-2 bg-${event.color}-500"></span>
                                     ${event.title}
                                 </h4>
-<p class="text-sm text-gray-600">${eventDate.toLocaleDateString()} ${event.time ? 'at ' + event.time : ''}</p>
-                                ${event.description ? `<p class="text-sm text-gray-500 mt-1">${event.description}</p>` : ''}
+                                <p class="text-sm text-gray-600">${eventDate.toLocaleDateString()} ${event.time ? 'at ' + event.time : ''}</p>
+                                <p class="text-xs mt-1 ${getDaysRemaining(eventDate) <= 3 ? 'text-red-500' : 'text-indigo-500'}">
+                                    ${getDaysRemainingText(eventDate)}
+                                </p>
+${event.description ? `<p class="text-sm text-gray-500 mt-1">${event.description}</p>` : ''}
                             </div>
                             <button class="text-red-500 hover:text-red-700 delete-event" data-id="${event.id}">
                                 <i data-feather="trash-2" class="w-4 h-4"></i>

style.css

@@ -33,6 +33,10 @@ p {
     background-color: rgba(243, 244, 246, 0.5);
 }
 
+.text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+}
 input[type="radio"]:checked + span {
     box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
 }