Reactive declarations (let) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable that updates when count changes.

Svelte

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

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * will add 2 instead of doubling.

Forgetting the reactive declaration syntax $:.

The reactive declaration uses $: and the expression count * 2 to update double whenever count changes.

2fill in blank

medium

Complete the code to make message update reactively when name changes.

Svelte

<script>
  let name = 'Alice';
  $: message = `Hello, [1]!`;
</script>

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

Amessage

Buser

Ccount

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using message inside its own declaration causes errors.

Using unrelated variables like count or user.

The reactive declaration uses the variable name inside the template string to update message whenever name changes.

3fill in blank

hard

Fix the error in the reactive declaration to correctly update total when price or quantity change.

Svelte

<script>
  let price = 5;
  let quantity = 3;
  $: total = price [1] quantity;
</script>

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

A+

B*

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + adds price and quantity instead of multiplying.

Using - or / gives incorrect total.

The total cost is calculated by multiplying price and quantity. Using * ensures total updates correctly.

4fill in blank

hard

Fill both blanks to create a reactive declaration that updates status based on score.

Svelte

<script>
  let score = 75;
  $: status = score [1] 60 [2] true ? 'Pass' : 'Fail';
</script>

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

A>

B<

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > reverses the logic.

Using != or == incorrectly in the first blank.

The reactive declaration uses a conditional expression. It checks if score is greater than 60 to set status to 'Pass', otherwise 'Fail'.

5fill in blank

hard

Fill all three blanks to create a reactive declaration that filters items and maps their names to uppercase.

Svelte

<script>
  let items = [
    { name: 'apple', available: true },
    { name: 'banana', available: false },
    { name: 'cherry', available: true }
  ];
  $: availableNames = items
    .filter(item => item.[1])
    .map(item => item.[3].[2]());
</script>

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

Aavailable

BtoUpperCase

CtoLowerCase

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'available' incorrectly spelled or missing.

Using 'toLowerCase' instead of 'toUpperCase'.

Using 'item' instead of 'name' in map.

The reactive declaration filters items where available is true, then maps their name to uppercase using toUpperCase().