<form id="todo-form">
  <input id="todo-input" name="title" required placeholder="New task" />
  <button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>

const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

let nextId = 1;

function createItem(title) {
  const id = String(nextId++);
  const li = document.createElement("li");
  li.dataset.id = id;

  const label = document.createElement("label");
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.addEventListener("change", () => {
    li.classList.toggle("done", checkbox.checked);
  });

  const text = document.createElement("span");
  text.textContent = title;

  const remove = document.createElement("button");
  remove.type = "button";
  remove.textContent = "Remove";
  remove.addEventListener("click", () => li.remove());

  label.append(checkbox, text);
  li.append(label, remove);
  return li;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const title = input.value.trim();
  if (!title) return;
  list.append(createItem(title));
  input.value = "";
  input.focus();
});