Lesson 03 | Act 3: Let Users Press It

Act 3: Let Users Press It (Episodes 6-7)

From pure logic to a visible UI

Episode 6: Draw a Calculator

Scene: The engine calculates, but the user still sees a blank page.

• HTML structure: display + keypad + history panel placeholder, semantic tags
• CSS Grid layout: 4-column buttons, CSS Custom Properties driven sizes
• Event delegation: One listener on keypad for all buttons, data-action + data-value dispatch
• Dual-line display: Expression above (aria-live="polite"), result below (aria-live="assertive")
• Live preview: Type 2+3 and instantly see 5, use independent evaluate() to avoid history pollution
• Button visual feedback: CSS :active scale + filter: brightness, keyboard presses also highlight
• Core concept: Make it work first, then make it look good

Output Files:

• index.html — Complete HTML structure (display + keypad + history panel)
• style.css — Standard mode styles (dark theme, Grid layout, button variants)
• app.js — Appended UI logic (CalculatorUI class, event binding, display update)

Command: /gsd-plan-phase 2, /gsd-execute-phase 2

---

Episode 7: Keyboard Works Too

Scene: Mouse works, but many people are used to typing numbers on a keyboard.

• Input state machine: (expression, justEvaluated, lastResult) + input → new state
• Benefits of pure functions: Buttons and keyboard use the exact same logic, avoiding inconsistencies
• Keyboard mapping: 0-9, +-*/, Enter/=, Escape, Backspace, ., %, (), m to switch modes
• Parentheses: Available on keyboard but not shown in UI (standard mode advanced feature)
• Mode switch shortcut: Press m with no modifiers to switch
• Core concept: State machines turn chaotic inputs into controlled flows

Output Files:

• app.js — State machine pure functions (appendDigit / appendOperator / appendDecimal / deleteLast / toggleNegate) + keyboard handling
• tests/ui/state-machine.test.js — State machine tests
• tests/ui/keyboard.test.js — Keyboard mapping tests
• .planning/phases/02/VERIFICATION.md — Phase 2 verification

Command: /gsd-execute-phase 2 (continued), /gsd-verify 2