Exercise 06: Render a safe, usable filter
Use a copy of examples/06. Preserve the labeled select.
A. Trace
Write the order of events from a visitor changing Category to the result count changing. Identify which step is data work and which step changes the DOM.
B. Repair safely
Change a fixture title to <strong>Garden</strong>. Confirm the angle brackets remain visible as text and no strong element is added. Explain why replacing textContent with innerHTML would change the meaning.
C. Transfer
Add a labeled search input. Filter on both selected category and case-insensitive title text. Show “No matching events” when appropriate. Test typing, then category change, then clearing the search. Keep keyboard focus in the input while results change.
Evidence
Use at least four trials: all events, one category, a trimmed mixed-case title, and no matches. Record the result count and focused control.