Skip to content
WebDev Path
Back

Week 7: The DOM and events

Next video

Free lesson by Web Dev Simplified on YouTube

About this lesson

Module:
JavaScript
Time:
about 11 hours
Video:
19 min

Connect JavaScript to the page so it reacts to what users do.

By the end of this week you can

  • Select, create and update elements
  • Handle clicks, input and form submits
  • Save data in localStorage

Learn

  • querySelector and the DOM tree
  • Creating and updating elements
  • Event listeners and event delegation
  • localStorage

Read or watch

Practice

  1. Build a to-do list that survives a page refresh
  2. Validate a form and show friendly errors

Build

Add a dark mode toggle that remembers the user's choice.

Check your understanding

Score 4 out of 5 to complete this week.

  1. 1. Which method finds the first element that matches a CSS selector?
  2. 2. Why is textContent safer than innerHTML for user input?
  3. 3. What does event.preventDefault() do on a form submit?
  4. 4. What is event delegation?
  5. 5. Where should a script tag go so it can find elements, without blocking rendering?
0 of 5 answered