Adding show completed tasks button an hide completed task by default

public/css/index.css

@@ -26,16 +26,29 @@ h1 {
   margin: 0;
 }
 #logout-btn {
-  background-color: transparent;
+  background-color: rgb(170, 17, 17);
   border: 1px solid #333;
-  color: #333;
+  color: white;
   padding: 0.5rem 1rem;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
 }
 #logout-btn:hover {
-  background-color: #333;
+  background-color: #852828;
+  color: #fff;
+}
+#toggle-completed-btn{
+  background-color: rgb(42, 50, 170);
+  border: 1px solid #333;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+#toggle-completed-btn:hover{
+  background-color: #1c277e;
   color: #fff;
 }
 #new-task-form {

public/index.html

@@ -12,6 +12,7 @@
       <header>
         <h1>ToDo List</h1>
         <button id="logout-btn">Logout</button>
+        <button id="toggle-completed-btn">Show Completed Tasks</button>
       </header>
 
       <main>

public/js/index.js

@@ -3,6 +3,9 @@ document.addEventListener('DOMContentLoaded', async () => {
   const input = form.querySelector('input[name="task"]');
   const taskList = document.getElementById("task-list");
   const logoutBtn = document.getElementById('logout-btn'); 
+  const toggleCompletedBtn = document.getElementById('toggle-completed-btn'); 
+
+  let showCompletedTasks = false;  
 
   // Load the tasks when page is initiated
   async function loadTasks() {
@@ -10,11 +13,11 @@ document.addEventListener('DOMContentLoaded', async () => {
       const res = await fetch("/api/todos"); 
       const todos = await res.json(); 
 
-      // Verificar if the response has tasks
+      // Verify if the response has tasks
       if (todos.length > 0) {
         renderTasks(todos); 
       } else {
-        console.log('No hay tareas para mostrar.');
+        console.log('No tasks to show.');
       }
     } catch (err) {
       console.error("Error loading tasks:", err);
@@ -28,6 +31,8 @@ document.addEventListener('DOMContentLoaded', async () => {
       const taskItem = createTaskElement(todo);  
       taskList.appendChild(taskItem); 
     });
+
+    toggleCompletedVisibility(); 
   }
 
   // Function to create an element in DOM
@@ -36,6 +41,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     li.dataset.id = todo._id; 
     if (todo.isDone) {
       li.classList.add('completed');  
+      li.style.display = 'none'; 
     }
 
     li.innerHTML = `
@@ -54,6 +60,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     completeBtn.addEventListener("click", async () => {
       await toggleComplete(todo._id, !todo.isDone);
       li.classList.toggle("completed");  
+      toggleCompletedVisibility(); 
     });
 
     const deleteBtn = li.querySelector(".delete-btn");
@@ -90,6 +97,25 @@ document.addEventListener('DOMContentLoaded', async () => {
     return li;  
   }
 
+  // Function to toggle completed task visibility
+  function toggleCompletedVisibility() {
+    const completedTasks = document.querySelectorAll('.completed');
+    completedTasks.forEach(task => {
+      if (showCompletedTasks) {
+        task.style.display = 'block';
+      } else {
+        task.style.display = 'none';
+      }
+    });
+  }
+
+  // Toggle button event listener
+  toggleCompletedBtn.addEventListener('click', () => {
+    showCompletedTasks = !showCompletedTasks;
+    toggleCompletedVisibility();
+    toggleCompletedBtn.textContent = showCompletedTasks ? 'Hide Completed Tasks' : 'Show Completed Tasks';
+  });
+
   // Function to alternate to the completed state
   async function toggleComplete(taskId, isDone) {
     try {
@@ -99,10 +125,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         body: JSON.stringify({ isDone })
       });
       if (!res.ok) {
-        console.error('Error marcando la tarea como completada.');
+        console.error('Error marking task as complete.');
       }
     } catch (err) {
-      console.error('Error actualizando la tarea:', err);
+      console.error('Error updating task:', err);
     }
   }
 
@@ -113,10 +139,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         method: 'DELETE'
       });
       if (!res.ok) {
-        console.error('Error eliminando la tarea.');
+        console.error('Error deleting task.');
       }
     } catch (err) {
-      console.error('Error eliminando la tarea:', err);
+      console.error('Error deleting task:', err);
     }
   }
 
@@ -129,10 +155,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         body: JSON.stringify({ description: newDescription })
       });
       if (!res.ok) {
-        console.error('Error actualizando la tarea.');
+        console.error('Error updating task.');
       }
     } catch (err) {
-      console.error('Error actualizando la tarea:', err);
+      console.error('Error updating task:', err);
     }
   }
 
@@ -161,10 +187,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         const newTodo = await res.json();
         taskList.appendChild(createTaskElement(newTodo));  
       } else {
-        console.error('Error añadiendo tarea.');
+        console.error('Error adding task.');
       }
     } catch (err) {
-      console.error('Error añadiendo tarea:', err);
+      console.error('Error adding task:', err);
     }
   }