Conditional classes (class:name) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the class 'active' only when the variable isActive is true.

Svelte

<button class:[1]={isActive}>Click me</button>

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

Aselected

Bactive

Cenabled

Dhighlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong class name after class:.

Forgetting to use curly braces around the condition.

The syntax class:active={isActive} adds the 'active' class only when isActive is true.

2fill in blank

medium

Complete the code to add the class 'hidden' only when the variable isHidden is true.

Svelte

<div class:[1]={isHidden}>Content</div>

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

Ashow

Bvisible

Chidden

Ddisplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name that does not exist in CSS.

Not wrapping the condition in curly braces.

Using class:hidden={isHidden} will add the 'hidden' class only when isHidden is true.

3fill in blank

hard

Fix the error in the code to correctly add the class 'error' when hasError is true.

Svelte

<p class:[1]={hasError}>Warning message</p>

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

Aerror

Bwarning

Calert

Dfail

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different class name than 'error'.

Not using the correct variable for the condition.

The class name after class: must be 'error' to match the intended CSS class.

4fill in blank

hard

Fill both blanks to add 'active' class when isActive is true and 'disabled' class when isDisabled is true.

Svelte

<button class:[1]={isActive} class:[2]={isDisabled}>Submit</button>

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

Aactive

Benabled

Cdisabled

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping class names between variables.

Using class names that do not exist in CSS.

Use class:active={isActive} and class:disabled={isDisabled} to toggle classes based on variables.

5fill in blank

hard

Fill all three blanks to add 'highlight' when isHighlighted is true, 'selected' when isSelected is true, and 'focus' when isFocused is true.

Svelte

<div class:[1]={isHighlighted} class:[2]={isSelected} class:[3]={isFocused}>Item</div>

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

Ahighlight

Bselected

Cfocus

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up class names and variables.

Forgetting to use curly braces for conditions.

Each class name matches the variable controlling its presence: highlight, selected, and focus.