add styling in style.css

Author: AngelaMcLeary

Sprint-3/todo-list/index.html

@@ -20,10 +20,8 @@ <h1>My ToDo List</h1>
 
     <ul id="todo-list" class="todo-list">      
     </ul>
-    <button id="delete-completed-btn">
-      <!-- update styling -->
-      Delete completed tasks 
-    </button>
+    <!-- i added this -->
+    <button id="delete-completed-btn" class="delete-completed-btn"><span class="fa-solid fa-trash-arrow-up" aria-hidden="true"></span> Delete Completed Tasks</button>
     <!-- 
       This is a template for the To-do list item. 
       It can simplify the creation of list item node in JS script.

Sprint-3/todo-list/style.css

@@ -41,7 +41,7 @@ h1 {
 .todo-input button {
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   border: none;
   border-radius: 6px;
@@ -105,3 +105,20 @@ h1 {
   text-decoration: line-through;
   color: gray;
 }
+
+#delete-completed-btn {
+  width: 100%;
+  margin-top: 15px;
+  padding: 10px;
+  background-color: gray;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#delete-completed-btn:hover {
+  background-color: #e74c3c;
+}

Sprint-3/todo-list/todos.mjs

@@ -30,10 +30,10 @@ export function toggleCompletedOnTask(todos, taskIndex) {
 
 // Removes all completed ToDos from the given list
 export function deleteCompleted(todos) {
-  // We iterate backwards to avoid index shifting issues during mutation
+  // Loop backwards so removing items doesn't shift indexes and skip elements
   for (let i = todos.length - 1; i >= 0; i--) {
     if (todos[i].completed) {
       todos.splice(i, 1);
     }
   }
-}
+}