Why actions add reusable element behavior in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply an action to an element in Svelte.

Svelte

<div use:[1]></div>

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

Aclass

BonClick

Cbind

DmyAction

Attempts:

3 left

💡 Hint

Common Mistakes

Using event handlers like 'onClick' instead of an action name.

Trying to bind or add a class instead of using an action.

In Svelte, actions are applied to elements using the use: directive followed by the action name.

2fill in blank

medium

Complete the action function to receive the element it is applied to.

Svelte

function myAction([1]) {
  // action code here
}

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

Anode

Bevent

Celement

Dtarget

Attempts:

3 left

💡 Hint

Common Mistakes

Using event or target which are not the element itself.

Using a name that does not represent the element.

The action function receives the DOM element as the first argument, commonly named node.

3fill in blank

hard

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

Svelte

function myAction(node) {
  const handle = () => console.log('clicked');
  node.addEventListener('click', handle);
  return [1];
}

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

Anode.removeEventListener('click', handle)

B{ cleanup: () => node.removeEventListener('click', handle) }

C{ destroy: () => node.removeEventListener('click', handle) }

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Returning null or nothing, causing memory leaks.

Using a wrong method name like 'cleanup'.

The action should return an object with a destroy method to remove event listeners when the element is removed.

4fill in blank

hard

Fill both blanks to update the action when parameters change and clean up properly.

Svelte

function myAction(node, [1]) {
  function update(params) {
    console.log(params);
  }
  update([2]);
  return {
    update,
    destroy() {
      // cleanup code
    }
  };
}

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

Aparams

BinitialParams

Coptions

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Not naming the second argument as parameters.

Not calling update with initial parameters.

The second argument is usually named params and the initial parameters are passed to update to initialize the action.

5fill in blank

hard

Fill all three blanks to create a reusable action that adds a CSS class and removes it on destroy.

Svelte

function addClass(node, [1]) {
  node.classList.add([2]);
  return {
    destroy() {
      node.classList.[3]([2]);
    }
  };
}

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

AclassName

B'highlight'

Cremove

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'add' instead of 'remove' in the destroy method.

Not passing the class name as a parameter.

The action takes a className parameter, adds it to the element, and removes it on destroy using remove.