Using data in pages in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the page title using a variable.

Svelte

<script>
  let title = 'Welcome to Svelte';
</script>

<h1>[1]</h1>

Drag options to blanks, or click blank then click option'

Atitle

B{title}

C$title

D{{title}}

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the variable name without braces shows it as plain text.

Using double curly braces like {{title}} is not correct in Svelte.

In Svelte, to show a variable's value in the HTML, you wrap it in curly braces like {title}.

2fill in blank

medium

Complete the code to bind the input value to the variable 'name'.

Svelte

<script>
  let name = '';
</script>

<input type="text" [1] />
<p>Hello, {name}!</p>

Drag options to blanks, or click blank then click option'

Abind:value={name}

Bvalue={name}

Cbind:name={name}

Dbind={name}

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value={name} sets the input but does not update the variable.

Using bind:name is not a valid Svelte syntax.

In Svelte, bind:value={name} links the input's value to the variable name, updating it as the user types.

3fill in blank

hard

Fix the error in the code to correctly display a list of items.

Svelte

<script>
  let items = ['apple', 'banana', 'cherry'];
</script>

<ul>
  {#each items as [1]
    <li>{item}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Ai

Bitems

Cfruit

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using the array name instead of a single item variable.

Using a variable name not referenced inside the loop.

The {#each} block needs a variable name for each item, commonly item, to use inside the loop.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates 'double' when 'count' changes.

Svelte

<script>
  let count = 0;
  $: [1] = [2] * 2;
</script>

<p>Double: {double}</p>

Drag options to blanks, or click blank then click option'

Adouble

Bcount

Ccount + 1

DdoubleCount

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the variable names on left and right sides.

Using an undefined variable name.

The reactive statement uses $: double = count * 2; to update double whenever count changes.

5fill in blank

hard

Fill all three blanks to create a page that fetches data and displays it.

Svelte

<script>
  import { onMount } from 'svelte';
  let data = [];

  onMount(async () => {
    const response = await fetch([1]);
    data = await response.[2]();
  });
</script>

<ul>
  {#each data as [3]
    <li>{item.name}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

A'https://api.example.com/items'

Bjson

Citem

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the URL.

Using response.text() instead of json().

Using a loop variable name different from the one used inside the loop.

The fetch URL is a string, the response is parsed with json(), and each item is named item in the loop.