Action parameters in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a parameter to the action function.

Svelte

<script>
  function highlight(node, [1]) {
    node.style.backgroundColor = [1].color;
    return {
      destroy() {
        node.style.backgroundColor = '';
      }
    };
  }
</script>

<p use:highlight={{ color: 'yellow' }}>Highlight me!</p>

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

Aparams

Bcolor

Cnode

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong parameter name instead of the parameters object.

Confusing the node with the parameters.

The second parameter of an action function is the parameters object passed when using the action.

2fill in blank

medium

Complete the code to update the action when parameters change.

Svelte

<script>
  function highlight(node, params) {
    node.style.backgroundColor = params.color;
    return {
      [1](newParams) {
        node.style.backgroundColor = newParams.color;
      }
    };
  }
</script>

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

Aupdate

Bchange

Crefresh

Dmodify

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not exist in Svelte actions.

Not implementing the update method to handle parameter changes.

The update method is called when the parameters passed to the action change.

3fill in blank

hard

Fix the error in the action function parameter usage.

Svelte

<script>
  function tooltip([1]) {
    // code to show tooltip
  }
</script>

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

Aparams, node

Bnode, params

Cnode

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of node and params.

Using only params without the node.

The action function must receive the DOM node as the first argument. Parameters are optional as the second argument.

4fill in blank

hard

Fill both blanks to correctly destructure parameters in the action function.

Svelte

<script>
  function focus(node, [1]) {
    const { delay, color } = [2];
    setTimeout(() => {
      node.style.outlineColor = color;
      node.focus();
    }, delay);
  }
</script>

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

Aparams

Boptions

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the parameter object and destructuring from another variable.

Not destructuring the parameter object correctly.

The second argument is commonly named params, which you can destructure to get individual parameters.

5fill in blank

hard

Fill all three blanks to correctly implement an action with parameters and update method.

Svelte

<script>
  function resize(node, [1]) {
    function applySize() {
      node.style.width = [2] + 'px';
      node.style.height = [3] + 'px';
    }
    applySize();
    return {
      update(newParams) {
        [1] = newParams;
        applySize();
      }
    };
  }
</script>

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

Aparams

Bparams.width

Cparams.height

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Not updating the params variable inside the update method.

Using wrong variable names for width and height.

The action receives params as the second argument. You use params.width and params.height to set sizes. The update method updates params and reapplies the size.