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!");
        }
    });
 });