Basics

Signals

A signal is a reactive container for a value. When the value changes, anything that depends on it updates automatically.

# Creating a signal

const count = signal(0);

Read it with .value and write to it with .value =:

count.value;       // 0
count.value = 5;   // update
count.value++;     // shorthand

# Reactive text

To make text update when a signal changes, wrap the read in a function interpolation:

html`<p>Count: ${() => count.value}</p>`;

The () => is what makes it reactive. Elur tracks that the function reads count, and re-runs it when count changes.

# Your task

The starter code has a counter that only goes up. Add a second button that decrements the count.

⚠ Warning

If you write ${count.value} (without the function), the text is read once and never updates. Always use ${() => count.value} for reactive values.

Need a hint?
Add a second button with @click=${() => count.value--} to decrement the count.