Dynamic inline styles in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the background color dynamically using inline styles.

Svelte

<script>
  let bgColor = 'lightblue';
</script>

<div style="background-color: [1]">
  This box has a dynamic background color.
</div>

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

A"bgColor"

BbgColor

CbackgroundColor

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the variable name, which makes it a string literal.

Using a wrong style property name like 'color' instead of 'background-color'.

The variable bgColor holds the color value. Using it directly inside the style attribute applies the dynamic color.

2fill in blank

medium

Complete the code to set the font size dynamically using inline styles.

Svelte

<script>
  let fontSize = 20;
</script>

<p style="font-size: [1] + 'px'">
  This text has dynamic font size.
</p>

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

AfontSize

B"fontSize"

Cfont-size

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name, making it a string literal.

Forgetting to add 'px' units after the number.

The variable fontSize holds the numeric size. Concatenating it with 'px' sets the font size in pixels.

3fill in blank

hard

Fix the error in the code to apply dynamic color style correctly.

Svelte

<script>
  let textColor = 'red';
</script>

<h1 style="color: '[1]'">
  Dynamic colored heading
</h1>

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

Acolor

B"textColor"

C'textColor'

DtextColor

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving quotes around the variable name inside the style attribute.

Using the wrong variable or property name.

Remove the quotes around the variable inside the style attribute. Use {textColor} to insert the variable value dynamically.

4fill in blank

hard

Fill both blanks to create a dynamic style object and apply it inline.

Svelte

<script>
  let size = 18;
  let color = 'green';
  let styleObj = { [1]: size + 'px', [2]: color };
</script>

<p style="[1]: {styleObj[[1]]}; [2]: {styleObj[[2]]}">
  Styled with dynamic object
</p>

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

Afont-size

BfontSize

Ccolor

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase keys like 'fontSize' which won't work as CSS property names in this object.

Mixing up color and background-color properties.

The style object keys must be CSS property names as strings. Use font-size and color to set font size and text color dynamically.

5fill in blank

hard

Fill all three blanks to bind multiple dynamic styles inline using Svelte syntax.

Svelte

<script>
  let width = 100;
  let height = 50;
  let bg = 'yellow';
</script>

<div style="width: [1] + 'px'; height: [2] + 'px'; background-color: [3];">
  Box with dynamic size and color
</div>

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

Awidth

Bheight

Cbg

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names or adding quotes around them.

Forgetting to add 'px' units for width and height.

Use the variables width, height, and bg to set the box's width, height, and background color dynamically.

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