Use directive syntax in Svelte - Mini Project: Build & Apply

Use directive syntax in Svelte

📖 Scenario: You are building a simple Svelte app that shows a list of tasks. You want to display only the tasks that are marked as important.

🎯 Goal: Create a Svelte component that uses the {#if} directive to show only important tasks from a list.

📋 What You'll Learn

Create an array called tasks with objects containing id, name, and important properties

Create a boolean variable called showImportantOnly set to true

Use the {#if} directive inside a {#each} block to display only tasks where important is true when showImportantOnly is true

Add a button that toggles showImportantOnly between true and false

💡 Why This Matters

🌍 Real World

Filtering lists based on user preferences is common in apps like to-do lists, shopping lists, and email clients.

💼 Career

Understanding Svelte directives and reactive variables is essential for building interactive web apps efficiently.

1

Create the tasks array

Create an array called tasks with these exact objects: { id: 1, name: 'Buy groceries', important: true }, { id: 2, name: 'Clean room', important: false }, and { id: 3, name: 'Pay bills', important: true }.

Svelte

// Create the tasks array with the exact objects
// Your code here

Hint

Use let tasks = [ ... ] with the exact objects inside the array.

2

Add the showImportantOnly variable

Add a boolean variable called showImportantOnly and set it to true.

Svelte

let tasks = [
  { id: 1, name: 'Buy groceries', important: true },
  { id: 2, name: 'Clean room', important: false },
  { id: 3, name: 'Pay bills', important: true }
];

// Add the showImportantOnly variable below
// Your code here

Hint

Use let showImportantOnly = true; to create the variable.

3

Use {#each} and {#if} directives to show tasks

Use a {#each tasks as task} block to loop over tasks. Inside it, use a {#if} directive to show the task.name only if showImportantOnly is false or if task.important is true.

Svelte

let tasks = [
  { id: 1, name: 'Buy groceries', important: true },
  { id: 2, name: 'Clean room', important: false },
  { id: 3, name: 'Pay bills', important: true }
];

let showImportantOnly = true;

Hint

Use {#each tasks as task} to loop, then inside use {#if !showImportantOnly || task.important} to conditionally show the task name.

4

Add a button to toggle showImportantOnly

Add a <button> element that toggles the showImportantOnly variable between true and false when clicked. Use the on:click directive with a function that sets showImportantOnly = !showImportantOnly. The button text should be Toggle Important Only.

Svelte

let tasks = [
  { id: 1, name: 'Buy groceries', important: true },
  { id: 2, name: 'Clean room', important: false },
  { id: 3, name: 'Pay bills', important: true }
];

let showImportantOnly = true;


  {#each tasks as task}
    {#if !showImportantOnly || task.important}
      {task.name}
    {/if}
  {/each}

Hint

Use <button on:click={() => showImportantOnly = !showImportantOnly}> with the exact toggle logic.

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