48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
"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!");
|
|
}
|
|
});
|
|
}); |