Dimension bindings (clientWidth, clientHeight) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component when resizing the window?

Consider this Svelte component that binds clientWidth and clientHeight to a div. What will be displayed inside the <main> element after resizing the browser window?

Svelte

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

  <main bind:clientWidth={width} bind:clientHeight={height} style="border: 2px solid black; padding: 1rem;">
    <p>Width: {width}</p>
    <p>Height: {height}</p>
  </main>

A The <main> element shows undefined for width and height because clientWidth and clientHeight are not valid bindings.

B The <main> element shows the width and height of the entire document, not the <main> element.

C The <main> element shows the width and height of the <main> element itself, updating on resize.

D The <main> element shows the current width and height of the viewport window.

💡 Hint

Think about what clientWidth and clientHeight measure in the DOM.

The bind:clientWidth and bind:clientHeight bindings in Svelte track the size of the element they are bound to. Here, they measure the <main> element's width and height, updating when it resizes.

❓ state_output

intermediate

What is the value of width after this code runs?

Given this Svelte snippet, what will be the value of width after the component mounts?

Svelte

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

<div bind:clientWidth={width} bind:clientHeight={height} style="width: 300px; height: 150px;"></div>

A 300, because the <div> has a fixed width of 300px.

B 0, because the bindings update only after user interaction.

C 150, because the height is 150px and width is not set.

D Undefined, because clientWidth binding does not work on <div> elements.

💡 Hint

Remember that clientWidth reflects the element's inner width in pixels.

The bind:clientWidth binding sets width to the

's actual width in pixels, which is 300px as set by the style.

📝 Syntax

advanced

Which option correctly binds both clientWidth and clientHeight in Svelte?

Choose the correct syntax to bind clientWidth and clientHeight of a section element to variables w and h.

A <section bind:clientWidth={w} bind:clientHeight={h}></section>

B <section bind:clientWidth=w bind:clientHeight=h></section>

C <section bind:clientWidth="w" bind:clientHeight="h"></section>

D <section bind:clientWidth={(w)} bind:clientHeight={(h)}></section>

💡 Hint

Recall how Svelte binds variables using curly braces.

Svelte requires curly braces around variable names in bindings to evaluate them as JavaScript expressions. Option A uses correct syntax.

🔧 Debug

advanced

Why does this Svelte component not update width on resize?

Examine this Svelte component. It binds clientWidth but the width variable never updates when resizing the window. What is the cause?

Svelte

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

<div bind:clientWidth={width} style="width: 100%; height: 100px; border: 1px solid black;"></div>

A The variable <code>width</code> is not declared with <code>let</code>.

B The style must use pixels instead of percentages for clientWidth to update.

C clientWidth binding only works on <main> elements, not <div>.

D The <div> has 100% width but its parent has no fixed width, so clientWidth does not change.

💡 Hint

Think about how percentage widths depend on parent elements.

If the parent container has no fixed width, the div with 100% width will not have a meaningful clientWidth change on window resize, so width stays the same.

🧠 Conceptual

expert

What is the main difference between binding clientWidth and using window.innerWidth in Svelte?

Choose the best explanation for the difference between binding clientWidth of an element and reading window.innerWidth in a Svelte component.

A <code>clientWidth</code> includes scrollbar width, but <code>window.innerWidth</code> excludes it.

B Binding <code>clientWidth</code> tracks the size of a specific element, while <code>window.innerWidth</code> gives the viewport width regardless of element size.

C Binding <code>clientWidth</code> works only on block elements, while <code>window.innerWidth</code> works only on inline elements.

D <code>window.innerWidth</code> updates automatically on resize, but <code>clientWidth</code> does not update unless manually refreshed.

💡 Hint

Think about what each measurement represents in the browser.

clientWidth measures the visible width of a specific element, updating when that element resizes. window.innerWidth measures the entire viewport width, independent of any element.

Practice

1. What does the Svelte dimension binding bind:clientWidth do when used on an element?

easy

A. It disables resizing of the element.

B. It sets the element's width to a fixed pixel value.

C. It stores the current width of the element in a variable and updates it automatically when the element resizes.

D. It binds the element's width to the window's width.

Solution

1. Step 1: Understand what bind:clientWidth does

   This binding connects a variable to the element's width in pixels.

2. Step 2: Recognize automatic updates on resize

   The variable updates automatically when the element's size changes, reflecting the current width.

3. Final Answer:

   It stores the current width of the element in a variable and updates it automatically when the element resizes. -> Option C

4. Quick Check:

   Dimension binding tracks element size = D [OK]

Hint: Dimension bindings track element size automatically [OK]

Common Mistakes:

