Mark All Done

index.html

@@ -11,7 +11,6 @@
     <div class="container">
       <h1>Developer's Todo List</h1>
       <button id="mode">dark</button> <!--Mode-->
-      <h2 id="itemcount">Number of Tasks: </h2>
       <form id="todo-form">
         <input
           type="text"
@@ -21,6 +20,8 @@ <h2 id="itemcount">Number of Tasks: </h2>
         />
         <button type="submit" id="add">Add Task</button>
       </form>
+      <h2 id="itemcount">Number of Tasks: </h2>
+      <button id="mark-all-done">Mark All as Done?</button>
       <ul id="todo-list"></ul>
     </div>
     <script src="script.js"></script>

script.js

@@ -2,6 +2,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const todoForm = document.getElementById("todo-form");
   const todoInput = document.getElementById("todo-input");
   const todoList = document.getElementById("todo-list");
+  const markAllDoneButton = document.getElementById("mark-all-done");
 
   // Load todos from localStorage
   let todos = JSON.parse(localStorage.getItem("todos")) || [];
@@ -44,18 +45,25 @@ document.addEventListener("DOMContentLoaded", () => {
 
   todoForm.addEventListener("submit", (e) => {
     e.preventDefault();
-    const text = todoInput.value.trim();
-    if (text) {
-      const todo = {
-        id: Date.now(),
-        text,
-        completed: false,
-      };
-      todos.push(todo);
-      todoInput.value = "";
+      const text = todoInput.value.trim();
+      if (text) {
+          const todo = {
+              id: Date.now(),
+              text,
+              completed: false,
+          };
+          todos.push(todo);
+          todoInput.value = "";
+          saveTodos();
+          renderTodos();
+      }
+  });
+
+  markAllDoneButton.addEventListener("click", () => {
+      todos.forEach(todo => todo.completed = true);
       saveTodos();
       renderTodos();
-    }
+
   });
 
   function countListItems() {
@@ -81,6 +89,7 @@ const change = () =>{
     document.querySelector("body").style.backgroundColor = "black";
     document.querySelector("body").style.color = "#f5f5f5";
     document.querySelector("h1").style.color = "white";
+    document.querySelector("h2").style.color = "white";
   }
 
   else{
@@ -91,6 +100,7 @@ const change = () =>{
     document.querySelector("body").style.backgroundColor = "#f5f5f5";
     document.querySelector("body").style.color = "black";
     document.querySelector("h1").style.color = "black";
+    document.querySelector("h2").style.color = "black";
   }
 }
 mode.addEventListener("click", change);

styles.css

@@ -24,6 +24,13 @@ h1 {
   margin-bottom: 1.5rem;
 }
 
+h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 1.5rem;
+}
+
+
 #todo-form {
   display: flex;
   gap: 0.5rem;
@@ -90,4 +97,14 @@ h1 {
   border-radius: 4px;
   cursor: pointer;
   float: right;
+}
+
+#mark-all-done {
+  margin: 2mm;
+  padding: 0.5rem 1rem;
+  background: #0066cc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
 }