# 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.

[Return to lesson](../lessons/06.html) · [Explained answer](../solutions/06.html)