Build a component that mirrors what the user types — in UPPERCASE.
Render an <input> element (type text) with the class source and a <p> element with the class mirror. Whenever the user types in the input, the paragraph must show the current value of the input converted to uppercase. Before the user types anything, the paragraph must show an empty string.
Handle the input's input event, store the typed value on a class field, and expose the uppercase version through a getter that the template binds to. Because getters recompute whenever the reactive fields they read change, the mirror stays in sync on every keystroke.
Examples:
Initial render:
<input class="source" />
<p class="mirror"></p>
User types "hello" into the input:
<p class="mirror">HELLO</p>
User types "SaLeSfOrCe" into the input:
<p class="mirror">SALESFORCE</p>