I want the current date next to the Calendar title.

index.html

@@ -85,8 +85,11 @@
 <!-- Header -->
         <header class="mb-6 sm:mb-8">
             <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 sm:mb-6 gap-4">
-                <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Calendar</h1>
-                <div class="flex items-center space-x-2 sm:space-x-4">
+                <div>
+                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Calendar</h1>
+                    <p class="text-sm text-gray-500" id="current-date"></p>
+                </div>
+<div class="flex items-center space-x-2 sm:space-x-4">
                     <button id="prev-month" class="p-2 rounded-full hover:bg-white/50 transition-colors">
                         <i data-feather="chevron-left" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                     </button>
@@ -206,10 +209,18 @@
                     root.style.setProperty(`--${color}-${shade}`, value);
                 });
             });
-AOS.init();
+            AOS.init();
             feather.replace();
-            
-            let currentDate = new Date();
+
+            // Display current date
+            const currentDateElement = document.getElementById('current-date');
+            const today = new Date();
+            currentDateElement.textContent = today.toLocaleDateString('en-US', { 
+                weekday: 'long', 
+                month: 'long', 
+                day: 'numeric' 
+            });
+let currentDate = new Date();
             let events = JSON.parse(localStorage.getItem('calendarEvents')) || [];
             function updateCalendar() {
                 const calendar = document.getElementById('calendar');