I can't change a task status

script.js

@@ -53,15 +53,25 @@ class UIController {
         
         this.setupEventListeners();
     }
-
     setupEventListeners() {
         this.addTaskBtn.addEventListener('click', () => this.handleAddTask());
         this.taskInput.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') this.handleAddTask();
         });
+        
+        // Use event delegation for dynamic elements
+        this.taskList.addEventListener('click', (e) => {
+            const toggleBtn = e.target.closest('.toggle-btn');
+            const deleteBtn = e.target.closest('.delete-btn');
+            
+            if (toggleBtn) {
+                this.toggleTask(toggleBtn.dataset.id);
+            } else if (deleteBtn) {
+                this.deleteTask(deleteBtn.dataset.id);
+            }
+        });
     }
-
-    handleAddTask() {
+handleAddTask() {
         const taskText = this.taskInput.value.trim();
         if (taskText) {
             const newTask = this.taskManager.addTask(taskText);
@@ -90,20 +100,11 @@ class UIController {
         
         this.taskList.prepend(taskElement);
         feather.replace();
-        
-        // Add event listeners to the new buttons
-        taskElement.querySelector('.toggle-btn').addEventListener('click', (e) => {
-            this.toggleTask(e.currentTarget.dataset.id);
-        });
-        
-        taskElement.querySelector('.delete-btn').addEventListener('click', (e) => {
-            this.deleteTask(e.currentTarget.dataset.id);
-        });
-    }
-
+}
     toggleTask(id) {
         this.taskManager.toggleTask(id);
-        const taskElement = document.querySelector(`[data-id="${id}"]`);
+        document.dispatchEvent(new CustomEvent('taskChanged'));
+const taskElement = document.querySelector(`[data-id="${id}"]`);
         if (taskElement) {
             const icon = taskElement.querySelector('.toggle-btn i');
             const text = taskElement.querySelector('span');
@@ -122,10 +123,10 @@ class UIController {
             feather.replace();
         }
     }
-
     deleteTask(id) {
         this.taskManager.deleteTask(id);
-        const taskElement = document.querySelector(`[data-id="${id}"]`);
+        document.dispatchEvent(new CustomEvent('taskChanged'));
+const taskElement = document.querySelector(`[data-id="${id}"]`);
         if (taskElement) {
             taskElement.classList.add('opacity-0', 'translate-x-10');
             setTimeout(() => {
@@ -145,4 +146,15 @@ class UIController {
 function loadTasks() {
     const ui = new UIController();
     ui.loadTasks();
-}
+    
+    // Update task counter in header
+    const taskCounter = document.querySelector('custom-header').shadowRoot.querySelector('#taskCounter');
+    if (taskCounter) {
+        taskCounter.textContent = `${ui.taskManager.getTasks().length} tasks`;
+    }
+    
+    // Listen for task changes to update counter
+    document.addEventListener('taskChanged', () => {
+        taskCounter.textContent = `${ui.taskManager.getTasks().length} tasks`;
+    });
+}