script.js

// Select input, button, and list elements
const input = document.getElementById("task-input");
const addBtn = document.getElementById("add-btn");
const taskList = document.getElementById("task-list");

// ----------------------------
// Add Task Function
// ----------------------------

addBtn.onclick = function () {
  // TODO: Step 1 - Get the text entered by the user
  // Hint: Use input.value

  // TODO: Step 2 - Check if input is empty
  // If yes, show an alert message and return (stop function execution)

  // TODO: Step 3 - Create a new <li> element for the task
  // Hint: document.createElement("li")

  // TODO: Step 4 - Create a <span> to hold the task text
  // Hint: span.textContent = taskText;

  // TODO: Step 5 - Add a click event to toggle line-through on the text
  // Hint: Change span.style.textDecoration between "line-through" and "none"

  // TODO: Step 6 - Add a button to mark task as done (✔)
  // - Create a button element
  // - Set textContent to "✔"
  // - On click, toggle line-through just like above
  // - Append it to the <li>

  // TODO: Step 7 - Add a delete button (🗑️)
  // - Create another button element
  // - Set textContent to a delete icon (e.g., "🗑️" or "❌")
  // - On click, remove the <li> from the list
  // - Hint: Use taskList.removeChild(li);

  // TODO: Step 8 - Append all elements to the list item (<li>)
  // Order: span → tickBtn → deleteBtn

  // TODO: Step 9 - Add the list item to the main task list (<ul> or <ol>)
  // Hint: taskList.appendChild(li);

  // TODO: Step 10 - Clear the input field after adding
  // Hint: input.value = "";
};