fix: address code review feedback (accessibility, renaming, and logic fixes)

Author: raza-khan0108

examples/interactive-calendar/README.md

@@ -1,66 +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.
+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.
+- **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+):** Logic for date calculation and event handling.
+- **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
+├── script.js       # Calendar logic and event handling
 └── README.md       # Project documentation
+```
+
+---
+
+## 💡 How It Works
 
-##💡 How It Works
-1. Date Calculation
-The calendar grid is calculated using the native Date object:
+### 1. Date Calculation
 
-Start Day: new Date(year, month, 1).getDay() determines which day of the week the month starts on (0=Sunday, 1=Monday).
+The calendar grid is calculated using the native `Date` object:
 
-Total Days: new Date(year, month + 1, 0).getDate() retrieves the exact number of days in the current month.
+- **Start Day:**  
+  `new Date(year, month, 1).getDay()`  
+  Determines which day of the week the month starts on  
+  `(0 = Sunday, 1 = Monday, ...)`
 
-2. Rendering the Grid
-We use a loop to generate <div> elements.
+- **Total Days:**  
+  `new Date(year, month + 1, 0).getDate()`  
+  Retrieves the exact number of days in the current month
 
-First, we insert empty placeholder divs to align the 1st of the month with the correct weekday column.
+---
 
-Then, we generate the actual numbered days.
+### 2. Rendering the Grid
 
-3. State Management
-Events are stored in a simple JSON object and saved to LocalStorage:
+- 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.
 
-JavaScript
+---
+
+### 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
-Clone the repository.
+---
 
-Navigate to the interactive-calendar folder.
+## 🏃‍♂️ How to Run
 
-Open index.html in your browser.
+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 for multiple events per day.
+## 🔮 Future Improvements
 
-Add specific time slots for events.
+- Add drag-and-drop functionality for events
+- Support multiple events per day
+- Add specific time slots for events

examples/interactive-calendar/index.html

@@ -4,16 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Interactive Calendar</title>
-    <link rel="stylesheet" href="style.css">
-</head>
+    <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">&lt;</span>
+                <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">&gt;</span>
+                <span id="month-next" class="nav-btn" role="button" tabindex="0" aria-label="Next month">&gt;</span>
             </div>
         </header>
 
@@ -24,9 +23,9 @@ <h2 id="month-year"></h2>
         <div class="calendar-dates" id="calendar-dates"></div>
     </div>
 
-    <div id="event-modal" class="modal hidden">
+    <div id="event-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="selected-date">
         <div class="modal-content">
-            <span class="close-btn">&times;</span>
+            <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>

examples/interactive-calendar/script.js

@@ -3,7 +3,6 @@ const datesElement = document.getElementById('calendar-dates');
 const prevBtn = document.getElementById('month-prev');
 const nextBtn = document.getElementById('month-next');
 
-// Modal Elements
 const modal = document.getElementById('event-modal');
 const closeModalBtn = document.querySelector('.close-btn');
 const selectedDateTitle = document.getElementById('selected-date');
@@ -20,7 +19,8 @@ const months = [
     "July", "August", "September", "October", "November", "December"
 ];
 
-// --- Core Functions ---
+// Helper: Zero-pad numbers (Fixed: Date formatting consistency)
+const pad = (n) => (n < 10 ? '0' + n : n);
 
 function renderCalendar() {
     const year = currentDate.getFullYear();
@@ -29,74 +29,72 @@ function renderCalendar() {
     monthYearElement.innerText = `${months[month]} ${year}`;
     datesElement.innerHTML = '';
 
-    // First day of the month (0 = Sunday, 1 = Monday, etc.)
     const firstDay = new Date(year, month, 1).getDay();
-    // Total days in the current month
     const totalDays = new Date(year, month + 1, 0).getDate();
 
-    // Add empty divs for days before the first day of the month
     for (let i = 0; i < firstDay; i++) {
         const emptyDiv = document.createElement('div');
         datesElement.appendChild(emptyDiv);
     }
 
-    // Render days
     for (let day = 1; day <= totalDays; day++) {
         const dayDiv = document.createElement('div');
         dayDiv.classList.add('day');
         dayDiv.innerText = day;
 
-        // Check if this day is "Today"
         const today = new Date();
         if (day === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
             dayDiv.classList.add('current-date');
         }
 
-        // Check for Events
-        const dateString = `${year}-${month + 1}-${day}`;
+        // 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]; // Tooltip
+            dayDiv.title = events[dateString];
         }
 
-        // Add Click Event for Modal
-        dayDiv.addEventListener('click', () => openModal(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;
 }
 
-// --- Event Listeners ---
-
-prevBtn.addEventListener('click', () => {
-    currentDate.setMonth(currentDate.getMonth() - 1);
-    renderCalendar();
-});
-
-nextBtn.addEventListener('click', () => {
-    currentDate.setMonth(currentDate.getMonth() + 1);
-    renderCalendar();
-});
-
-closeModalBtn.addEventListener('click', closeModal);
-
+// Fixed: Save logic handles whitespace and deletion
 saveEventBtn.addEventListener('click', () => {
-    if (eventInput.value.trim()) {
-        events[clickedDate] = eventInput.value;
-        localStorage.setItem('events', JSON.stringify(events));
+    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();
 });
@@ -110,12 +108,31 @@ deleteEventBtn.addEventListener('click', () => {
     renderCalendar();
 });
 
-// Close modal if clicking outside
+// 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();
-    }
+    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();
+        }
+    });
 });
 
-// Initial Render
 renderCalendar();

examples/interactive-calendar/style.css

@@ -131,6 +131,8 @@ textarea {
     height: 60px;
     margin: 10px 0;
     padding: 5px;
+    box-sizing: border-box; /* Fixed: prevents width overflow */
+    resize: vertical; /* Optional: improves UX */
 }
 
 button {