ডম ম্যানিপুলেশন (DOM Manipulation)

// querySelector — select the FIRST match (CSS selector syntax)
const title = document.querySelector("h1");
const btn = document.querySelector(".submit-btn");
const form = document.querySelector("#signup-form");

// querySelectorAll — select ALL matches (returns a NodeList)
const allCards = document.querySelectorAll(".card");
console.log(allCards.length); // number of .card elements

// Loop through all matches
allCards.forEach(card => {
  console.log(card.textContent);
});

// Other selectors (less common now, but still valid)
const byId = document.getElementById("main");
const byClass = document.getElementsByClassName("item");
const byTag = document.getElementsByTagName("p");

// (depends on the HTML page)

// Changing text and HTML
const heading = document.querySelector("h1");
heading.textContent = "Welcome!";
heading.innerHTML = "Welcome <em>back</em>!"; // parses HTML

// Changing styles
heading.style.color = "tomato";
heading.style.fontSize = "2rem";  // camelCase, not kebab-case!
heading.style.backgroundColor = "#f0f0f0";

// classList — the better way to style
const card = document.querySelector(".card");
card.classList.add("active");        // add a class
card.classList.remove("hidden");     // remove a class
card.classList.toggle("dark-mode");  // add if missing, remove if present
console.log(card.classList.contains("active")); // true

// Attributes
const img = document.querySelector("img");
img.setAttribute("src", "new-photo.jpg");
img.setAttribute("alt", "A cute puppy");
console.log(img.getAttribute("alt")); // "A cute puppy"

// Elements on page are updated visually
true
A cute puppy

// Creating and adding elements
const list = document.querySelector("#todo-list");

function addTodo(text) {
  const li = document.createElement("li");
  li.textContent = text;
  li.classList.add("todo-item");
  list.appendChild(li);
}

addTodo("Learn JavaScript");
addTodo("Build a project");
addTodo("Celebrate!");

// Event listener — react to clicks
const button = document.querySelector("#add-btn");
button.addEventListener("click", () => {
  const input = document.querySelector("#todo-input");
  if (input.value.trim()) {
    addTodo(input.value);
    input.value = ""; // clear the input
  }
});

// Event delegation — one listener handles all children
list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("completed");
    console.log(`Toggled: ${event.target.textContent}`);
  }
});

// Keyboard events
document.addEventListener("keydown", (e) => {
  console.log(`Key pressed: ${e.key}`);
  if (e.key === "Escape") console.log("Escape pressed!");
});

// (interactive — runs in a browser)
Toggled: Learn JavaScript
Key pressed: Escape
Escape pressed!