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.

Practice

1. Which Svelte directive is used to conditionally show content based on a boolean value?
{#if}, {#each}, on:, or bind:?

easy

A. bind:

B. {#if}

C. on:

D. {#each}

Solution

1. Step 1: Understand the purpose of {#if}

   The {#if} directive in Svelte shows or hides content based on a condition.

2. Step 2: Compare with other directives

   {#each} loops over lists, on: handles events, and bind: links variables to inputs.

3. Final Answer:

   {#if} -> Option B

4. Quick Check:

   Conditional display = {#if} [OK]

Hint: Use {#if} to show/hide content based on true/false [OK]

Common Mistakes:

• Confusing {#if} with {#each} for loops
• Using on:click for conditional display
• Trying to bind variables for conditionals

2. Which of the following is the correct syntax to listen for a click event on a button in Svelte?

easy

A. <button onClick={handleClick}>Click</button>

B. <button click={handleClick}>Click</button>

C. <button on:click={handleClick}>Click</button>

D. <button bind:click={handleClick}>Click</button>

Solution

1. Step 1: Recall Svelte event directive syntax

   Svelte uses on:eventName={handler} to listen to events like clicks.

2. Step 2: Check each option

   <button on:click={handleClick}>Click</button> uses on:click correctly. Options A, B, and D use incorrect or invalid syntax.

3. Final Answer:

   <button on:click={handleClick}>Click</button> -> Option C

4. Quick Check:

   Event listener syntax = on:event [OK]

Hint: Use on:eventName={handler} to listen for events [OK]

Common Mistakes:

• Using camelCase like onClick instead of on:click
• Trying to bind events with bind:
• Omitting the on: prefix

3. What will be the rendered output of this Svelte code?

<script>
  let items = ['apple', 'banana'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

medium

A. applebanana

B. items

C. {item}{item}

D. Syntax error

Solution

1. Step 1: Understand the {#each} directive

   The {#each} directive loops over the array items and assigns each element to item.

2. Step 2: Render list items

   For each item, it creates a <li> element with the item text inside.

3. Final Answer:

   <ul><li>apple</li><li>banana</li></ul> -> Option A

4. Quick Check:

   Loop items render as list =
   • apple
   • banana
   [OK]

Hint: Each loops output list items for each array element [OK]

Common Mistakes:

• Expecting the literal string {item} to show
• Confusing the array name with item variable
• Thinking it causes a syntax error

4. Identify the error in this Svelte snippet:

<script>
  let count = 0;
</script>

<button on:click="count++">Increment</button>
<p>Count: {count}</p>

medium

A. Using double quotes around the event handler expression

B. Missing bind: directive on count variable

C. Incorrect variable name count

D. No error, code works fine

Solution

1. Step 1: Check event handler syntax

   Svelte requires event handlers to use curly braces without quotes: on:click={count++}.

2. Step 2: Identify the error

   The code uses quotes around the expression, which causes a syntax error.

3. Final Answer:

   Using double quotes around the event handler expression -> Option A

4. Quick Check:

   Event handler must be unquoted expression [OK]

Hint: Use curly braces, not quotes, for event handlers [OK]

Common Mistakes:

• Putting event handler code inside quotes
• Trying to bind variables unnecessarily
• Assuming variable name is wrong

5. You want to create a Svelte component that shows a list of tasks and lets the user toggle each task's completion status by clicking a checkbox. Which directive syntax combination correctly binds the checkbox state and updates the task's done property?

hard

A. <ul>
{#each tasks as task}
<li>
<input type="checkbox" on:click={task.done = !task.done} /> {task.text}
</li>
{/each}
</ul>

B. <ul>
{#each tasks as task}
<li>
<input type="checkbox" checked={task.done} on:change={() => task.done = !task.done} /> {task.text}
</li>
{/each}
</ul>

C. <ul>
{#each tasks as task}
<li>
<input type="checkbox" bind:value={task.done} /> {task.text}
</li>
{/each}
</ul>

D. <script>
let tasks = [
{ id: 1, text: 'Task 1', done: false },
{ id: 2, text: 'Task 2', done: true }
];
</script>

<ul>
{#each tasks as task}
<li>
<input type="checkbox" bind:checked={task.done} /> {task.text}
</li>
{/each}
</ul>

Solution

1. Step 1: Understand binding checkbox state

   In Svelte, bind:checked links the checkbox's checked state directly to a variable, updating it automatically.

2. Step 2: Analyze each option

   <script>
     let tasks = [
       { id: 1, text: 'Task 1', done: false },
       { id: 2, text: 'Task 2', done: true }
     ];
   </script>
   
   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" bind:checked={task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   uses bind:checked={task.done}, which is correct.

   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" checked={task.done} on:change={() => task.done = !task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   manually toggles on change but is more complex.

   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" bind:value={task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   uses bind:value which is incorrect for checkboxes.

   <ul>
     {#each tasks as task}
       <li>
         <input type="checkbox" on:click={task.done = !task.done} /> {task.text}
       </li>
     {/each}
   </ul>

   uses on:click without binding, which is less reactive.

3. Final Answer:

   bind:checked={task.done} -> Option D

4. Quick Check:

   Checkbox bind:checked updates variable automatically [OK]

Hint: Use bind:checked to sync checkbox with boolean variable [OK]

Common Mistakes:

• Using bind:value instead of bind:checked for checkboxes
• Manually toggling state instead of binding
• Using on:click without reactive binding