script.js

const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const clearBtn = document.getElementById('clearBtn');
const taskList = document.getElementById('taskList');

function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText === '') {
    alert("⚠️ Please enter a task!");
    return;
  }

  const li = document.createElement('li');
  li.textContent = taskText;

  li.addEventListener('click', () => {
    li.classList.toggle('completed');
  });

  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '🗑️ Delete';
  deleteBtn.className = 'deleteBtn';
  deleteBtn.addEventListener('click', (e) => {
    e.stopPropagation(); // this is to prevent it from marking complete
    li.remove();
  });

  li.appendChild(deleteBtn);
  taskList.appendChild(li);

  taskInput.value = '';
}

function clearAllTasks() {
  if (taskList.children.length === 0) {
    alert("⚠️ No tasks to clear!");
    return;
  }
  if (confirm("Are you sure you want to delete all tasks? ❌")) {
    taskList.innerHTML = '';
  }
}

addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask();
});
clearBtn.addEventListener('click', clearAllTasks);