Progressive enhancement in Svelte - Mini Project: Build & Apply

Progressive Enhancement with Svelte

📖 Scenario: You are building a simple web page that shows a list of favorite fruits. You want the page to work well even if JavaScript is disabled, but also enhance the experience when JavaScript is available.

🎯 Goal: Create a Svelte component that displays a list of fruits using basic HTML first, then progressively enhance it by adding a filter input that lets users search fruits dynamically.

📋 What You'll Learn

Create a list of fruits in the component

Add a text input to filter fruits by name

Use Svelte reactive statements to update the filtered list

Ensure the list is visible and usable without JavaScript

💡 Why This Matters

🌍 Real World

Many websites need to work well even if users disable JavaScript or have slow connections. Progressive enhancement ensures basic content is always accessible and improves the experience when JavaScript is available.

💼 Career

Understanding progressive enhancement is important for front-end developers to build accessible, robust web applications that work for all users.

1

Create the initial fruit list

Create a Svelte component with a variable called fruits that is an array containing these exact strings: "Apple", "Banana", "Cherry", "Date", and "Elderberry". Then, add an unordered list <ul> in the markup that uses {#each fruits as fruit} to display each fruit inside a <li>.

Svelte

  // Your code here



  

Hint

Start by declaring the fruits array inside a <script> tag. Then use Svelte's {#each} block to loop through the array and display each fruit in a list item.

2

Add a filter input variable

Add a variable called filter initialized to an empty string "" inside the <script> tag. Then add a text input <input type="text" bind:value={filter} placeholder="Filter fruits" /> above the list in the markup.

Svelte

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




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

Hint

Declare the filter variable in the script. Then add an input element with bind:value={filter} so it updates as the user types.

3

Filter the fruit list reactively

Add a reactive statement $: filteredFruits = fruits.filter(fruit => fruit.toLowerCase().includes(filter.toLowerCase())) inside the <script> tag. Then update the {#each} block to loop over filteredFruits instead of fruits.

Svelte

  let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
  let filter = "";
  // Add reactive filteredFruits here





  {#each filteredFruits as fruit}
    {fruit}
  {/each}

Hint

Use a reactive statement starting with $: to create filteredFruits based on the current filter. Then loop over filteredFruits in the markup.

4

Add a <noscript> message for no JavaScript

Add a <noscript> tag below the input that contains a paragraph <p> with the exact text: JavaScript is disabled. You see the full fruit list.. This message will show only if JavaScript is disabled, enhancing accessibility.

Svelte

  let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
  let filter = "";
  $: filteredFruits = fruits.filter(fruit => fruit.toLowerCase().includes(filter.toLowerCase()));







  {#each filteredFruits as fruit}
    {fruit}
  {/each}

Hint

Use the <noscript> tag to show a message only when JavaScript is off. Put a paragraph inside with the exact text.