Merge pull request #337 from Bayyana-kiran/main

Search, filter, clear all tasks should only be present when there is atleast one task present
Kritika30032002 · Jan 13, 2024 · ce8471e · ce8471e
2 parents a18b241 + 32439c9
commit ce8471e
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -158,25 +158,30 @@ <h3 class="text-center mb-4" id="maintitle">Add your tasks below :</h3>
 
       <!-- form to display all tasks loaded from localstorage -->
       <div class="text-center">
+
+      <div id="taskActions" style="display: none;">
         <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
         <div class="search-container mb-3">
           <input type="text" id="searchBar" placeholder=" Search tasks..."
             class="form-control w-75 mx-auto mt-3 inputcss">
         </div>
         <!-- sorting elements -->
-        <div class="dropdown">
-          <button class="btn btn-outline-dark dropbtn d-flex align-items-center  ml-2" onclick="myFunction();">
-            <ion-icon class="dropbtn" name="funnel-outline" style="font-size: 20px; margin-right: 6px"></ion-icon>
+        <div class="text-center">
+    <div class="dropdown d-inline-block">
+        <button class="btn btn-outline-dark dropbtn d-flex align-items-center ml-2" onclick="myFunction();">
+            <ion-icon class="dropbtn" name="funnel-outline" style="font-size: 30px; margin-right: 6px"></ion-icon>
             Sort By
             <ion-icon class="dropbtn" name="chevron-down-outline" style="font-size: 20px; margin-left: 6px"></ion-icon>
-          </button>
-          <div id="myDropdown" class="dropdown-content ml-2 mt-0.5">
+        </button>
+        <div id="myDropdown" class="dropdown-content ml-2 mt-0.5">
             <a onclick="sortByPriority('highToLow');" class="a1">High to Low Priority</a>
             <a onclick="sortByPriority('lowToHigh');" class="a2">Low to High Priority</a>
             <a onclick="sortByDueDate('early');" class="a3">Early To Do</a>
             <a onclick="sortByDueDate('late');" class="a4">Lately To Do</a>
-          </div>
         </div>
+    </div>
+</div>
+
 
         <!--Dynamic Task list-->
         <form id="newTaskForm" class="mt-3">
@@ -188,6 +193,7 @@ <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
         </button>
       </div>
     </div>
+    </div>
   </div>
 
   <br />
@@ -235,6 +241,39 @@ <h2 style=" text-align: center" class="mt-5 animate__animated animate__fadeInUp
 
     startTypedAnimation(); 
   </script>
+   <script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var taskList = document.getElementById('taskList');
+    var taskActions = document.getElementById('taskActions');
+
+    // Function to check and toggle the display of taskActions
+    function checkTasksAndToggle() {
+      if (taskList && taskList.children.length > 0) {
+        // At least one task is present, show the container
+        taskActions.style.display = 'block';
+      } else {
+        // No tasks, hide the container
+        taskActions.style.display = 'none';
+      }
+    }
+
+    // Check tasks initially
+    checkTasksAndToggle();
+
+    // Use MutationObserver to detect changes in the DOM
+    var observer = new MutationObserver(function (mutations) {
+      // Check tasks whenever the content of taskList changes
+      checkTasksAndToggle();
+    });
+
+    // Configure the observer to watch for changes in the child nodes of taskList
+    var observerConfig = { childList: true };
+
+    // Start observing
+    observer.observe(taskList, observerConfig);
+  });
+</script>
+
 
 
   <!-- button to start adding tasks by voice -->

diff --git a/index.js b/index.js
@@ -21,7 +21,6 @@ const priorityColors = {
   Completed: "task-completed",
 };
 
-
 const priorityValues = {
   High: 3,
   Medium: 2,
@@ -728,37 +727,43 @@ function toggleMode() {
 
 // Function to clear all tasks
 function clearAllTasks() {
+  const taskList = document.getElementById("taskList"); // Replace with your actual task list ID
   const confirmationBoxAll = document.getElementById("custom-confirm-all");
   const alertTitle = document.getElementById("confirm-msg-all");
   const confirmYesButtonAll = document.getElementById("confirm-yes-all");
   const confirmNoButtonAll = document.getElementById("confirm-no-all");
   const confirmCancelButtonAll = document.getElementById("confirm-cancel-all");
 
-  alertTitle.innerHTML = "&#9888; Are you sure you want to delete all tasks?";
-  alertTitle.className = "alert alert-danger";
-  alertTitle.role = "alert";
+  if (taskList.children.length > 0) {
+    alertTitle.innerHTML = "&#9888; Are you sure you want to delete all tasks?";
+    alertTitle.className = "alert alert-danger";
+    alertTitle.role = "alert";
 
-  confirmYesButtonAll.addEventListener("click", () => {
-    confirmationBoxAll.style.display = "none";
-    while (taskList.firstChild) {
-      taskList.removeChild(taskList.firstChild);
-    }
-    document.querySelector(".clear-btn").style.display = "none";
-    document.querySelector(".dropdown").style.display = "none";
-    tasksHeading.classList.add("hidden");
-    searchBar.classList.add("hidden");
-    saveTasksToLocalStorage();
-  });
+    confirmYesButtonAll.addEventListener("click", () => {
+      confirmationBoxAll.style.display = "none";
+      while (taskList.firstChild) {
+        taskList.removeChild(taskList.firstChild);
+      }
+      document.querySelector(".clear-btn").style.display = "none";
+      document.querySelector(".dropdown").style.display = "none";
+      tasksHeading.classList.add("hidden");
+      searchBar.classList.add("hidden");
+      saveTasksToLocalStorage();
+    });
 
-  confirmNoButtonAll.addEventListener("click", () => {
-    confirmationBoxAll.style.display = "none";
-  });
+    confirmNoButtonAll.addEventListener("click", () => {
+      confirmationBoxAll.style.display = "none";
+    });
 
-  confirmCancelButtonAll.addEventListener("click", () => {
-    confirmationBoxAll.style.display = "none";
-  });
+    confirmCancelButtonAll.addEventListener("click", () => {
+      confirmationBoxAll.style.display = "none";
+    });
 
-  confirmationBoxAll.style.display = "flex";
+    confirmationBoxAll.style.display = "flex";
+  } else {
+    // If there are no tasks, you may choose to show a message or take alternative action
+    // alert("No tasks to clear");
+  }
 }
 
 // Function to sort task list by due date