Week 3: Signal + State Week 3

Unit: Adaptive Systems

Interaction Question: How does an interface remember what a user asked it to do?

Learning Outcomes

  • Refactor portfolio styles into a token-driven system using `variables.css`
  • Implement theme state with `data-theme` instead of presentation-only classes
  • Persist user preferences with `localStorage`
  • Apply a preference hierarchy (user choice -> system -> default)
  • Use `matchMedia` for system preference detection
  • Respect `prefers-reduced-motion` in both CSS and JavaScript decisions
  • Prepare Project 1 for submission as a coherent signal-and-state system

Curriculum Activities

Practice

  • Practice 3 1 Canvas
    weeks/week-3/practice/practice-3-1-canvas.html
  • Practice 3-1: The Inheritance
    weeks/week-3/practice/practice-3-1-the-inheritance.md
  • Practice 3-2: The Preference
    weeks/week-3/practice/practice-3-2-the-preference.md

Lectures

  • Lecture 3.1: Systems That Respond
    weeks/week-3/lectures/archive/lecture-1-systems-that-respond.md
  • Lecture 3.2: Persistence & Preference
    weeks/week-3/lectures/archive/lecture-2-persistence-and-preference.md
  • Lecture 3.3: State Patterns & Accessibility
    weeks/week-3/lectures/archive/lecture-3-state-and-accessibility.md
  • Lecture 1.5: Why We Do Math the Hard Way
    weeks/week-3/lectures/lecture-week-3-0-why-the-hard-way.md
  • Lecture: Signal & State
    weeks/week-3/lectures/lecture-week-3-1-signal-and-state.md
  • Lecture Week 3 2 Signal And State
    weeks/week-3/lectures/lecture-week-3-2-signal-and-state.md

Canvas Alignment

Module: week 3 The Memory // localStorage, preference, & persistance:

  • active Engage 3-1 // Learning Log week-2
  • active Practice 3-1 // The Inheritance
  • active Build 3-2 // The Preference
  • active Project 1 // signal & state -- designing for preference
  • active Reflect: week 3 -- Visual Notes