Merge pull request #105 from piyushkdas0611/main

added a clear all task button

index.html

@@ -73,6 +73,8 @@ <h2 class="text-center mb-4">ADD ITEMS</h2>
           />
       </form>
 
+          <button id="clearAllTasks" class="btn btn-danger clear_btn" onclick="clearAllTasks();">Clear All Tasks</button>
+
         <div class="text-center">
           <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
 

index.js

@@ -101,6 +101,10 @@ function addItem(e) {
     if (newItem.trim() === "") return false;
     else document.getElementById("item").value = "";
 
+    if(newItem.trim() !== "") {
+        document.querySelector(".clear_btn").style.display = "inline";
+    }
+
     const li = document.createElement("li");
     li.className = "list-group-item";
 
@@ -318,4 +322,25 @@ function toggleMode() {
             path.style.fill = '#000'; // Change the fill color to black for light mode
         });
     }
-}
+}
+
+
+function clearAllTasks() {
+
+    const ulElement = document.getElementById("items");
+
+
+    // Removes all tasks from the task list
+    while (ulElement.firstChild) {
+        ulElement.removeChild(ulElement.firstChild);
+    }
+
+    // Hide the button after the task list is cleared
+    document.querySelector(".clear_btn").style.display = "none";
+    console.log("task cleared");
+
+    // Hide the tasks heading since there are no tasks left
+
+    const tasksHeading = document.getElementById("heading-tasks");
+    tasksHeading.classList.add("hidden");
+}

style.css

@@ -176,12 +176,25 @@ body.dark-mode::before {
   transition: opacity 0.3s;
 }
 
-.form_btn:hover {
+.form_btn:hover, .clear_btn:hover{
   opacity: 0.8;
   outline: auto;
   border: 3px solid rebeccapurple;
 }
 
+.clear_btn {
+  color: #fff;
+  letter-spacing: 0.11rem;
+  border: none;
+  background: linear-gradient(to right, rgb(225, 1, 1), rgb(236, 70, 70));
+  padding: 0.6rem 2rem;
+  border-radius: 5rem;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  margin: 1rem 0;
+  display: none;
+}
+
 .opacity {
   opacity: 0.8;
   outline: auto;