If blocks ({#if}) in Svelte - Mini Project: Build & Apply

Conditional Rendering with If Blocks in Svelte

📖 Scenario: You are building a simple Svelte component for a weather app. The app should show a message about the weather condition. If it is sunny, it should say "It's sunny outside!" Otherwise, it should say "It's not sunny today."

🎯 Goal: Create a Svelte component that uses an {#if} block to display a message based on the weather condition stored in a variable.

📋 What You'll Learn

Create a variable called weather with the value "sunny".

Create a variable called isSunny that is true if weather is exactly "sunny", otherwise false.

Use a Svelte {#if} block to show the text "It's sunny outside!" when isSunny is true.

Use the {:else} block to show the text "It's not sunny today." when isSunny is false.

💡 Why This Matters

🌍 Real World

Conditional rendering is essential in web apps to show or hide parts of the page based on user data or app state, like showing different messages for weather conditions.

💼 Career

Understanding how to use if blocks in frameworks like Svelte is a key skill for frontend developers to build interactive and dynamic user interfaces.

1

Set up the weather variable

Create a variable called weather and set it to the string "sunny".

Svelte

// Your code here

Need a hint?

Use let weather = "sunny"; to create the variable.

2

Create the isSunny variable

Create a variable called isSunny that is true if weather equals "sunny", otherwise false.

Svelte

let weather = "sunny";
// Your code here

Need a hint?

Use the strict equality operator === to compare weather with "sunny".

3

Add the if block for sunny weather

Use a Svelte {#if} block to display "It's sunny outside!" only when isSunny is true.

Svelte

let weather = "sunny";
let isSunny = weather === "sunny";

Need a hint?

Wrap the message inside {#if isSunny} and {/if} tags.

4

Add the else block for other weather

Add an {:else} block to the existing {#if} block to display "It's not sunny today." when isSunny is false.

Svelte

let weather = "sunny";
let isSunny = weather === "sunny";

{#if isSunny}
  It's sunny outside!
{:else}
  
{/if}

Need a hint?

Use {:else} followed by the message inside a paragraph tag.