Action update and destroy in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Svelte action that logs when an element is mounted.

Svelte

function logAction(node) {
  console.log('Element mounted');
  return {
    [1]() {
      console.log('Element removed');
    }
  };
}

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

Aremove

Bupdate

Cinit

Ddestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' instead of 'destroy' for cleanup.

Using a non-existent method like 'remove'.

The destroy method runs when the element is removed from the DOM.

2fill in blank

medium

Complete the code to update the action when the parameter changes.

Svelte

function colorAction(node, color) {
  node.style.color = color;
  return {
    [1](newColor) {
      node.style.color = newColor;
    }
  };
}

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

Achange

Bdestroy

Cupdate

Drefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'destroy' instead of 'update' to handle parameter changes.

Using non-standard method names like 'change' or 'refresh'.

The update method runs when the parameter changes, allowing the action to update the element.

3fill in blank

hard

Fix the error in the action to properly clean up when the element is removed.

Svelte

function focusAction(node) {
  node.focus();
  return {
    [1]() {
      node.blur();
    }
  };
}

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

Adestroy

Bupdate

Ccleanup

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' for cleanup instead of 'destroy'.

Using non-existent methods like 'cleanup' or 'remove'.

The destroy method is the correct place to clean up when the element is removed.

4fill in blank

hard

Fill both blanks to create an action that updates color and cleans up style on destroy.

Svelte

function styleAction(node, color) {
  node.style.color = color;
  return {
    [1](newColor) {
      node.style.color = newColor;
    },
    [2]() {
      node.style.color = '';
    }
  };
}

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

Aupdate

Bdestroy

Cremove

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the roles of update and destroy methods.

Using non-standard method names like 'remove' or 'reset'.

update changes the color when parameters change, and destroy cleans up the style when the element is removed.

5fill in blank

hard

Fill all three blanks to create an action that sets font size, updates it, and cleans up on destroy.

Svelte

function fontSizeAction(node, size) {
  node.style.fontSize = [1];
  return {
    [2](newSize) {
      node.style.fontSize = newSize;
    },
    [3]() {
      node.style.fontSize = '';
    }
  };
}

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

Asize

Bupdate

Cdestroy

DfontSize

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names for the size.

Mixing up update and destroy method names.

The initial font size is set using the size parameter. The update method changes it when parameters change, and destroy cleans up when the element is removed.