DOM and Events

The DOM is the browser's live representation of the page. JavaScript reads and changes it when users interact with the UI.

Select Elements

const button = document.querySelector("#saveButton");
const cards = document.querySelectorAll(".course-card");

Update the Page

const message = document.querySelector("#message");
message.textContent = "Saved successfully";
message.classList.add("success");

Handle Events

button.addEventListener("click", function () {
  message.textContent = "Button clicked";
});

Forms

const form = document.querySelector("#loginForm");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  const data = new FormData(form);
  console.log(data.get("email"));
});