DOM Manipulation — Solutions

Jan 2026

JavaScript, DOM, Solutions

Syifa Fauziyah Arizal

Tried the challenges already? Good. Now let’s break them down like real front-end devs.

“DOM mastery is not magic. It’s just knowing what to touch — and when.”

✅ Challenge 1 — Todo Interaction

Requirements:

Click item → strike through
Double click → delete item

JavaScript


const input = document.querySelector("#todoInput");
const btn = document.querySelector("#addBtn");
const list = document.querySelector("#todoList");

btn.addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = input.value;

  // single click → toggle done
  li.addEventListener("click", () => {
    li.classList.toggle("done");
  });

  // double click → delete
  li.addEventListener("dblclick", () => {
    li.remove();
  });

  list.appendChild(li);
  input.value = "";
});

One element. Two behaviors. This is real DOM control.

🔢 Challenge 2 — Counter Upgrade

Requirements:

Add minus button
Set min & max limit

JavaScript


let count = 0;
const max = 10;
const min = 0;

const display = document.querySelector("#count");
const incBtn = document.querySelector("#increment");
const decBtn = document.querySelector("#decrement");

incBtn.addEventListener("click", () => {
  if (count < max) {
    count++;
    display.textContent = count;
  }
});

decBtn.addEventListener("click", () => {
  if (count > min) {
    count--;
    display.textContent = count;
  }
});

Boundaries = controlled UI. No wild numbers.

🌗 Challenge 3 — Persistent Theme

Requirements:

Save theme mode
Refresh page → keep the vibe

JavaScript


const toggle = document.querySelector("#toggleTheme");

// load saved theme
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark");
}

toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Small feature. Big user experience upgrade.

🧠 Why These Solutions Matter

You handled multiple events
You controlled state with variables
You made UI persistent
You wrote logic that users actually feel

This is no longer “learning JavaScript”. This is building interfaces.