To-do List

			<!-- A <form> means Enter adds a task, as well as the button. -->
			<form class="todo-form" id="todo-form">
				<label class="todo-label" for="todo-input">New task</label>
				<div class="todo-row">
					<input
						class="todo-input"
						type="text"
						id="todo-input"
						maxlength="100"
						autocomplete="off"
						required
					/>
					<button type="submit" class="todo-add">Add</button>
				</div>
			</form>

			<!-- The count is announced, so screen reader users hear each change. -->
			<p class="todo-count" id="todo-count" aria-live="polite"></p>

			<!-- JavaScript fills this list from the saved tasks. -->
			<ul class="todo-list" id="todo-list"></ul>
			<p class="todo-empty" id="todo-empty">
				Nothing to do yet. Add your first task above.
			</p>

/* :checked + label strikes through a done task, no JavaScript needed. */
.todo-item input:checked + label {
	color: #9a9aa6;
	text-decoration: line-through;
}

const STORAGE_KEY = "todo-list";

// localStorage only stores text, so tasks are saved and loaded as JSON.
function loadTasks() {
	const saved = localStorage.getItem(STORAGE_KEY);
	return saved ? JSON.parse(saved) : [];
}

function saveTasks() {
	localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

// The tasks live in this array; the page is drawn from it.
let tasks = loadTasks();

// Build one list item from one task.
function createTaskItem(task) {
	const item = document.createElement("li");
	item.className = "todo-item";

	const checkbox = document.createElement("input");
	checkbox.type = "checkbox";
	checkbox.id = `task-${task.id}`;
	checkbox.checked = task.done;
	checkbox.dataset.id = task.id;

	const label = document.createElement("label");
	label.htmlFor = checkbox.id;
	// textContent, not innerHTML: whatever someone types shows as plain text.
	label.textContent = task.text;

	const deleteButton = document.createElement("button");
	deleteButton.type = "button";
	deleteButton.className = "todo-delete";
	deleteButton.textContent = "Delete";
	// Every button says "Delete", so the label adds which task it deletes.
	deleteButton.setAttribute("aria-label", `Delete "${task.text}"`);
	deleteButton.dataset.id = task.id;

	item.append(checkbox, label, deleteButton);
	return item;
}

	// textContent, not innerHTML: whatever someone types shows as plain text.
	label.textContent = task.text;

function renderTasks() {
	list.replaceChildren(...tasks.map(createTaskItem));
	updateSummary();
}

form.addEventListener("submit", (event) => {
	// Without this, the browser would reload the page to send the form.
	event.preventDefault();
	const text = input.value.trim();
	if (!text) return;

	// Date.now() makes a simple id that's different for every task.
	tasks.push({ id: Date.now(), text, done: false });
	saveTasks();
	renderTasks();
	input.value = "";
	input.focus();
});

// One listener on the list hears every checkbox, even ones added later.
list.addEventListener("change", (event) => {
	if (event.target.type !== "checkbox") return;
	const task = tasks.find((t) => t.id === Number(event.target.dataset.id));
	task.done = event.target.checked;
	saveTasks();
	// Only the count changes, so the list isn't rebuilt and focus stays put.
	updateSummary();
});

list.addEventListener("click", (event) => {
	const button = event.target.closest(".todo-delete");
	if (!button) return;
	// filter keeps every task except the one being deleted.
	tasks = tasks.filter((task) => task.id !== Number(button.dataset.id));
	saveTasks();
	renderTasks();
	// The button that had focus is gone, so send focus somewhere useful.
	input.focus();
});