script.js

const form = document.querySelector("#form");
const input = document.querySelector("#itemInput");
const list = document.querySelector("#list");
const emptyMessage = document.querySelector("#empty");

form.addEventListener("submit", handleAddItem);
list.addEventListener("click", handleListClick);

function handleAddItem(event) {
   event.preventDefault();

   const text = input.value.trim();
   if (!text) return;

   const li = createListItem(text);
   list.appendChild(li);

   input.value = "";
   toggleEmptyMessage();
}

function createListItem(text) {
   const li = document.createElement("li");

   li.innerHTML = `
    <span>${text}</span>
    <button class="remove-btn" aria-label="Remover item">✖</button>
  `;

   return li;
}

function handleListClick(event) {
   const target = event.target;
   const li = target.closest("li");

   if (!li) return;

   if (target.tagName === "SPAN") {
      li.classList.toggle("done");
   }

   if (target.classList.contains("remove-btn")) {
      li.style.opacity = "0";
      setTimeout(() => {
         li.remove();
         toggleEmptyMessage();
      }, 300);
   }
}

function toggleEmptyMessage() {
   emptyMessage.style.display = list.children.length ? "none" : "block";
}