Common action patterns (click-outside, tooltip) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click-outside action that calls the close function.

Svelte

<script>
  import { onMount } from 'svelte';
  let open = true;
  function close() {
    open = false;
  }
  function clickOutside(node) {
    const handleClick = event => {
      if (!node.contains(event.target)) {
        [1]();
      }
    };
    document.addEventListener('click', handleClick);
    return {
      destroy() {
        document.removeEventListener('click', handleClick);
      }
    };
  }
</script>

<div use:clickOutside>
  {#if open}
    <p>Click outside me to close.</p>
  {/if}
</div>

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

Aclose

Bopen

ConMount

Dnode

Attempts:

3 left

💡 Hint

Common Mistakes

Calling open() instead of close().

Using node() which is not a function.

Forgetting to call the function with parentheses.

The clickOutside action calls the close function when a click happens outside the node.

2fill in blank

medium

Complete the code to show the tooltip text when hovering over the button.

Svelte

<script>
  let show = false;
</script>

<button on:mouseenter={() => [1] = true} on:mouseleave={() => show = false} aria-describedby="tip">
  Hover me
</button>
{#if show}
  <div id="tip" role="tooltip">
    Tooltip text
  </div>
{/if}

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

Afalse

Bshow

Copen

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using open or visible which are not defined.

Setting show to false instead of true.

Forgetting to update show on mouse enter.

Setting show to true on mouse enter displays the tooltip.

3fill in blank

hard

Fix the error in the click-outside action to properly remove the event listener.

Svelte

<script>
  function clickOutside(node) {
    const handleClick = event => {
      if (!node.contains(event.target)) {
        node.dispatchEvent(new CustomEvent('outclick'));
      }
    };
    document.addEventListener('click', handleClick);
    return {
      destroy() {
        document.removeEventListener('click', [1]);
      }
    };
  }
</script>

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

Aevent

BclickOutside

ChandleClick

Dnode

Attempts:

3 left

💡 Hint

Common Mistakes

Passing clickOutside instead of handleClick.

Passing node or event which are not functions.

Omitting the argument in removeEventListener.

The event listener must be removed with the same function reference handleClick.

4fill in blank

hard

Fill both blanks to create a tooltip action that shows on mouseenter and hides on mouseleave.

Svelte

<script>
  export function tooltip(node) {
    function show() {
      node.setAttribute('aria-expanded', [1]);
    }
    function hide() {
      node.setAttribute('aria-expanded', [2]);
    }
    node.addEventListener('mouseenter', show);
    node.addEventListener('mouseleave', hide);
    return {
      destroy() {
        node.removeEventListener('mouseenter', show);
        node.removeEventListener('mouseleave', hide);
      }
    };
  }
</script>

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

A"true"

B"false"

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean true/false instead of strings.

Swapping the true and false values.

Forgetting to quote the values.

The aria-expanded attribute expects string values "true" or "false" to indicate tooltip visibility.

5fill in blank

hard

Fill all three blanks to create a Svelte action that toggles a CSS class visible on hover.

Svelte

<script>
  export function hoverVisible(node) {
    function onEnter() {
      node.classList.[1]('visible');
    }
    function onLeave() {
      node.classList.[2]('visible');
    }
    node.addEventListener('mouseenter', onEnter);
    node.addEventListener('mouseleave', onLeave);
    return {
      destroy() {
        node.removeEventListener('mouseenter', onEnter);
        node.removeEventListener('mouseleave', onLeave);
      }
    };
  }
</script>

<style>
  .visible {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  div {
    opacity: 0;
  }
</style>

<div use:hoverVisible>
  Hover to see me fade in.
</div>

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

Aadd

Bremove

Ctoggle

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using toggle which may cause flickering.

Using contains which only checks presence.

Removing the class on enter instead of adding.

On mouse enter, add the 'visible' class; on leave, remove it.