Derived stores in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to create a derived store in Svelte.

Svelte

import { [1] } from 'svelte/store';

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

Aderived

Bwritable

Creadable

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'writable' instead of 'derived' because writable creates independent stores.

Using 'subscribe' which is a method, not a store creator.

The derived function is used to create a store that depends on other stores.

2fill in blank

medium

Complete the code to create a derived store that doubles the value of a writable store named 'count'.

Svelte

const doubled = derived(count, $count => $count [1] 2);

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

A/

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' which adds instead of multiplying.

Using '-' or '/' which do not double the value.

The derived store multiplies the value by 2, so the operator is *.

3fill in blank

hard

Fix the error in the derived store callback to correctly access the value of the store.

Svelte

const doubled = derived(count, [1] => [1] * 2);

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

Astore

Bcount

Cvalue

D$count

Attempts:

3 left

💡 Hint

Common Mistakes

Using the store name without $ which is the store itself, not its value.

Using generic names like 'value' or 'store' which are not correct here.

Inside the derived callback, the store value is accessed with a $ prefix, like $count.

4fill in blank

hard

Fill both blanks to create a derived store that sums two writable stores 'a' and 'b'.

Svelte

const sum = derived([[1], [2]], ([$a, $b]) => $a + $b);

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

Aa

Bb

Ccount

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated store names like 'count' or 'value'.

Swapping the order of stores but it still works, so order is less critical here.

The derived store depends on stores 'a' and 'b' to sum their values.

5fill in blank

hard

Fill all three blanks to create a derived store that formats a user's full name from 'firstName' and 'lastName' stores.

Svelte

const fullName = derived([[1], [2]], ([$firstName, $lastName]) => `$[3] $lastName`);

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

A$firstName

BfirstName

C${$firstName}

DlastName

Attempts:

3 left

💡 Hint

Common Mistakes

Using raw variable names without $ inside template literals.

Confusing the order of blanks or using incorrect syntax for template literals.

The derived store uses template literals to combine the first and last names. The blanks fill the dependencies and the template expression.