Logic

0 is between 0 and 5

This button uses if and else if statements to show where count is between 0, 5, and 10.

xml
<button class="btn variant-filled-secondary mx-4 my-2" on:click={increment}>
	Clicked {count}
	{count === 1 ? 'Time' : 'Times'}
</button>

{#if count >= 10}
	<p class="mx-4 my-2">{count} is greater than or equal to 10</p>
{:else if count < 5}
	<p class="mx-4 my-2">{count} is between 0 and 5</p>
{:else}
	<p class="mx-4 my-2">{count} is between 5 and 10</p>
{/if}

Pick a Color

This section uses and each block to go through an array of colors.

xml
<div class="mx-4 my-2 grid grid-cols-7 gap-2 max-w-md">
	{#each colors as color, i}
		<button
			class="btn rounded-full hover:-translate-y-2 hover:scale-110 aria-selected:shadow-xl"
			aria-current={selected === color}
			aria-label={color}
			style="background: {color}"
			on:click={() => (selected = color)}>{i + 1}
		</button>
	{/each}
</div>

🍎 = apple

🍌 = banana

🥕 = carrot

🍩 = doughnut

🥚 = egg

This section uses an each block to display an array of things with a key so they can be removed.

xml
{#each things as thing (thing.id)}
	<Thing name={thing.name} />
{/each}

This section uses an await block to handle a promise.

xml
{#await promise}
	<div class="mx-4 my-2"><ProgressRadial value={undefined} /></div>
{:then number}
	<p class="mx-4 my-2">The number is {number}</p>
{:catch error}
	<p class="text-error-500 mx-4 my-2">{error.message}</p>
{/await}

Schultz-Hettinger

Schultz-Hettinger

Rohan

Rohan

Glover

Glover

Boyer

Boyer

Considine

Considine

Wehner

Wehner

Bahringer

Bahringer

Kuphal

Kuphal

Pollich

Pollich

Crooks

Crooks

Brown

Brown

Pfannerstill

Pfannerstill

Walker

Walker

Carter

Carter

Schinner

Schinner

Gusikowski-Wolff

Gusikowski-Wolff

Brekke

Brekke

Kilback-Upton

Kilback-Upton

Greenfelder

Greenfelder

King

King

Graham

Graham

Schaden

Schaden

Goodwin

Goodwin

White

White

Maggio

Maggio

This section uses an each block to iterate through an array of objects and display them.

xml
<div class="flex flex-wrap bg-secondary-300 justify-center">
	{#each twentyFiveAvatars as { lastName, avatar }}
		<div class="flex flex-col items-center m-4">
			<img src={avatar} alt={lastName} class="w-24 h-24 rounded-full" />
			<p class="text-surface-900 font-bold">{lastName}</p>
		</div>
	{/each}
</div>