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.