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