Basics

Events

Elur uses the @event syntax to attach DOM listeners. The value is a handler function that receives the DOM event.

# Click

html`<button @click=${() => count.value++}>+</button>`;

# Input

html`<input @input=${(e) => (text.value = e.target.value)} />`;

The handler receives the event object. For inputs, e.target.value holds the current text.

# Your task

The starter code greets a name you type. Add a button that toggles the name between normal and UPPERCASE.

  1. Create a signal upper starting at false.
  2. Add a button that toggles upper.value.
  3. In the heading, show name.value.toUpperCase() when upper.value is true, otherwise name.value.
💡 Tip

You can put any expression inside a function interpolation: ${() => (cond ? a : b)}.

Need a hint?
Add a signal `upper` and a button that toggles it. In the heading, use a ternary: upper.value ? name.value.toUpperCase() : name.value