0
0
Svelteframework~10 mins

Default actions in Svelte - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.