Advanced JavaScript

Week-03/Day_02/script.js

@@ -0,0 +1,48 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+    alert("Welcome! The page is ready.");
+
+    const form = document.querySelector("#taskForm");
+    const input = document.querySelector("#taskInput");
+    const taskList = document.querySelector("#taskList");
+
+    input.addEventListener("focus", () => input.classList.add("highlight"));
+    input.addEventListener("blur", () => input.classList.remove("highlight"));
+
+    form.addEventListener("submit", (event) => {
+        event.preventDefault();
+
+        const taskValue = input.value.trim();
+
+        if (taskValue === "") {
+            alert("Please enter a task!");
+            return;
+        }
+
+        const li = document.createElement("li");
+        li.className = "task-item";
+        li.textContent = taskValue;
+
+        taskList.append(li);
+        
+        alert(`Task Added: ${taskValue}`);
+        input.value = "";
+    });
+
+    taskList.addEventListener("click", (event) => {
+        if (event.target.classList.contains("task-item")) {
+            const removedTask = event.target.textContent;
+            event.target.remove(); 
+            alert(`Deleted: ${removedTask}`);
+        }
+    });
+
+    input.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+            input.value = "";
+            input.blur();
+            alert("Input cleared via Escape key!");
+        }
+    });
+});