Conditional classes (class:name) in Svelte - Mini Project: Build & Apply

Conditional classes (class:name) in Svelte

📖 Scenario: You are building a simple to-do list app. Each task can be marked as done or not done. You want to show done tasks with a different style.

🎯 Goal: Create a Svelte component that shows a list of tasks. Use conditional classes with class:done to style tasks that are done.

📋 What You'll Learn

Create a list of tasks with exact names and done status

Create a variable to track the minimum number of done tasks to highlight

Use a for loop to display tasks

Use class:done to conditionally add a CSS class based on task status

💡 Why This Matters

🌍 Real World

Conditional classes are used in real apps to change styles dynamically, like marking completed tasks or highlighting active menu items.

💼 Career

Knowing how to use conditional classes in Svelte is important for building interactive user interfaces that respond to user actions.

1

Create the tasks list

Create a variable called tasks that is an array of objects with these exact entries: { name: 'Buy groceries', done: false }, { name: 'Clean room', done: true }, { name: 'Pay bills', done: false }.

Svelte

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

Hint

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

2

Add a highlight threshold variable

Create a variable called highlightDoneCount and set it to 1 to represent the minimum number of done tasks to highlight.

Svelte

let tasks = [
  { name: 'Buy groceries', done: false },
  { name: 'Clean room', done: true },
  { name: 'Pay bills', done: false }
];
// Create highlightDoneCount variable and set it to 1
// Your code here

Hint

Use let highlightDoneCount = 1; to create the variable.

3

Display tasks with conditional classes

Use a {#each tasks as task} block to display each task's name inside a <li>. Add a conditional class done using class:done={task.done} on the <li>.

Svelte

let tasks = [
  { name: 'Buy groceries', done: false },
  { name: 'Clean room', done: true },
  { name: 'Pay bills', done: false }
];

let highlightDoneCount = 1;


   -->
  // Your code here

Hint

Use {#each tasks as task} and inside it write <li class:done={task.done}>{task.name}</li>.

4

Add CSS for the done class

Add a <style> block with CSS that styles the .done class to have text-decoration: line-through; and color: gray;.

Svelte

let tasks = [
  { name: 'Buy groceries', done: false },
  { name: 'Clean room', done: true },
  { name: 'Pay bills', done: false }
];

let highlightDoneCount = 1;


  {#each tasks as task}
    {task.name}
  {/each}



// Your code here

Hint

Write a <style> block with CSS for the .done class.