Glasgow | Jan-26 | Elisabeth Matulian | Sprint 3 | Todo list app

Sprint-3/todo-list/index.html

@@ -20,6 +20,7 @@ <h1>My ToDo List</h1>
 
     <ul id="todo-list" class="todo-list">      
     </ul>
+    <button id="delete-completed-btn" class="del-completed-btn">Delete completed tasks</button>
 
     <!-- 
       This is a template for the To-do list item. 

Sprint-3/todo-list/script.mjs

@@ -73,4 +73,9 @@ function createListItem(todo, index) {
   });
 
   return li;
-}
+}
+
+document.getElementById("delete-completed-btn").addEventListener("click", () => {
+  Todos.deleteCompleted(todos);
+  render();
+});

Sprint-3/todo-list/style.css

@@ -101,6 +101,17 @@ h1 {
   color: red;
 }
 
+.del-completed-btn {
+  width: 100%;
+  height: 40px;
+  font-size: 16px;
+  background-color: #ef2121;
+  color: rgb(255, 255, 255);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
 .todo-item.completed .description {
   text-decoration: line-through;
   color: gray;

Sprint-3/todo-list/todos.mjs

@@ -26,4 +26,14 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
+}
+
+// Delete all completed tasks from the list
+export function deleteCompleted(todoList) {
+  // creating filtered object that holds not completed tasks
+  let filteredList = todoList.filter((element) => element.completed === false);
+  // removing all properties from todoList(todos)
+  todoList.length = 0;
+  // adding filtered tasks to todoList(todos)
+  todoList.push(...filteredList);
 }

Sprint-3/todo-list/todos.test.mjs

@@ -130,3 +130,16 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+
+describe("deleteCompletedTasks()", () => {
+
+  test("Delete 2 Completed task", () => {
+    const todos = createMockTodos();
+    const todosBeforeDeletion = createMockTodos();
+    const lengthBeforeDeletion = todos.length;
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(lengthBeforeDeletion - 2);
+  });
+
+});