## If Blocks
```javascript
<script>
let count = $state(0);
function increment() {
count += 1;
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
{#if count > 0}
<p>{count} is a positive number.</p>
{/if}
```
## Else Blocks
```javascript
<script>
let count = $state(0);
function increment() {
count += 1;
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
{#if count > 10}
<p>{count} is greater than 10</p>
{:else}
<p>{count} is between 0 and 10
{/if}
```
## Else-If Blocks
```javascript
<script>
let count = $state(0);
function increment() {
count += 1;
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
{#if count > 10}
<p>{count} is greater than 10</p>
{:else if count < 5}
<p>{count} is less than 5</p>
{:else}
<p>{count} is between 5 and 10</p>
{/if}
```
## Each Blocks
```javascript
<script>
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let selected = $state(colors[0]);
</script>
<h1 style="color: {selected}">Pick a colour</h1>
<div>
{#each colors as color, i}
<button
style="background: {color}"
aria-label={color}
aria-current={selected === color}
onclick={() => selected = color}
></button>
{/each}
</div>
<style>
h1 {
font-size: 2rem;
font-weight: 700;
transition: color 0.2s;
}
div {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
max-width: 400px;
}
button {
aspect-ratio: 1;
border-radius: 50%;
background: var(--color, #fff);
transform: translate(-2px,-2px);
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
transition: all 0.1s;
color: black;
font-weight: 700;
font-size: 2rem;
}
button[aria-current="true"] {
transform: none;
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
</style>
```
## Await Blocks
HTML can wait for Promises
```javascript
{#await promise}
<p>...rolling</p>
{:then number}
<p>You rolled a {number}!</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
```
`{:catch}` can be optional and `then` can move inside `{#await}`
```javascript
{#await promise then number}
<p>You rolled a {number}!</p>
{/await}
```