Custom store logic in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a writable store in Svelte.

Svelte

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

const count = [1](0);

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

Awritable

Breadable

Cderived

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

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

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

Using 'get' which is a function to read store values.

The writable function creates a store that can be updated and subscribed to.

2fill in blank

medium

Complete the code to define a custom store with a subscribe method.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  return { subscribe, [1] };
}

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

Aincrement

Bset

Cupdate

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Returning 'set' which is not defined in this custom store.

Returning 'update' which is not defined here.

Returning 'subscribe' twice.

The custom store returns a subscribe method and a custom increment method to change the value.

3fill in blank

hard

Fix the error in the increment method to notify subscribers.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  function increment() {
    count += 1;
    subscribers.forEach(run => run([1]));
  }

  return { subscribe, increment };
}

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

Aincrement

Bsubscribe

Ccount()

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Calling count as a function like count().

Passing the function name increment instead of the value.

Passing subscribe which is a function, not the value.

We call each subscriber function with the updated count value to notify them.

4fill in blank

hard

Fill both blanks to create a custom store with a reset method.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  function increment() {
    count += 1;
    subscribers.forEach(run => run([1]));
  }

  function reset() {
    count = [2];
    subscribers.forEach(run => run(count));
  }

  return { subscribe, increment, reset };
}

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

Acount

B0

C1

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong value like 1 or null for reset.

Passing a function name instead of the variable in increment.

The increment method sends the updated count. The reset method sets count to zero.

5fill in blank

hard

Fill all three blanks to create a custom store with subscribe, increment, and decrement methods.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  function increment() {
    count += 1;
    subscribers.forEach(run => run([1]));
  }

  function decrement() {
    count -= 1;
    subscribers.forEach(run => run([2]));
  }

  function reset() {
    count = [3];
    subscribers.forEach(run => run(count));
  }

  return { subscribe, increment, decrement, reset };
}

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

Acount

B0

Attempts:

3 left

💡 Hint

Common Mistakes

Passing wrong variables or values to subscribers.

Setting reset to a non-zero value.

Both increment and decrement notify subscribers with the updated count. The reset method sets count to zero.