DOM Elements and Page Output

Recap

• in-class code

Housekeeping

• Friday afternoon:
  • Ash/Tony pair-code session -> WBDV Dark Mode Toggle
• Updated Schedule

---

1. clickHandler Overview

Materials

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

2. Form field variables with DOM output

Materials

• Basic native form controls
• Numeric field
• Node.textContent

Demo: GST Calculator with Form

• Gist: JS Activity - Form fields and DOM output
• Starter Code: 01-clickhandler-starter

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: Create a fully functional form that takes input from a form field and outputs to the page.
3. Follow the instructions on this page.

3. Demo: Vanilla JS Dark Mode Toggle

If there's time, we'll add a Dark Mode to the GST Calculator.

Materials:

• Ultimate Dark Mode Toggle

---

Lab Time

• JS Activity: Form fields and DOM output
  • Bonus Activity: Ratio to Percentage utility function
• Dark Mode Toggle upgrades: in-class code. Try the following upgrades to the dark mode toggle:
  • Add a transition to the colour change that matches the timing of the slider;
  • Add more colours to the form that also toggle;
  • Add a dynamic label that changes from "Enable Dark Mode!" to "Dark Mode Enabled!" to match the current state of the switch.

---

Prep

Review: Forms

• Your first form
• Basic native form controls
• Numeric field

HTML Output

• Element.innerHTML
• Node.textContent