Each blocks ({#each}) in Svelte - Mini Project: Build & Apply

Using Each Blocks ({#each}) in Svelte

📖 Scenario: You are building a simple webpage that shows a list of fruits you like. You want to display each fruit as a separate item on the page.

🎯 Goal: Create a Svelte component that uses the {#each} block to display a list of fruits as an unordered list.

📋 What You'll Learn

Create an array called fruits with the exact values: "Apple", "Banana", "Cherry"

Create a variable called title with the value "My Favorite Fruits"

Use a {#each} block to loop over fruits and display each fruit inside an <li> element

Add a <h2> element that shows the title above the list

💡 Why This Matters

🌍 Real World

Displaying lists of items like products, tasks, or messages is very common in web apps. Using {#each} blocks helps show these lists easily and dynamically.

💼 Career

Knowing how to use {#each} blocks in Svelte is essential for frontend developers working with Svelte to build interactive user interfaces.

1

Create the fruits array

Create an array called fruits with these exact string values: "Apple", "Banana", and "Cherry".

Svelte

// Your code here

Need a hint?

Use let fruits = ["Apple", "Banana", "Cherry"]; inside the <script> tag.

2

Add a title variable

Add a variable called title with the exact value "My Favorite Fruits" inside the <script> tag below the fruits array.

Svelte

  let fruits = ["Apple", "Banana", "Cherry"];
  // Your code here

Need a hint?

Declare let title = "My Favorite Fruits"; inside the <script> tag.

3

Use {#each} block to list fruits

Below the <script> tag, add an unordered list <ul>. Inside it, use a {#each} block with fruit as the item variable to loop over fruits. For each fruit, create a list item <li> that displays the fruit name.

Svelte

  let fruits = ["Apple", "Banana", "Cherry"];
  let title = "My Favorite Fruits";

Need a hint?

Use {#each fruits as fruit} to loop and create <li>{fruit}</li> inside the <ul>.

4

Add the title heading

Above the unordered list <ul>, add a heading <h2> that displays the title variable.

Svelte

  let fruits = ["Apple", "Banana", "Cherry"];
  let title = "My Favorite Fruits";




  {#each fruits as fruit}
    {fruit}
  {/each}

Need a hint?

Insert <h2>{title}</h2> above the <ul> block.