Advanced JavaScript

2026-02-24 00:29:58 +05:30
parent a4fedd5081
commit 6fd597f2a9
2 changed files with 73 additions and 0 deletions
--- a/Week-03/Day_02/index.html
+++ b/Week-03/Day_02/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <style>
+        .highlight { background-color: #e0f7fa; border: 2px solid #00796b; }
+        .task-item { cursor: pointer; padding: 5px; border-bottom: 1px solid #ccc; }
+        .task-item:hover { color: red; text-decoration: line-through; }
+    </style>
+</head>
+<body>
+
+    <h2>My Task Manager</h2>
+    
+    <form id="taskForm">
+        <input type="text" id="taskInput" placeholder="Enter a new task...">
+        <button type="submit" id="addBtn">Add Task</button>
+    </form>
+
+    <ul id="taskList">
+    </ul>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/Week-03/Day_02/script.js
+++ b/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!");
+        }
+    });
+});