Week 2: The Memory Week 2

Unit: Adaptive Systems

Interaction Question: How does it adapt to me?

Learning Outcomes

  • Use `document.querySelector()` to find elements in the DOM
  • Implement `addEventListener()` to respond to user interactions
  • Apply `classList.toggle()` to change element state
  • Build a working light/dark theme toggle with CSS Custom Properties
  • Store user preferences using `localStorage`
  • Detect system color scheme preference with JavaScript
  • Implement a preference hierarchy (user choice → system → default)
  • Respect `prefers-reduced-motion` in CSS

Curriculum Activities

Learn

  • Learn: Figma Variables
    weeks/week-2/learn/learn-2-1-figma-variables/learn-2-1-figma-variables.md
  • Learn: Codedex Conditionals Tutorial
    weeks/week-2/learn/learn-2-2-codedex-conditionals.md
  • Learn: The Story Teller Tutorial (Optional)
    weeks/week-2/learn/learn-2-3-story-teller-tutorial.md
  • Index
    weeks/week-2/learn/story-teller-tutorial/index.html

Practice

  • Practice 2-1: The Switch
    weeks/week-2/practice/practice-2-1-the-switch.md
  • Practice 2-2: The Memory
    weeks/week-2/practice/practice-2-2-the-memory.md

Build

  • Build: The Foundation
    weeks/week-2/build/build-2-1-the-foundation.md

Reflect

  • R&D // Weekly Visual Notes
    weeks/week-2/reflect/reflect-2-1-visual-notes.md

Lectures

  • Week 2 Lecture: From Figma to Code
    weeks/week-2/lectures/lecture-week-2-figma-to-code.md

Resources

  • Preference Hierarchy Diagram
    weeks/week-2/resources/preference-hierarchy-diagram.md
  • Week 2 Resources: Remembering Choices
    weeks/week-2/resources/week-2-resources.md

Canvas Alignment

Module: week 2: The Structure of Design // Systems and Tokens

  • active Engage 2-1 // Learning Log week-1
  • active Learn 2-1 // figma-variables
  • active Learn 2-2 // codedex.io conditionals
  • active learn 2-x // The Story Teller (backup tutorial)
  • active Practice 2-1 // The Switch
  • unpublished workshop 2-1 // figma variables workshop
  • active Build 2-1 // The Foundation
  • active Reflect: week 2 -- Visual Notes