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.

Practice

1. In Svelte, how do you display a variable's value inside the HTML of a page?

easy

A. Use parentheses like (variable) inside the HTML.

B. Use curly braces like {variable} inside the HTML.

C. Use angle brackets like <variable> inside the HTML.

D. Use quotes like "variable" inside the HTML.

Solution

1. Step 1: Understand Svelte's data binding syntax

   Svelte uses curly braces {} to insert JavaScript expressions or variables into HTML.

2. Step 2: Identify correct syntax for variable display

   Using {variable} inside HTML shows the variable's value dynamically.

3. Final Answer:

   Use curly braces like {variable} inside the HTML. -> Option B

4. Quick Check:

   Display variable = {variable} [OK]

Hint: Remember: curly braces show variables in HTML [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Trying to use angle brackets for variables
• Putting variable names inside quotes

2. Which of the following is the correct way to declare a variable in a Svelte page's <script> block?

easy

A. const name 'Svelte';

B. var name = 'Svelte';

C. let name = 'Svelte';

D. name = 'Svelte';

Solution

1. Step 1: Recall JavaScript variable declaration in Svelte

   Svelte uses standard JavaScript inside <script>, so let is the preferred way to declare variables that can change.

2. Step 2: Check syntax correctness

   let name = 'Svelte'; correctly declares a variable with a string value.

3. Final Answer:

   let name = 'Svelte'; -> Option C

4. Quick Check:

   Variable declaration = let [OK]

Hint: Use 'let' for variables inside <script> [OK]

Common Mistakes:

• Missing '=' sign in declaration
• Using 'var' which is outdated
• Not declaring variable with let/const

3. Given this Svelte code snippet, what will be rendered on the page?

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

medium

A. AppleBananaCherry

B. fruits

C. Apple, Banana, Cherry (plain text, no list)

D. Syntax error, nothing renders

Solution

1. Step 1: Understand the {#each} block

   The {#each} block loops over the array fruits and creates an <li> for each item.

2. Step 2: Check the output structure

   Each fruit name is inserted inside <li>, so the output is a list with three items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   Loop over fruits = list items [OK]

Hint: {#each} creates list items for array elements [OK]

Common Mistakes:

• Expecting plain text instead of list
• Misunderstanding {#each} syntax
• Thinking it outputs variable name instead of values

4. What is wrong with this Svelte code snippet?

<script>
  let count = 0
</script>

<button on:click={count++}>Click me</button>
<p>Clicked {count} times</p>

medium

A. The variable count should be declared with const, not let.

B. The event handler syntax is incorrect; it should be a function.

C. The <p> tag cannot use curly braces for variables.

D. There is no problem; the code works fine.

Solution

1. Step 1: Check event handler syntax

   In Svelte, the expression count++ inside on:click is valid and works as an event handler that increments count.

2. Step 2: Confirm no syntax errors

   The code correctly updates count and displays the updated value.

3. Final Answer:

   There is no problem; the code works fine. -> Option D

4. Quick Check:

   Event handler with expression increment works [OK]

Hint: Direct expressions like count++ work as event handlers in Svelte [OK]

Common Mistakes:

• Writing expressions directly in event handlers is invalid
• Using const for variables that change
• Thinking curly braces can't be used in HTML

5. You want to display a list of users with their names and ages on a Svelte page. The data is:

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 }
];

Which code snippet correctly shows each user's name and age inside a <div> using {#each}?

hard

A. {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div>{/each}

B. {#each users} <div>{name} is {age} years old</div>{/each}

C. {#each users as user} <div>{name} is {age} years old</div>{/each}

D. {#each users as user} <div>{user} is {age} years old</div>{/each}

Solution

1. Step 1: Understand {#each} syntax with index

   The syntax {#each users as user, index} correctly loops over users and provides both user object and index.

2. Step 2: Check variable usage inside loop

   Inside the loop, {user.name} and {user.age} correctly access properties. Including index shows user number.

3. Final Answer:

   {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div> {/each} -> Option A

4. Quick Check:

   Loop with index and user properties = {#each users as user, index}
<div>User {index}: {user.name} ({user.age})</div>
{/each} [OK]

Hint: Use 'as item, index' to get position and data in {#each} [OK]

Common Mistakes:

• Omitting 'as' keyword in {#each}
• Trying to access properties without user prefix
• Using undefined variables like 'age' alone