JavaScript Events

const btn = document.querySelector("#myBtn");

// Syntax: element.addEventListener("event", callback)
btn.addEventListener("click", function() {
  console.log("Button clicked!");
});

// Arrow function version (cleaner)
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

// Named function (can be removed later)
function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick); // remove it later

// Mouse events
el.addEventListener("click",      handler);  // single click
el.addEventListener("dblclick",   handler);  // double click
el.addEventListener("mouseover",  handler);  // mouse enters
el.addEventListener("mouseout",   handler);  // mouse leaves
el.addEventListener("mousemove",  handler);  // mouse moving

// Keyboard events
document.addEventListener("keydown",  handler);  // key pressed
document.addEventListener("keyup",    handler);  // key released

// Form events
form.addEventListener("submit",  handler);
input.addEventListener("input",   handler);  // value changes
input.addEventListener("change",  handler);  // loses focus after change
input.addEventListener("focus",   handler);  // gets focus
input.addEventListener("blur",    handler);  // loses focus

// Window events
window.addEventListener("load",   handler);  // page fully loaded
window.addEventListener("resize", handler);  // window resized
window.addEventListener("scroll", handler);  /* page scrolled */

btn.addEventListener("click", (event) => {  // "e" or "event"
  console.log(event.type);        // "click"
  console.log(event.target);      // the element clicked
  console.log(event.clientX);     // X position of click
  event.preventDefault();        // stop default action
  event.stopPropagation();        // stop event bubbling up
});

// Prevent form from submitting (validate first)
form.addEventListener("submit", (e) => {
  e.preventDefault();
  // validate inputs here
  console.log("Form validated — now submit");
});

// Keyboard — check which key
document.addEventListener("keydown", (e) => {
  console.log(e.key);   // "Enter", "Escape", "a", etc.
  if (e.key === "Escape") closeModal();
});

const toggleBtn = document.querySelector("#theme-toggle");

toggleBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
  const isDark = document.body.classList.contains("dark-mode");
  toggleBtn.textContent = isDark ? "☀️ Light" : "🌙 Dark";
  localStorage.setItem("theme", isDark ? "dark" : "light");
});

// Restore theme on page load
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}