Dynamic inline styles in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered background color?

Consider this Svelte component that sets a dynamic background color based on a variable. What background color will the

have when rendered?

Svelte

<script>
  let color = 'blue';
</script>

<div style="background-color: {color}; width: 100px; height: 100px;"></div>

A The div will have a transparent background color.

B The div will have a red background color.

C The div will have a blue background color.

D The div will have no background color because the style syntax is invalid.

💡 Hint

Look at how the variable 'color' is used inside the style attribute with curly braces.

In Svelte, you can use curly braces inside attribute values to insert JavaScript expressions. Here, {color} inserts the string 'blue', so the div's background color becomes blue.

📝 Syntax

intermediate

Which option correctly applies a dynamic font size?

You want to set the font size dynamically in a Svelte component using a variable 'size' that holds a number representing pixels. Which option correctly applies this style?

Svelte

let size = 24;

A <p style="font-size: size + 'px';">Text</p>

B <p style="font-size: {size}px;">Text</p>

C <p style="font-size: '{size}px';">Text</p>

D <p style="font-size: {size};">Text</p>

💡 Hint

Remember to use curly braces to insert variables and include units like 'px' as part of the string.

Option B correctly uses curly braces to insert the variable 'size' and appends 'px' outside the braces. This results in a valid CSS value like '24px'. Other options either treat the variable as a string or omit units.

❓ state_output

advanced

What is the background color after clicking the button twice?

This Svelte component toggles the background color between 'red' and 'green' each time the button is clicked. What is the background color after two clicks?

Svelte

<script>
  let isRed = true;
  function toggle() {
    isRed = !isRed;
  }
</script>

<div style="background-color: {isRed ? 'red' : 'green'}; width: 100px; height: 100px;"></div>
<button on:click={toggle}>Toggle Color</button>

A The background color is red.

B The background color is green.

C The background color is blue.

D The background color does not change.

💡 Hint

Each click flips the boolean 'isRed'. Think about the initial value and how it changes after two toggles.

Initially, isRed is true, so background is red. After one click, isRed becomes false (green). After the second click, isRed flips back to true (red). So after two clicks, background is red again.

🔧 Debug

advanced

Why does this dynamic style not update on variable change?

This Svelte component tries to update the text color dynamically, but the color does not change when the button is clicked. What is the cause?

Svelte

<script>
  let color = 'black';
  function changeColor() {
    color = 'blue';
  }
</script>

<p style="color: {color};">Hello</p>
<button on:click={changeColor}>Change Color</button>

A The variable 'color' is not declared with let.

B Svelte does not support dynamic inline styles.

C The on:click event is not correctly attached to the button.

D The style uses quotes around 'color', so it is treated as a string, not a variable.

💡 Hint

Check how the variable is used inside the style attribute.

Putting 'color' in quotes inside the style attribute makes it a literal string, so the style is always 'color' instead of the variable's value. Removing the quotes and using {color} fixes the issue.

🧠 Conceptual

expert

How does Svelte optimize dynamic inline styles?

Svelte compiles components to efficient JavaScript. How does it handle dynamic inline styles to minimize DOM updates?

A Svelte updates only the changed style properties on the element instead of replacing the entire style attribute.

B Svelte re-renders the entire component whenever any style changes.

C Svelte uses inline CSS classes instead of style attributes for dynamic styles.

D Svelte does not optimize dynamic styles and updates the whole style attribute every time.

💡 Hint

Think about how frameworks avoid unnecessary DOM changes for better performance.

Svelte generates code that updates only the specific style properties that changed, avoiding full attribute replacements. This reduces DOM operations and improves performance.

Practice

1. What is the correct way to apply a dynamic background color in a Svelte component using inline styles?

easy

A. <div style="background-color: {color};"></div>

B. <div style="background-color: $color;"></div>

C. <div style="background-color: color;"></div>

D. <div style="background-color: {{color}};"></div>

Solution

1. Step 1: Understand Svelte's style binding syntax

   Svelte uses curly braces inside the style attribute to insert dynamic values, like {color}.

2. Step 2: Identify the correct syntax for inline styles

   The correct syntax is style="background-color: {color};". Other options use incorrect variable interpolation.

3. Final Answer:

   <div style="background-color: {color};"></div> -> Option A

4. Quick Check:

   Dynamic style uses {variable} inside style attribute [OK]

Hint: Use curly braces { } inside style attribute for dynamic values [OK]

Common Mistakes:

• Using $variable instead of {variable}
• Using double curly braces {{variable}}
• Writing variable name without braces

2. Which of the following is the correct syntax to set a dynamic width style in Svelte?

easy

A. <div style="width: width + 'px';"></div>

B. <div style="width: {width} px"></div>

