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}

Maggio

Maggio

VonRueden

VonRueden

Thompson

Thompson

Walsh

Walsh

Hickle

Hickle

Cruickshank

Cruickshank

Towne

Towne

Littel

Littel

Bechtelar

Bechtelar

Kuhlman

Kuhlman

Daugherty

Daugherty

Jast

Jast

Fadel

Fadel

Cremin

Cremin

Marks

Marks

Howe

Howe

Kutch

Kutch

Gerhold

Gerhold

Hilll

Hilll

Hintz

Hintz

Schulist

Schulist

Kilback

Kilback

Prosacco

Prosacco

Cremin

Cremin

Cremin

Cremin

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>