Buttons and Events

Recap

• in-class code

Housekeeping

• Changes to:
  • Achievement 2: Before and After
  • Achievement 3: Press of a Button

---

1. Spoiler Demo

Materials

• Refactor code into functions.

2. Introduction to Events

Materials

• document.querySelector()
• EventTarget.addEventListener()

Demo: Triggering functions with a button

• Starter code: Spoilers from Function Refactor session

Breakout Activity

In pairs: Try to repeat what Tony did in his demo

1. Pick one of the functions from today's spoilers
2. Goal: refactor the code so that the prompt(s) start on a button click
3. Create a button element
4. Assign that element to a variable with document.querySelector()
5. Wrap the prompt code into a clickHandler function.
6. Add that function as a button click event using button.addEventListener()

3. More events and elements

• Document Object Model
• Event Reference

---

Lab Time

Main Room: Dark Mode Toggle

• Based on this Issue
• Materials: Ultimate Dark Mode Toggle

---

Prep

Events and Element.addEventListener()

• MDN Readings:
  • Document Object Model
    • document.querySelector()
  • Introduction to events
  • EventTarget.addEventListener()
  • Event Reference
• Video by Steve Griffith
  • Introduction to JavaScript Event Listeners by Steve Griffith

Changing CSS with JS

• 'Element.classList'
• Code Examples
• Code Challenge: CSS Toggles with element.classList