script.js

// DOM Elements
const taskInput = document.getElementById("task-input");
const addTaskBtn = document.getElementById("add-task-btn");
const taskList = document.getElementById("task-list");

// Add Task
const addTask = () => {
  const taskText = taskInput.value.trim();

  if (!taskText) {
    alert("Please enter the task!");
    return;
  }

  // Create Task Item
  const taskItem = document.createElement("li");
  taskItem.className = "task-item";

  // Add Task Text
  const taskSpan = document.createElement("span");
  taskSpan.textContent = taskText;
  taskSpan.addEventListener("click", toggleTaskCompletion);

  // Add Delete Button
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", () => deleteTask(taskItem));

  // Append Elements
  taskItem.appendChild(taskSpan);
  taskItem.appendChild(deleteBtn);
  taskList.appendChild(taskItem);

  // Clear Input
  taskInput.value = "";
};

// Toggle Task Completion
const toggleTaskCompletion = (event) => {
  const taskItem = event.target.parentElement;
  taskItem.classList.toggle("completed");
};

// Delete Task
const deleteTask = (taskItem) => {
  taskList.removeChild(taskItem);
};

// Event Listener for Add Button
addTaskBtn.addEventListener("click", addTask);

// Optional: Add "Enter" Key Support
taskInput.addEventListener("keypress", (event) => {
  if (event.key === "Enter") {
    addTask();
  }
});