#svelte5
HTML does not have anyway of expressing logic. With Svelte, however, things like loops and conditional statements become possible.
For example, we conditionally render the markup below using an `#if` block:
```svelte
<script>
let count = $state(0);
function increment() {
counter += 1;
}
</script>
<button onClick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
{#if counter > 10}
<p>{count} is greater than 10</p>
{/if}
```
In summary
* `count` is a reactive variable declared = 0 and gets incremented by 1 via function `increment()`
The `{#...}` operator opens a block, the `{:...}` extends a block, and the `{/...}` closed a block
```svelte
{#if count > 10 }
<p>{count} is greater than 10</p>
{:else}
<p>{count} is between 0 and 10</p>
{/if}
```
We can also also chain multiple conditions together:
```svelte
{#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 0 and 10</p>
{/if}
```
[[Svelte uses each blocks to logic to the items in an array while using markup]]