The DOM and events: changing the page and responding to clicks, typing and more

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1  "Juma's Shop"
        └── ul#cart
            ├── li  "Unga"
            └── li  "Sugar"

<h1 id="title">Juma's Shop</h1>
<p class="note">Open daily 8am–8pm</p>
<ul id="cart"><li>Unga</li><li>Sugar</li><li>Milk</li></ul>
<script>
  const title = document.querySelector("#title");        // first match (CSS selector)
  const note = document.querySelector(".note");
  const items = document.querySelectorAll("#cart li");    // all matches (a NodeList)
  const sameTitle = document.getElementById("title");     // by id (no #)

  console.log(title.textContent);
  console.log(note.textContent);
  console.log(items.length, "items in the cart");
  items.forEach((li) => console.log("-", li.textContent));
</script>

<h2 id="msg">Loading…</h2>
<p id="price"></p>
<div id="box"></div>
<script>
  document.querySelector("#msg").textContent = "Welcome back, Wanjiku!";
  document.querySelector("#price").textContent = "Total: KSh " + (180 * 3).toLocaleString();

  // innerHTML parses HTML: only use with trusted content
  document.querySelector("#box").innerHTML = "<strong>Free delivery</strong> on orders over KSh 2,000";
</script>

<style>
  .highlight { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 8px; }
  .hidden { display: none; }
</style>
<p id="offer">Weekend offer: 10% off</p>
<a id="link" href="#">Our shop</a>
<img id="pic" src="https://picsum.photos/120/80" alt="Shop">
<p id="secret" class="hidden">Secret discount code: KARIBU10</p>
<script>
  const offer = document.querySelector("#offer");
  offer.classList.add("highlight");          // add a class
  offer.classList.toggle("bold");            // add if missing, remove if present
  console.log(offer.classList.contains("highlight"));   // true

  const link = document.querySelector("#link");
  link.setAttribute("href", "https://marzleytechsolutions.co.ke");
  link.textContent = "Visit Marzley Tech";

  document.querySelector("#pic").alt = "Inside our Kisumu shop";

  document.querySelector("#secret").classList.remove("hidden");   // show it

  offer.style.fontSize = "20px";             // inline style (camelCase property)
</script>

<ul id="list"></ul>
<script>
  const list = document.querySelector("#list");
  const products = ["Unga 2kg", "Sugar 1kg", "Milk 500ml"];

  for (const name of products) {
    const li = document.createElement("li");   // create
    li.textContent = name;                     // safe text
    list.append(li);                           // insert at the end
  }

  const first = document.createElement("li");
  first.textContent = "Bread (new!)";
  list.prepend(first);                         // insert at the start

  list.lastElementChild.remove();              // remove the last item
</script>

<button id="btn">Add to cart</button>
<p id="count">Items in cart: 0</p>
<script>
  let count = 0;
  const btn = document.querySelector("#btn");
  const out = document.querySelector("#count");

  btn.addEventListener("click", () => {
    count++;
    out.textContent = "Items in cart: " + count;
  });
</script>

<input id="search" placeholder="Search products">
<p id="info"></p>
<script>
  const search = document.querySelector("#search");
  const info = document.querySelector("#info");

  search.addEventListener("input", (event) => {
    info.textContent = `You typed: "${event.target.value}" (${event.target.value.length} characters)`;
  });

  search.addEventListener("keydown", (event) => {
    if (event.key === "Escape") { search.value = ""; info.textContent = "Cleared"; }
  });
</script>

<form id="order">
  <label for="phone">M-Pesa number</label>
  <input id="phone" name="phone" type="tel" placeholder="0712 345 678">
  <label for="qty">Quantity</label>
  <input id="qty" name="qty" type="number" value="1" min="1">
  <button type="submit">Order</button>
  <p id="feedback" role="status"></p>
</form>
<script>
  const form = document.querySelector("#order");
  const feedback = document.querySelector("#feedback");

  form.addEventListener("submit", (e) => {
    e.preventDefault();                          // stop the page reloading
    const phone = form.phone.value.replace(/\D/g, "");
    const qty = Number(form.qty.value);

    if (!/^(0|254)[17]\d{8}$/.test(phone)) {
      feedback.textContent = "Enter a valid Safaricom or Airtel number.";
      form.phone.focus();
      return;
    }
    feedback.textContent = `Order received: ${qty} item(s). We'll send an M-Pesa prompt to ${phone}.`;
  });
</script>

<ul id="tasks">
  <li>Buy unga <button class="del">✕</button></li>
  <li>Pay rent <button class="del">✕</button></li>
</ul>
<button id="add">Add task</button>
<script>
  const tasks = document.querySelector("#tasks");
  tasks.addEventListener("click", (e) => {
    const btn = e.target.closest(".del");      // did the click happen on a delete button?
    if (btn) btn.closest("li").remove();
  });

  let n = 1;
  document.querySelector("#add").addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = "New task " + n++ + " ";
    const del = document.createElement("button");
    del.className = "del";
    del.textContent = "✕";
    li.append(del);
    tasks.append(li);                            // works without adding new listeners
  });
</script>