sumn2u · sumn2u · Jan 30, 2026 · Jan 28, 2026 · Jan 29, 2026 · Copilot
diff --git a/examples/interactive-calendar/README.md b/examples/interactive-calendar/README.md
@@ -0,0 +1,90 @@
+# 📅 Interactive Calendar
+
+A lightweight, responsive calendar widget built with **vanilla JavaScript**.  
+This project demonstrates **DOM manipulation**, **Date object handling**, and **local state management** without external libraries.
+
+---
+
+## 🚀 Features
+
+- **Dynamic Rendering:** Automatically generates the correct grid for any month and year.
+- **Navigation:** Browse through past and future months.
+- **Current Date Highlighting:** Visual indicator for today's date.
+- **Event Management (Bonus):** Click any date to add, view, or delete notes.
+- **Data Persistence:** Events are saved to the browser's `localStorage`, so they remain after refreshing the page.
+- **Responsive Design:** Built with CSS Grid to adapt to different screen sizes.
+
+---
+
+## 🛠️ Technologies Used
+
+- **HTML5:** Semantic structure  
+- **CSS3:** Flexbox and Grid layout, CSS Variables for theming  
+- **JavaScript (ES6+):** Date calculation and event handling logic  
+
+---
+
+## 📂 Project Structure
+
+```text
+interactive-calendar/
+├── index.html      # Main HTML structure
+├── style.css       # Styling and Grid layout
+├── script.js       # Calendar logic and event handling
+└── README.md       # Project documentation
+```
+
+---
+
+## 💡 How It Works
+
+### 1. Date Calculation
+
+The calendar grid is calculated using the native `Date` object:
+
+- **Start Day:**  
+  `new Date(year, month, 1).getDay()`  
+  Determines which day of the week the month starts on  
+  `(0 = Sunday, 1 = Monday, ...)`
+
+- **Total Days:**  
+  `new Date(year, month + 1, 0).getDate()`  
+  Retrieves the exact number of days in the current month
+
+---
+
+### 2. Rendering the Grid
+
+- A loop generates `<div>` elements for the calendar.
+- Empty placeholder divs are inserted to align the first day of the month correctly.
+- Numbered day cells are then rendered dynamically.
+
+---
+
+### 3. State Management
+
+Events are stored in a simple JSON object and persisted using `localStorage`.
+
+```javascript
+// Data Structure Example
+{
+  "2023-10-25": "Meeting with team",
+  "2023-10-31": "Halloween Party"
+}
+```
+
+---
+
+## 🏃‍♂️ How to Run
+
+1. Clone the repository  
+2. Navigate to the `interactive-calendar` folder  
+3. Open `index.html` in your browser  
+
+---
+
+## 🔮 Future Improvements
+
+- Add drag-and-drop functionality for events
+- Support multiple events per day
+- Add specific time slots for events
diff --git a/examples/interactive-calendar/index.html b/examples/interactive-calendar/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Calendar</title>
+    <link rel="stylesheet" href="styles.css"> </head>
+<body>
+
+    <div class="calendar-container">
+        <header class="calendar-header">
+            <div class="calendar-navigation">
+                <span id="month-prev" class="nav-btn" role="button" tabindex="0" aria-label="Previous month">&lt;</span>
+                <h2 id="month-year"></h2>
+                <span id="month-next" class="nav-btn" role="button" tabindex="0" aria-label="Next month">&gt;</span>
+            </div>
+        </header>
+
+        <div class="calendar-weekdays">
+            <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>
+        </div>
+
+        <div class="calendar-dates" id="calendar-dates"></div>
+    </div>
+
+    <div id="event-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="selected-date">
+        <div class="modal-content">
+            <span class="close-btn" role="button" tabindex="0" aria-label="Close">&times;</span>
+            <h3 id="selected-date"></h3>
+            <textarea id="event-input" placeholder="Add an event/note..."></textarea>
+            <button id="save-event-btn">Save Event</button>
+            <button id="delete-event-btn" class="secondary">Clear Event</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/interactive-calendar/script.js b/examples/interactive-calendar/script.js
@@ -0,0 +1,138 @@
+const monthYearElement = document.getElementById('month-year');
+const datesElement = document.getElementById('calendar-dates');
+const prevBtn = document.getElementById('month-prev');
+const nextBtn = document.getElementById('month-next');
+
+const modal = document.getElementById('event-modal');
+const closeModalBtn = document.querySelector('.close-btn');
+const selectedDateTitle = document.getElementById('selected-date');
+const eventInput = document.getElementById('event-input');
+const saveEventBtn = document.getElementById('save-event-btn');
+const deleteEventBtn = document.getElementById('delete-event-btn');
+
+let currentDate = new Date();
+let clickedDate = null;
+let events = JSON.parse(localStorage.getItem('events')) || {};
+
+const months = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+];
+
+// Helper: Zero-pad numbers (Fixed: Date formatting consistency)
+const pad = (n) => (n < 10 ? '0' + n : n);
+
+function renderCalendar() {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+
+    monthYearElement.innerText = `${months[month]} ${year}`;
+    datesElement.innerHTML = '';
+
+    const firstDay = new Date(year, month, 1).getDay();
+    const totalDays = new Date(year, month + 1, 0).getDate();
+
+    for (let i = 0; i < firstDay; i++) {
+        const emptyDiv = document.createElement('div');
+        datesElement.appendChild(emptyDiv);
+    }
+
+    for (let day = 1; day <= totalDays; day++) {
+        const dayDiv = document.createElement('div');
+        dayDiv.classList.add('day');
+        dayDiv.innerText = day;
+
+        const today = new Date();
+        if (day === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
+            dayDiv.classList.add('current-date');
+        }
+
+        // Fixed: Use padded date format YYYY-MM-DD
+        const dateString = `${year}-${pad(month + 1)}-${pad(day)}`;
+
+        // Store date in data attribute for Event Delegation
+        dayDiv.dataset.date = dateString;
+
+        if (events[dateString]) {
+            dayDiv.classList.add('has-event');
+            dayDiv.title = events[dateString];
+        }
+
+        // Removed individual event listeners here (Performance fix)
+        datesElement.appendChild(dayDiv);
+    }
+}
+
+// Fixed: Event Delegation (One listener for all days)
+datesElement.addEventListener('click', (e) => {
+    const target = e.target.closest('.day');
+    if (target && target.dataset.date) {
+        openModal(target.dataset.date);
+    }
+});
+
+function openModal(dateStr) {
+    clickedDate = dateStr;
+    selectedDateTitle.innerText = `Event for: ${dateStr}`;
+    eventInput.value = events[dateStr] || '';
+    modal.classList.remove('hidden');
+    eventInput.focus();
+}
+
+function closeModal() {
+    modal.classList.add('hidden');
+    clickedDate = null;
+}
+
+// Fixed: Save logic handles whitespace and deletion
+saveEventBtn.addEventListener('click', () => {
+    const eventText = eventInput.value.trim();
+
+    if (eventText) {
+        events[clickedDate] = eventText;
+    } else {
+        delete events[clickedDate]; // Remove event if input is cleared
+    }
+
+    localStorage.setItem('events', JSON.stringify(events));
+    closeModal();
+    renderCalendar();
+});
+
+deleteEventBtn.addEventListener('click', () => {
+    if (events[clickedDate]) {
+        delete events[clickedDate];
+        localStorage.setItem('events', JSON.stringify(events));
+    }
+    closeModal();
+    renderCalendar();
+});
+
+// Navigation & Close
+prevBtn.addEventListener('click', () => {
+    currentDate.setMonth(currentDate.getMonth() - 1);
+    renderCalendar();
+});
+
+nextBtn.addEventListener('click', () => {
+    currentDate.setMonth(currentDate.getMonth() + 1);
+    renderCalendar();
+});
+
+closeModalBtn.addEventListener('click', closeModal);
+
+window.addEventListener('click', (e) => {
+    if (e.target === modal) closeModal();
+});
+
+// Fixed: Keyboard Accessibility for Nav Buttons
+[prevBtn, nextBtn, closeModalBtn].forEach(btn => {
+    btn.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            btn.click();
+        }
+    });
+});
+
+renderCalendar();