Default actions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a default action that logs a message when the element is clicked.

Svelte

<script>
  function logClick(node) {
    function handleClick() {
      console.log('Element clicked!');
    }
    node.addEventListener('click', [1]);
    return {
      destroy() {
        node.removeEventListener('click', handleClick);
      }
    };
  }
</script>

<button use:logClick>Click me</button>

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

AhandleClick

BlogClick

CclickHandler

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the action function itself instead of the event handler.

Using a wrong function name that is not defined.

The handleClick function is the event listener that logs the message. It must be passed to addEventListener.

2fill in blank

medium

Complete the code to prevent the default form submission using a default action.

Svelte

<script>
  function preventSubmit(node) {
    function handleSubmit(event) {
      event.[1]();
      alert('Form submission prevented');
    }
    node.addEventListener('submit', handleSubmit);
    return {
      destroy() {
        node.removeEventListener('submit', handleSubmit);
      }
    };
  }
</script>

<form use:preventSubmit>
  <button type="submit">Submit</button>
</form>

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

AstopPropagation

BcancelBubble

CstopImmediatePropagation

DpreventDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation() which only stops event bubbling.

Calling a method that does not exist on the event object.

The preventDefault() method stops the form from submitting and reloading the page.

3fill in blank

hard

Fix the error in the default action that should remove the event listener on destroy.

Svelte

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

<p use:highlight>Hover over me</p>

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

Aoff

BremoveListener

CremoveEventListener

DdetachEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using deprecated or incorrect methods like detachEvent.

Using methods that don't exist on DOM nodes.

The correct method to remove an event listener is removeEventListener.

4fill in blank

hard

Fill both blanks to create a default action that toggles a CSS class on click and cleans up properly.

Svelte

<script>
  function toggleClass(node) {
    function handleClick() {
      node.classList.[1]('active');
    }
    node.addEventListener('click', handleClick);
    return {
      destroy() {
        node.removeEventListener('click', [2]);
      }
    };
  }
</script>

<div use:toggleClass>Click me to toggle class</div>

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

Atoggle

Badd

ChandleClick

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using add or remove instead of toggle.

Removing the wrong event listener function.

The toggle method adds or removes the class. The event listener to remove is handleClick.

5fill in blank

hard

Fill all three blanks to create a default action that updates the element's text on input and cleans up the event listener.

Svelte

<script>
  function updateText(node) {
    function handleInput(event) {
      node.value = event.target.[1];
    }
    node.addEventListener('[2]', handleInput);
    return {
      destroy() {
        node.[3]('[2]', handleInput);
      }
    };
  }
</script>

<input use:updateText placeholder="Type here" />

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

Avalue

Binput

CremoveEventListener

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using text instead of value.

Using change event instead of input.

Not removing the event listener properly.

The input's current text is in event.target.value. The event is input. The listener is removed with removeEventListener.

Practice

1. What is the main purpose of a default action in Svelte?

easy

A. To add behavior to an element when it is created and clean up when removed

B. To style an element with CSS automatically

C. To create a new component dynamically

D. To fetch data from an API when the page loads

Solution

1. Step 1: Understand what default actions do

   Default actions in Svelte run code when an element is created and can clean up when it is removed.

2. Step 2: Match purpose with options

   Only To add behavior to an element when it is created and clean up when removed describes adding behavior on creation and cleanup on removal, which matches default actions.

3. Final Answer:

   To add behavior to an element when it is created and clean up when removed -> Option A

4. Quick Check:

   Default actions add and clean behavior = B [OK]

Hint: Default actions run on element mount and cleanup on unmount [OK]

Common Mistakes:

• Confusing default actions with styling or data fetching
• Thinking default actions create components
• Assuming default actions only run once globally

2. Which of the following is the correct syntax to apply a default action named focus to an input element in Svelte?

easy

A. <input on:focus />

B. <input action:focus />

C. <input bind:focus />

D. <input use:focus />

Solution

1. Step 1: Recall Svelte default action syntax

   Default actions are applied using use:actionName on elements.

2. Step 2: Compare options with correct syntax

   <input use:focus /> uses use:focus, which is the correct way to apply the action.

3. Final Answer:

   <input use:focus /> -> Option D

4. Quick Check:

   Default action syntax = use:actionName [OK]

Hint: Use use: prefix to apply default actions [OK]

Common Mistakes:

• Using action: or on: instead of use:
• Confusing event handlers with actions
• Trying to bind actions like variables

3. Consider this Svelte code snippet:

function highlight(node) {
  node.style.backgroundColor = 'yellow';
  return {
    destroy() {
      node.style.backgroundColor = '';
    }
  };
}

<div use:highlight>Hello</div>

What will be the background color of the <div> when it is rendered?

medium

A. Yellow

B. No background color (default)

C. Red

D. Transparent

Solution

1. Step 1: Analyze the highlight action code

   The action sets backgroundColor to 'yellow' on the node when applied.

2. Step 2: Understand the effect on the <div>

   The <div> uses use:highlight, so its background color becomes yellow on render.

3. Final Answer:

   Yellow -> Option A

4. Quick Check:

   Action sets background to yellow = A [OK]

Hint: Default action runs on mount, sets style immediately [OK]

Common Mistakes:

• Thinking destroy runs immediately and clears color
• Confusing background color with text color
• Assuming no style changes without CSS

4. Given this default action code:

function logClick(node) {
  node.addEventListener('click', () => console.log('Clicked!'));
}

What is the main problem with this action?

medium

A. It should return a promise to work correctly

B. It uses an arrow function which is not allowed in actions

C. It does not remove the event listener when the element is removed

D. It must use use:logClick() with parentheses

Solution

1. Step 1: Check event listener management

   The action adds a click listener but does not remove it on cleanup.

2. Step 2: Understand Svelte action cleanup

   Actions should return an object with a destroy method to remove listeners and avoid memory leaks.

3. Final Answer:

   It does not remove the event listener when the element is removed -> Option C

4. Quick Check:

   Missing cleanup causes leaks = A [OK]

Hint: Always return destroy() to clean event listeners [OK]

Common Mistakes:

• Ignoring cleanup leads to memory leaks
• Thinking arrow functions are disallowed
• Assuming parentheses are required on use

5. You want to create a default action autoFocus that focuses an input element when it appears and logs "Focused" once. Which code correctly implements this behavior?

hard

A. function autoFocus(node) {
node.focus();
return {
update() {
console.log('Focused');
}
};
}

B. function autoFocus(node) {
node.focus();
console.log('Focused');
return {
destroy() {}
};
}

C. function autoFocus(node) {
setTimeout(() => node.focus(), 0);
console.log('Focused');
}

D. function autoFocus(node) {
node.addEventListener('focus', () => console.log('Focused'));
node.focus();
return {
destroy() {
node.removeEventListener('focus', () => console.log('Focused'));
}
};
}

Solution

1. Step 1: Focus element and log once on mount

   Calling node.focus() and logging immediately runs once when the element appears.

2. Step 2: Provide cleanup method

   Returning an object with an empty destroy method is valid and ensures cleanup structure.

3. Final Answer:

   Function that focuses and logs once, with destroy method -> Option B

4. Quick Check:

   Focus and log once on mount = D [OK]

Hint: Focus and log immediately, return destroy() for cleanup [OK]

Common Mistakes:

• Adding unnecessary event listeners for logging
• Missing return object with destroy method
• Logging multiple times on updates