JavaScript in the browser: the DOM and events

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DOM: first steps</title>
  <script src="select.js" defer></script>
</head>
<body>
  <h1>Today's tasks</h1>
  <ul id="task-list">
    <li class="task">Buy coffee beans</li>
    <li class="task done">Clean the coffee machine</li>
  </ul>
  <p id="status" hidden>All tasks are done</p>
  <button type="button" id="add">Add a task</button>
</body>
</html>

// The first matching element, or null if there is none
const title = document.querySelector("h1");
console.log(title.textContent);                    // → Today's tasks
console.log(document.querySelector(".missing"));   // → null

// All matching elements: a static NodeList
const tasks = document.querySelectorAll("#task-list .task");
console.log(tasks.length);                         // → 2
tasks.forEach((task) => console.log(task.textContent)); // → Buy coffee beans, then Clean the coffee machine

// From an element you can walk up and down the tree
const list = tasks[0].parentElement;
console.log(list.id, list.children.length);        // → task-list 2
console.log(document.querySelector(".done").textContent); // → Clean the coffee machine

const list = document.querySelector("#task-list");
const [first, second] = list.querySelectorAll(".task");

// Text
first.textContent = "Buy espresso beans";
console.log(first.textContent);                    // → Buy espresso beans

// Classes
first.classList.add("urgent");
second.classList.remove("done");
console.log(first.className);                      // → task urgent
console.log(second.classList.toggle("done"));      // → true
console.log(second.classList.contains("done"));    // → true

// Attributes and data attributes
first.setAttribute("title", "Due today");
first.dataset.priority = "high";                   // in HTML: data-priority="high"
console.log(first.outerHTML); // → <li class="task urgent" title="Due today" data-priority="high">Buy espresso beans</li>

// The hidden property shows and hides an element
const statusNote = document.querySelector("#status");
statusNote.hidden = false;

// A new element: create, fill, insert
const item = document.createElement("li");
item.className = "task";
item.textContent = "Call the technician";
list.append(item);
console.log(list.children.length);                 // → 3

// textContent does not parse HTML: markup from input stays text
const userInput = "<b>Urgent</b>";
item.textContent = userInput;
console.log(item.children.length);                 // → 0
item.innerHTML = userInput;                        // never do this with user input
console.log(item.children.length);                 // → 1

item.remove();
console.log(list.children.length);                 // → 2

const button = document.querySelector("#add");
let clicks = 0;

button.addEventListener("click", (event) => {
  clicks++;
  console.log(event.type, event.target.id, clicks); // → click add 1, after the second click — click add 2
});

// This listener runs once and removes itself
button.addEventListener("click", () => console.log("first click"), { once: true });

function logClick(event) {
  console.log(`${event.currentTarget.tagName}: target = ${event.target.tagName}`);
}

document.body.addEventListener("click", logClick);
document.querySelector("#task-list").addEventListener("click", logClick);
document.querySelector(".task").addEventListener("click", logClick);

// A click on the first task prints:
// LI: target = LI
// UL: target = LI
// BODY: target = LI

form.addEventListener("submit", (event) => {
  event.preventDefault();                  // no page reload
  const data = new FormData(form);
  const title = String(data.get("title")).trim();
  if (title === "") return;                // whitespace only

  list.append(createTask(title));
  form.reset();
  input.focus();
  renderCounter();
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Task list</title>
  <style>
    .done span { text-decoration: line-through; color: #6b7280; }
  </style>
  <script src="app.js" defer></script>
</head>
<body>
  <main>
    <h1>Task list</h1>
    <form id="task-form">
      <label for="task-title">New task</label>
      <input id="task-title" name="title" type="text" autocomplete="off" required>
      <button type="submit">Add</button>
    </form>
    <ul id="task-list"></ul>
    <p id="task-counter" aria-live="polite"></p>
  </main>
</body>
</html>

const form = document.querySelector("#task-form");
const input = document.querySelector("#task-title");
const list = document.querySelector("#task-list");
const counter = document.querySelector("#task-counter");

function renderCounter() {
  const left = list.querySelectorAll("li:not(.done)").length;
  counter.textContent = `Tasks left: ${left}`;
}

function createTask(title) {
  const item = document.createElement("li");

  const text = document.createElement("span");
  text.textContent = title;                // user input goes in as text only

  const toggle = document.createElement("button");
  toggle.type = "button";
  toggle.dataset.action = "toggle";
  toggle.setAttribute("aria-pressed", "false");
  toggle.textContent = "Done";

  const remove = document.createElement("button");
  remove.type = "button";
  remove.dataset.action = "remove";
  remove.textContent = "Delete";

  item.append(text, " ", toggle, " ", remove);
  return item;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();                  // no page reload
  const data = new FormData(form);
  const title = String(data.get("title")).trim();
  if (title === "") return;                // whitespace only

  list.append(createTask(title));
  form.reset();
  input.focus();
  renderCounter();
});

// One listener for the whole list: event delegation
list.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-action]");
  if (!button) return;                     // the click missed the buttons
  const item = button.closest("li");

  if (button.dataset.action === "toggle") {
    const isDone = item.classList.toggle("done");
    button.setAttribute("aria-pressed", String(isDone));
  }
  if (button.dataset.action === "remove") {
    item.remove();
  }
  renderCounter();
});

renderCounter();