Compiler-based approach (no virtual DOM) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable in Svelte.

Svelte

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

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

Aresult

Bcount

Cvalue

Ddouble

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same variable name as the original variable.

Forgetting the $: label for reactivity.

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

2fill in blank

medium

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

Svelte

<input type="text" [1]={name} />

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

Abind:value

Bvalue

Cbind

DbindValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value attribute which is one-way binding.

Using incorrect attribute names like bindValue.

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

3fill in blank

hard

Fix the error in the Svelte reactive statement to update total when items changes.

Svelte

<script>
  let items = [1, 2, 3];
  let total = 0;
  $: total = items[1](item => item);
</script>

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

Amap

Breduce

Cfilter

DforEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using map which returns a new array instead of a single value.

Using forEach which doesn't return a value.

The reduce method sums all items to update total. Using map or others won't produce the sum.

4fill in blank

hard

Fill both blanks to create a Svelte component that conditionally shows a message when loggedIn is true.

Svelte

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

{#if [1]
  <p>[2] Welcome back!</p>
{/if}

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

AloggedIn

BisLoggedIn

Ctrue

DHello

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that doesn't exist like isLoggedIn.

Putting true directly instead of a variable.

The {#if} block checks the loggedIn variable. The message uses Hello as a friendly greeting.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates filtered with items longer than 3 characters.

Svelte

<script>
  let items = ['cat', 'horse', 'dog', 'elephant'];
  $: filtered = items[1](item => item.length [2] 3);
  let [3] = filtered.length;
</script>

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

Afilter

B>

Ccount

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of filter.

Using length as a variable name which conflicts with property names.

The filter method selects items longer than 3 characters. count stores how many items passed the filter.