Use directive syntax in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value to the variable name using Svelte's directive syntax.

Svelte

<input [1]="name" />

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

Aclass:value

Bon:input

Cuse:value

Dbind:value

Attempts:

3 left

💡 Hint

Common Mistakes

Using event handlers like on:input instead of binding.

Trying to use use:value which is for actions, not binding.

In Svelte, to bind an input's value to a variable, you use the bind:value directive.

2fill in blank

medium

Complete the code to listen for a click event on the button using Svelte's directive syntax.

Svelte

<button [1]="handleClick">Click me</button>

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

Abind:click

Buse:click

Con:click

Dclass:click

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:click which is not valid for events.

Trying to use use:click which is for actions.

To listen for events in Svelte, you use the on:event directive, so on:click listens for clicks.

3fill in blank

hard

Fix the error in the code by completing the directive to conditionally show the paragraph only if show is true.

Svelte

<p [1]="show">This is visible only when show is true.</p>

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

Aif

Bon:if

Cuse:if

Dbind:if

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:if or on:if which are invalid.

Trying to use use:if which is for actions.

In Svelte, conditional rendering uses the {#if} block, but for directive syntax on elements, you use the if directive without a colon.

4fill in blank

hard

Fill both blanks to bind the checkbox's checked state to isChecked and listen for change events with handleChange.

Svelte

<input type="checkbox" [1]="isChecked" [2]="handleChange" />

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

Abind:checked

Bon:change

Cbind:value

Don:click

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:value for checkboxes instead of bind:checked.

Listening for click instead of change events.

Use bind:checked to link the checkbox state and on:change to listen for changes.

5fill in blank

hard

Fill all three blanks to bind the textarea's value to text, listen for input events with handleInput, and apply the autofocus attribute.

Svelte

<textarea [1]="text" [2]="handleInput" [3]></textarea>

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

Abind:value

Bon:input

Cautofocus

Dbind:checked

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:checked on textarea which is invalid.

Forgetting to add the autofocus attribute.

Bind the textarea's value with bind:value, listen for input events with on:input, and add the autofocus attribute to focus it on load.