The user is unable to set a reminder and or delete the task. Please fix.

components/task-card.js

@@ -142,8 +142,7 @@ this.shadowRoot.innerHTML = `
             <div class="task-card ${completed ? 'completed' : ''}">
                 <div class="flex items-start gap-3">
                     <div class="task-checkbox ${completed ? 'checked' : ''}" data-action="toggle"></div>
-                    
-                    <div class="flex-1">
+<div class="flex-1">
                         <h3 class="task-text font-semibold text-gray-800 mb-2">${text}</h3>
                         
                         <div class="flex flex-wrap items-center gap-2 mb-3">
@@ -162,21 +161,22 @@ this.shadowRoot.innerHTML = `
                                     `<span class="badge badge-reminder">Active (${reminderFrequency || 'daily'})</span>` : ''}
                                 ${reminderStopped ? 
                                     '<span class="badge badge-stopped">Reminder Stopped</span>' : ''}
-                            </div>
-<div class="flex items-center gap-1">
+</div>
+                <div class="flex items-center gap-1">
                                 ${!completed ? `
                                     <button class="action-btn reminder-btn ${hasReminder && !reminderStopped ? 'active' : ''}" 
                                             data-action="reminder" 
-                                            title="${hasReminder && !reminderStopped ? 'Stop Reminder' : 'Set Reminder'}">
+                                            title="${hasReminder && !reminderStopped ? 'Stop Reminder' : 'Set Reminder'}" 
+                                            type="button">
                                         <i data-feather="bell" class="w-4 h-4"></i>
                                         ${hasReminder && !reminderStopped ? '<div class="reminder-pulse"></div>' : ''}
                                     </button>
                                 ` : ''}
-                                <button class="action-btn delete" data-action="delete" title="Delete Task">
+                                <button class="action-btn delete" data-action="delete" title="Delete Task" type="button">
                                     <i data-feather="trash-2" class="w-4 h-4"></i>
                                 </button>
                             </div>
-                        </div>
+</div>
                     </div>
                 </div>
             </div>

script.js

@@ -148,26 +148,24 @@ addTask() {
         if (task) {
             if (task.completed) {
                 this.showToast('Cannot set reminder for completed task', 'error');
-                return;
-            }
-            
-            this.currentReminderTaskId = id;
-            
-            if (task.hasReminder && !task.reminderStopped) {
-                // Show stop reminder option
-                document.getElementById('reminderModal').classList.remove('hidden');
-                document.getElementById('stopExistingReminder').classList.remove('hidden');
-                document.querySelectorAll('.frequency-btn').forEach(btn => btn.style.display = 'none');
-            } else {
-                // Show frequency selection
-                document.getElementById('reminderModal').classList.remove('hidden');
-                document.getElementById('stopExistingReminder').classList.add('hidden');
-                document.querySelectorAll('.frequency-btn').forEach(btn => btn.style.display = 'block');
-            }
+            return;
+        }
+        
+        this.currentReminderTaskId = id;
+        
+        if (task.hasReminder && !task.reminderStopped) {
+            // Show stop reminder option
+            document.getElementById('reminderModal').classList.remove('hidden');
+            document.getElementById('stopExistingReminder').classList.remove('hidden');
+            document.querySelectorAll('.frequency-btn').forEach(btn => btn.style.display = 'none');
+        } else {
+            // Show frequency selection
+            document.getElementById('reminderModal').classList.remove('hidden');
+            document.getElementById('stopExistingReminder').classList.add('hidden');
+            document.querySelectorAll('.frequency-btn').forEach(btn => btn.style.display = 'block');
         }
     }
-
-    setReminderFrequency(frequency) {
+setReminderFrequency(frequency) {
         if (!this.currentReminderTaskId) return;
         
         const task = this.tasks.find(t => t.id === this.currentReminderTaskId);
@@ -354,20 +352,26 @@ showToast(message, type = 'info') {
         return saved ? JSON.parse(saved) : [];
     }
 }
-
 // Custom event delegation for dynamic task cards
 document.addEventListener('click', (e) => {
-    if (e.target.closest('[data-action="toggle"]')) {
+    const toggleBtn = e.target.closest('[data-action="toggle"]');
+    const reminderBtn = e.target.closest('[data-action="reminder"]');
+    const deleteBtn = e.target.closest('[data-action="delete"]');
+    
+    if (toggleBtn) {
         const card = e.target.closest('task-card');
-        taskManager.toggleTask(parseInt(card.id));
-    } else if (e.target.closest('[data-action="reminder"]')) {
+        if (card) {
+            taskManager.toggleTask(parseInt(card.getAttribute('id'))));
+    } else if (reminderBtn) {
         const card = e.target.closest('task-card');
-        taskManager.toggleReminder(parseInt(card.id));
-    } else if (e.target.closest('[data-action="delete"]')) {
-        const card = e.target.closest('task-card');
-        taskManager.deleteTask(parseInt(card.id));
+        if (card) {
+            taskManager.toggleReminder(parseInt(card.getAttribute('id'))));
+        } else if (deleteBtn) {
+            const card = e.target.closest('task-card');
+            if (card) {
+                taskManager.deleteTask(parseInt(card.getAttribute('id'))));
+        }
     }
 });
-
 // Initialize the app
 const taskManager = new TaskManager();