Why special elements handle edge cases in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value in Svelte.

Svelte

<input type="text" bind:value=[1] />

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

Aname

Bvalue

CinputValue

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not declared in the script.

Forgetting to use the bind directive.

In Svelte, binding the value of an input to a variable like name allows two-way data binding.

2fill in blank

medium

Complete the code to handle a button click event in Svelte.

Svelte

<button on:click=[1]>Click me</button>

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

AhandleClick()

BclickHandler()

ChandleClick

DclickHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses which calls the function immediately.

Using a function name that is not defined.

In Svelte, event handlers are passed as references without parentheses.

3fill in blank

hard

Fix the error in the Svelte code to conditionally render a paragraph only if show is true.

Svelte

{#if [1]
  <p>Visible content</p>
{/if}

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

A!show

Bshow === false

Cshow = true

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using assignment instead of comparison.

Negating the variable incorrectly.

The {#if} block should check the variable directly to render content conditionally.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates double when count changes.

Svelte

<script>
  let count = 0;
  let double;
  $: [1] = [2] * 2;
</script>

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

Adouble

Bcount

Ccount + 1

Ddouble + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using expressions that do not depend on count.

Assigning to the wrong variable.

The reactive statement assigns double to twice the value of count.

5fill in blank

hard

Fill all three blanks to create a Svelte component that dispatches a custom event with detail when a button is clicked.

Svelte

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function handleClick() {
    dispatch('[1]', [2]);
  }
  let [3] = 'Hello';
</script>
<button on:click={handleClick}>Send</button>

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

Amessage

B{ text: greeting }

Cgreeting

D{ text: message }

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined variables in the dispatch call.

Incorrect event name or detail format.

The event name is message, the detail is an object with text from greeting variable.