C. <div style="width: {width + 'px'};"></div>

D. <div style="width: {width} px;"></div>

Solution

1. Step 1: Recognize how to concatenate strings in Svelte style

   Inside the style attribute, expressions must be wrapped in curly braces. To add 'px' to a number, concatenate inside the braces.

2. Step 2: Check each option's syntax

   <div style="width: {width + 'px'};"></div> correctly uses {width + 'px'}. <div style="width: width + 'px';"></div> lacks braces, B and C incorrectly place 'px' outside the braces.

3. Final Answer:

   <div style="width: {width + 'px'};"></div> -> Option C

4. Quick Check:

   Concatenate inside { } for dynamic units [OK]

Hint: Concatenate units inside { } for dynamic styles [OK]

Common Mistakes:

• Placing units outside curly braces
• Not using curly braces for expressions
• Using quotes incorrectly around expressions

3. Given the Svelte component code:

  <script>
    let size = 100;
  </script>
  <div style="width: {size}px; height: {size}px; background-color: 'red'">Box</div>

What will be the rendered style of the <div>?

medium

A. Syntax error due to quotes around 'red'

B. Width and height 100px, background color red

C. Width and height 100px, no background color applied

D. Width and height 100px, background color literal string 'red'

Solution

1. Step 1: Analyze the style attribute values

   The width and height use correct dynamic values with {size}px. The background-color: 'red' is a static value with single quotes.

2. Step 2: Understand rendering in Svelte and CSS

   After compilation, the style becomes "width: 100px; height: 100px; background-color: 'red'". Browsers parse 'red' as the color keyword red, applying the background color correctly. No syntax error.

3. Final Answer:

   Width and height 100px, background color red -> Option B

4. Quick Check:

   Quoted CSS color keywords render correctly [OK]

Hint: CSS accepts quoted color keywords in style attributes [OK]

Common Mistakes:

• Thinking quotes around colors cause syntax errors
• Believing quoted keywords don't apply as colors
• Confusing HTML attribute quoting with CSS parsing

4. Identify the error in this Svelte code snippet:

<script>
  let color = 'blue';
</script>
<div style="color: {color}">Text</div>

medium

A. Missing semicolon after {color}

B. Curly braces not allowed inside style attribute

C. Style attribute should use single quotes instead of double quotes

D. No error, code works correctly

Solution

1. Step 1: Review Svelte style binding syntax

   Using curly braces inside the style attribute to insert a variable is correct syntax in Svelte.

2. Step 2: Check for syntax errors

   The style string "color: {color}" is valid. Semicolons are optional if only one style is present. Quotes around the attribute are standard HTML.

3. Final Answer:

   No error, code works correctly -> Option D

4. Quick Check:

   Curly braces inside style attribute are valid [OK]

Hint: Curly braces inside style attribute are valid for dynamic values [OK]

Common Mistakes:

• Thinking semicolon is mandatory for single style
• Believing quotes type affects dynamic style syntax
• Assuming curly braces are not allowed in style

5. You want to create a Svelte component that changes the text color dynamically based on a status variable with values 'success', 'warning', or 'error'. Which is the best way to apply dynamic inline styles for this?

hard

A. <div style="color: {status === 'success' ? 'green' : status === 'warning' ? 'orange' : 'red'}">Status</div>

B. <div style="color: {status == 'success' & 'green' || status == 'warning' && 'orange' || 'red'}">Status</div>

C. <div class={status} >Status</div> <style>.success { color: green; } .warning { color: orange; } .error { color: red; }</style>

D. <div style="color: {status}">Status</div>

Solution

1. Step 1: Understand dynamic inline style with conditional expressions

   <div style="color: {status === 'success' ? 'green' : status === 'warning' ? 'orange' : 'red'}">Status</div> uses a nested ternary operator inside curly braces to select the correct color string based on status.

2. Step 2: Evaluate other options for correctness and best practice

   <div style="color: {status == 'success' && 'green' || status == 'warning' && 'orange' || 'red'}">Status</div> uses logical operators which can cause unexpected results. <div class={status} >Status</div> <style>.success { color: green; } .warning { color: orange; } .error { color: red; }</style> uses classes and CSS, not inline styles. <div style="color: {status}">Status</div> sets color to the literal status string, which is invalid color.

3. Final Answer:

   <div style="color: {status === 'success' ? 'green' : status === 'warning' ? 'orange' : 'red'}">Status</div> -> Option A

4. Quick Check:

   Use ternary inside { } for conditional inline styles [OK]

Hint: Use nested ternary inside { } for multiple conditions [OK]

Common Mistakes:

• Using logical operators instead of ternary
• Setting style to variable name without mapping
• Confusing inline styles with CSS classes