Dimension bindings (clientWidth, clientHeight) in Svelte - Mini Project: Build & Apply

Dimension bindings with clientWidth and clientHeight in Svelte

📖 Scenario: You are building a simple Svelte component that shows the size of a box on the screen. The box's width and height should update automatically when the browser window changes size.

🎯 Goal: Create a Svelte component that uses bind:clientWidth and bind:clientHeight to track the size of a <div> element and display these dimensions inside the box.

📋 What You'll Learn

Create a <div> element with a fixed style so it is visible on the page

Bind the clientWidth and clientHeight properties of the <div> to Svelte variables

Display the current width and height inside the <div>

Update the displayed dimensions automatically when the window resizes

💡 Why This Matters

🌍 Real World

Tracking element sizes is useful for responsive design, animations, or adjusting layouts dynamically based on available space.

💼 Career

Many web developer roles require understanding how to react to element size changes for building adaptive user interfaces.

1

Create a visible box <div>

Create a <div> element with a class of box and add inline styles to set its width to 300px, height to 200px, background color to #cce5ff, and center the text inside it.

Svelte

Need a hint?

Use a <div> with the exact class="box" and inline styles for width, height, background color, and flex centering.

2

Add variables to hold width and height

Add two let variables called width and height at the top of the Svelte component script block. Initialize both to 0.

Svelte

  // Your code here



  

Need a hint?

Declare let width = 0; and let height = 0; inside a <script> block.

3

Bind clientWidth and clientHeight to variables

Bind the clientWidth property of the <div> to the width variable and the clientHeight property to the height variable using Svelte's bind: syntax.

Svelte

  let width = 0;
  let height = 0;



>
  

Need a hint?

Use bind:clientWidth={width} and bind:clientHeight={height} inside the <div> tag.

4

Display the width and height inside the box

Inside the <div>, add text that shows the current width and height using Svelte's curly braces syntax: {width} and {height}. Format it as Width: {width}px, Height: {height}px.

Svelte

  let width = 0;
  let height = 0;



  

Need a hint?

Use Width: {width}px, Height: {height}px inside the <div> to show the dimensions.