SvelteKit overview - Mini Project: Build & Apply

SvelteKit Overview Project

📖 Scenario: You are building a simple SvelteKit app that shows a list of fruits and highlights the ones you like.

🎯 Goal: Create a SvelteKit component that displays a list of fruits from a data array, uses a configuration variable to mark favorite fruits, and renders the list with favorite fruits styled differently.

📋 What You'll Learn

Create a fruits array with exact fruit names

Add a favoriteFruits array to hold favorite fruit names

Use a {#each} block to loop over fruits

Highlight favorite fruits with a CSS class

Use semantic HTML and accessible markup

💡 Why This Matters

🌍 Real World

SvelteKit is used to build fast, modern web apps with reactive UI and server-side rendering. Managing data and UI state like this is common in real projects.

💼 Career

Understanding SvelteKit basics helps you work on frontend roles that use this popular framework for building interactive websites and apps.

1

DATA SETUP: Create the fruits array

Create a fruits array with these exact strings: "Apple", "Banana", "Cherry", "Date", and "Elderberry".

Svelte

// Create the fruits array with the exact fruit names
// Your code here

Need a hint?

Use export let fruits = [...] to define the array in SvelteKit.

2

CONFIGURATION: Define favorite fruits

Add a new exported array called favoriteFruits with these exact strings: "Apple" and "Date".

Svelte

export let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
// Add favoriteFruits array here
// Your code here

Need a hint?

Use export let favoriteFruits = [...] to define the favorites.

3

CORE LOGIC: Loop over fruits and highlight favorites

Use a {#each fruits as fruit} block to display each fruit inside a <li>. Add a class favorite to the <li> if fruit is included in favoriteFruits using class:favorite={favoriteFruits.includes(fruit)}.

Svelte

export let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
export let favoriteFruits = ["Apple", "Date"]


  
  // Your code here

Need a hint?

Use Svelte's {#each} block and conditional class binding.

4

COMPLETION: Add CSS to style favorite fruits

Add a <style> block with CSS that sets color: red; for the .favorite class to highlight favorite fruits in red.

Svelte

export let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
export let favoriteFruits = ["Apple", "Date"]


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



  /* Add CSS for .favorite class here */
  // Your code here

Need a hint?

Use CSS inside the <style> block to style the favorite fruits.