Create script.js

Author: sujitmahapatra

ToDoList/sujitmahapatra/script.js

@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const taskInput = document.getElementById("task-input");
+    const addTaskBtn = document.getElementById("add-task-btn");
+    const taskList = document.getElementById("task-list");
+    const clearAllBtn = document.getElementById("clear-all-btn");
+
+    addTaskBtn.addEventListener("click", function () {
+        const taskText = taskInput.value.trim();
+        if (taskText !== "") {
+            addTask(taskText);
+            taskInput.value = "";
+            clearAllBtn.style.display = "inline-block"; // Show the button
+        }
+    });
+
+    function addTask(taskText) {
+        const li = document.createElement("li");
+
+        li.innerHTML = `
+            <div class="flex justify-between items-center">
+                <span>${taskText}</span>
+                <input type="datetime-local" class="expected-completion">
+                <button class="complete-btn bg-green-500 hover:bg-green-600 text-white py-1 px-2 rounded">Completed</button>
+                <button class="delete-btn bg-red-500 hover:bg-red-600 text-white py-1 px-2 rounded">Delete</button>
+            </div>
+        `;
+
+        const completeBtn = li.querySelector(".complete-btn");
+        completeBtn.addEventListener("click", function () {
+            li.classList.toggle("completed");
+        });
+
+        const deleteBtn = li.querySelector(".delete-btn");
+        deleteBtn.addEventListener("click", function () {
+            li.remove();
+            // Check the number of tasks to show/hide the "Clear All" button
+            if (taskList.children.length === 0) {
+                clearAllBtn.style.display = "none"; // Hide the button
+            }
+        });
+
+        // Use setTimeout to add the animation class after a slight delay
+        setTimeout(function () {
+            li.classList.add("task-entry");
+        }, 10);
+
+        taskList.appendChild(li);
+    }
+
+    taskInput.addEventListener("keyup", function (event) {
+        if (event.key === "Enter") {
+            addTaskBtn.click();
+        }
+    });
+
+    clearAllBtn.addEventListener("click", function () {
+        taskList.innerHTML = ""; // Clear all tasks
+        clearAllBtn.style.display = "none"; // Hide the button
+    });
+});