Named actions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a named action called 'focus' to the input element.

Svelte

<input use:[1] />

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

Ahover

Bclick

Cfocus

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use the 'use:' prefix before the action name.

Using event names like 'click' instead of action names.

The named action 'focus' is applied using use:focus syntax in Svelte.

2fill in blank

medium

Complete the code to define a named action 'highlight' that changes the background color of an element.

Svelte

function [1](node) {
  node.style.backgroundColor = 'yellow';
  return {
    destroy() {
      node.style.backgroundColor = '';
    }
  };
}

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

Ahighlight

Bclick

Cfocus

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the function differently than the action used in the template.

Not returning a destroy method to clean up.

The function name must match the named action 'highlight' to be used as use:highlight.

3fill in blank

hard

Fix the error in the named action usage by completing the code to pass a parameter 'color' to the action.

Svelte

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

<div use:highlight={'yellow'}>Highlight me</div>

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

Aevent

Bcolor

Cnode

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong parameter name that does not match the passed argument.

Not defining the second parameter to receive the value.

The second parameter of the action function receives the parameter passed in the template, here named 'color'.

4fill in blank

hard

Fill both blanks to create a named action 'tooltip' that adds a title attribute and updates it when the parameter changes.

Svelte

function [1](node, [2]) {
  node.title = text;
  return {
    update(newText) {
      node.title = newText;
    },
    destroy() {
      node.title = '';
    }
  };
}

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

Atooltip

Bcolor

Ctext

Dhighlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent parameter names that don't match usage.

Not returning an update method to handle parameter changes.

The action is named 'tooltip' and the parameter holding the title text is 'text'.

5fill in blank

hard

Fill all three blanks to create a named action 'resize' that listens for window resize events and calls a callback parameter.

Svelte

<script>
  function [1](node, [2]) {
    function onResize() {
      callback();
    }
    window.addEventListener('resize', onResize);
    return {
      destroy() {
        window.removeEventListener('resize', [3]);
      }
    };
  }
</script>

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

Aresize

Bcallback

ConResize

DhandleResize

Attempts:

3 left

💡 Hint

Common Mistakes

Removing the event listener with a different function name than added.

Not passing the callback parameter correctly.

The action is named 'resize', the parameter is 'callback', and the event listener is removed using the same function 'onResize'.