• Thinking it sets a fixed width
• Confusing element width with window width
• Assuming it disables resizing

2. Which of the following is the correct syntax to bind an element's height to a variable height in Svelte?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Svelte binding syntax

   Bindings use bind:property={variable} to connect element property to variable.

2. Step 2: Identify correct syntax for clientHeight binding

   The correct form is bind:clientHeight={height} inside the element tag.

3. Final Answer:

   <div bind:clientHeight={height}></div> -> Option A

4. Quick Check:

   Binding syntax = bind:property={variable} [OK]

Hint: Use curly braces to bind variable: bind:clientHeight={var} [OK]

Common Mistakes:

• Omitting curly braces around variable
• Using attribute without binding syntax
• Writing bind:clientHeight without variable

3. Given this Svelte code snippet, what will be displayed when the <div> width is 300 pixels?

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

<div bind:clientWidth={width} style="width: 300px; height: 100px; background: lightblue;">Width: {width}px</div>

medium

A. Width: 0px

B. Width: 300px

C. Width: 100px

D. Width: undefined

Solution

1. Step 1: Understand binding effect on width variable

   The bind:clientWidth sets width to the element's actual width in pixels.

2. Step 2: Check element style width

   The div has inline style width of 300px, so width becomes 300.

3. Final Answer:

   Width: 300px -> Option B

4. Quick Check:

   bind:clientWidth updates width = 300px [OK]

Hint: bind:clientWidth reflects actual element width in pixels [OK]

Common Mistakes:

• Assuming initial variable value stays unchanged
• Confusing height with width
• Expecting undefined or zero without resize

4. Identify the error in this Svelte code that tries to bind the clientHeight to a variable height:

<script>
  let height;
</script>

<section bind:clientHeight>Height: {height}px</section>

medium

A. Missing curly braces to bind height variable to clientHeight.

B. Variable height should be initialized to 0.

C. The bind:clientHeight should be on a div, not section.

D. The variable height must be declared as const.

Solution

1. Step 1: Check binding syntax

   The binding must specify the variable with curly braces: bind:clientHeight={height}.

2. Step 2: Identify missing variable binding

   Here, bind:clientHeight is used without assigning it to height, so it won't update the variable.

3. Final Answer:

   Missing curly braces to bind height variable to clientHeight. -> Option A

4. Quick Check:

   Binding needs variable with curly braces = A [OK]

Hint: Always bind with variable: bind:clientHeight={height} [OK]

Common Mistakes:

• Omitting variable in binding
• Thinking variable must be initialized
• Assuming element type matters for binding

5. You want to create a responsive Svelte component that changes its background color based on its own width using bind:clientWidth. Which approach correctly implements this behavior?

hard

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

<div bind:clientWidth={width} style="background: width > 200 ? 'lightgreen' : 'lightcoral'; width: 100%; height: 100px;">
Width: {width}px
</div>

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

<div style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
Width: {width}px
</div>

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

<div bind:clientWidth style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
Width: {width}px
</div>

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

<div bind:clientWidth={width} style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
Width: {width}px
</div>

Solution

1. Step 1: Confirm correct binding syntax

   <script>
     let width = 0;
   </script>
   
   <div bind:clientWidth={width} style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
     Width: {width}px
   </div>

   uses bind:clientWidth={width}, correctly binding width variable.

2. Step 2: Check style expression syntax

   <script>
     let width = 0;
   </script>
   
   <div bind:clientWidth={width} style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
     Width: {width}px
   </div>

   uses a valid inline style with a ternary expression inside curly braces to change background color based on width.

3. Step 3: Identify errors in other options

   <script>
     let width = 0;
   </script>
   
   <div style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
     Width: {width}px
   </div>

   lacks binding, so width stays 0.

   <script>
     let width = 0;
   </script>
   
   <div bind:clientWidth style="background: {width > 200 ? 'lightgreen' : 'lightcoral'}; width: 100%; height: 100px;">
     Width: {width}px
   </div>

   misses variable in binding.

   <script>
     let width = 0;
   </script>
   
   <div bind:clientWidth={width} style="background: width > 200 ? 'lightgreen' : 'lightcoral'; width: 100%; height: 100px;">
     Width: {width}px
   </div>

   uses invalid style syntax without curly braces around expression.

4. Final Answer:

   Correctly binds width and uses proper style expression. -> Option D

5. Quick Check:

   Bind variable and use style expression correctly = A [OK]

Hint: Bind width variable and use curly braces for style expressions [OK]

Common Mistakes:

• Forgetting to bind variable
• Incorrect style expression syntax
• Using bind without variable assignment