Dimension bindings (clientWidth, clientHeight) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the width of the div to the variable width.

Svelte

<script>
  let width = 0;
</script>

<div bind:[1]={width} style="background: lightblue; height: 100px;">
  Width: {width}px
</div>

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

AclientWidth

BclientHeight

CoffsetWidth

DscrollWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:clientHeight instead of bind:clientWidth

Trying to bind to offsetWidth which is not supported by Svelte binding

Forgetting to use bind: prefix

In Svelte, bind:clientWidth binds the element's width to the variable.

2fill in blank

medium

Complete the code to bind the height of the section to the variable height.

Svelte

<script>
  let height = 0;
</script>

<section bind:[1]={height} style="background: lightgreen; width: 200px;">
  Height: {height}px
</section>

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

AclientHeight

BclientWidth

CoffsetHeight

DscrollHeight

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:clientWidth instead of bind:clientHeight

Trying to bind to offsetHeight which is not supported by Svelte binding

Not initializing the variable before binding

Binding clientHeight updates the variable with the element's height.

3fill in blank

hard

Fix the error in the code to correctly bind the width of the div to boxWidth.

Svelte

<script>
  let boxWidth = 0;
</script>

<div bind:[1]={boxWidth} style="background: coral; height: 150px;">
  Box width: {boxWidth}px
</div>

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

AclientHeight

BscrollWidth

CoffsetWidth

DclientWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using clientHeight instead of clientWidth

Using offsetWidth which is not supported for binding

Forgetting the bind: prefix

The correct binding for width is clientWidth. Using clientHeight or others will not bind width.

4fill in blank

hard

Fill both blanks to bind width and height of the article to width and height variables.

Svelte

<script>
  let width = 0;
  let height = 0;
</script>

<article bind:[1]={width} bind:[2]={height} style="background: lightyellow;">
  Size: {width}px wide and {height}px tall
</article>

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

AclientWidth

BclientHeight

CoffsetWidth

DoffsetHeight

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up width and height bindings

Using offsetWidth or offsetHeight which are not supported for binding

Forgetting to bind both properties

Use bind:clientWidth for width and bind:clientHeight for height bindings.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates area when width or height changes.

Svelte

<script>
  let width = 0;
  let height = 0;
  let area = 0;

  $: area = [1] * [2];
</script>

<div bind:clientWidth={width} bind:clientHeight={height} style="background: lavender;">
  Area: {area} px²
</div>

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

Awidth

Bheight

Carea

Dwidth + height

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication

Using the variable area inside its own assignment

Mixing up width and height variables

The reactive statement multiplies width and height to update area.