Arrow keys turn, plus and minus zoom
Click the canvas or Tab to it (a blue ring shows the focus), then press the arrows, + and -. The text output comes from simulated key presses on the same handler.
Every pointer action gets a keyboard twin: arrows turn, plus and minus zoom, Tab walks through the parts, Enter chooses. The canvas needs a way to take focus, a visible focus ring, and no keyboard trap.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a keydown handler for a container that handles ArrowUp and ArrowDown by changing state.tilt by 5 degrees, limited to −30 … 30, and leaves every other key alone.
Write the CSS so that a button shows a clear ring only for keyboard focus, not for mouse clicks.
Explain it without notes
Name the keyboard twin of: dragging, the mouse wheel, hover and a click.
Why must the key handler ignore events with Ctrl held, and why must it not call preventDefault() on Tab?
Console
Nothing logged yet.Expected console output
ArrowRight x2 -> 30 degrees
ArrowLeft x3 -> -15 degrees
+ twice -> camera distance 3
+ twenty more -> camera distance 1.5 (stops at the limit)
Tab handled? -> false (false = left alone, so the browser moves focus on)
Ctrl+ArrowLeft handled? false | turn is still -15 degrees