Why advanced features enable production apps in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive variable in Svelte.

Svelte

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

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

Aconst

Bcount

Clet

DdoubleCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using let or const inside the reactive statement.

Using the same variable count instead of a new one.

The $: syntax creates a reactive statement. Here, doubleCount is the reactive variable that updates when count changes.

2fill in blank

medium

Complete the code to bind the input value to a variable in Svelte.

Svelte

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

<input type="text" [1]={name} aria-label="Name input" />

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

Avalue

Bbind:value

Cbind

Don:input

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value without binding.

Using event handlers like on:input instead of binding.

In Svelte, bind:value connects the input's value to the variable name, keeping them in sync.

3fill in blank

hard

Fix the error in the Svelte component to conditionally show content.

Svelte

<script>
  let loggedIn = false;
</script>

{#if [1]
  <p>Welcome back!</p>
{:else}
  <p>Please log in.</p>
{/if}

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

AloggedIn

BloggedOut

Clogin

DisLogged

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not exist.

Using the negation or wrong variable.

The {#if} block checks the loggedIn variable to decide which content to show.

4fill in blank

hard

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

Svelte

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

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

Atotal

B5

C10

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using count as the reactive variable name.

Using a variable instead of a number in the addition.

The reactive variable total updates whenever count changes, adding 5 to it.

5fill in blank

hard

Fill all three blanks to create a reactive statement that filters an array.

Svelte

<script>
  let numbers = [1, 2, 3, 4, 5];
  $: [1] = numbers.filter(n => n [2] [3]);
</script>

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

AevenNumbers

B%

C2

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong operator for filtering.

Using a comparison operator instead of modulo.

The reactive variable evenNumbers filters numbers to include only even numbers using the modulo operator.