Reactivity
0 doubled is 0
This section demonstrates reactive values.
<div class="mx-4 my-2">
<button class="btn variant-filled-secondary my-2" on:click={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>
<button class="btn variant-filled-secondary my-2" on:click={reset}> Reset Count </button>
</div>1 + 2 + 3 + 4 = 10
This section demonstrates grouping reactive statements together with a block.
<div class="mx-4 my-2">
<p>{numbers.join(' + ')} = {sum}</p>
<button class="btn variant-filled-secondary my-2" on:click={addNumber}>Add a Number</button>
</div>