Writable stores in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the writable function from Svelte.

Svelte

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

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

Awritable

Bderived

Creadable

Dstore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' instead of 'writable' because readable stores cannot be changed.

Trying to import 'store' which is not a function.

The writable function is used to create writable stores in Svelte.

2fill in blank

medium

Complete the code to create a writable store with initial value 0.

Svelte

const count = [1](0);

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

Aderived

Bwritable

Creadable

Dstore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' which creates a store that cannot be changed.

Using 'derived' which creates a store based on others.

Use writable(0) to create a store starting at 0 that you can update.

3fill in blank

hard

Fix the error in the code to update the writable store value.

Svelte

count.[1](n => n + 1);

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

Aupdate

Bset

Csubscribe

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' which replaces the value directly instead of updating based on current.

Using 'subscribe' which is for listening, not changing.

The update method lets you change the store value based on the current value.

4fill in blank

hard

Fill both blanks to subscribe to the store and log its value.

Svelte

const unsubscribe = count.[1](value => {
  console.[2](value);
});

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

Asubscribe

Blog

Cwarn

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' instead of 'subscribe' to listen to changes.

Using 'warn' instead of 'log' to print the value.

Use subscribe to listen to store changes and console.log to print the value.

5fill in blank

hard

Fill all three blanks to create a writable store, update it, and set a new value.

Svelte

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

const score = [2](10);
score.[3](20);

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

Awritable

Cset

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' instead of 'set' to assign a new value directly.

Importing 'readable' instead of 'writable'.

Import writable, create the store with writable(10), then use set(20) to change the value.