svelte:window for window events - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for a window resize event using svelte:window.

Svelte

<svelte:window on:[1]={handleResize} />

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

Aclick

Bkeydown

Cresize

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'resize' for window resize events.

Trying to listen on a regular element instead of svelte:window.

The svelte:window element listens to window events. To react to window resizing, use the resize event.

2fill in blank

medium

Complete the code to bind the window's innerWidth to a variable using svelte:window.

Svelte

<svelte:window bind:[1] />

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

AinnerWidth

BscrollX

CinnerHeight

DpageYOffset

Attempts:

3 left

💡 Hint

Common Mistakes

Binding to innerHeight when width is needed.

Using scroll position properties instead of size.

Binding innerWidth lets you track the window's width reactively in your component.

3fill in blank

hard

Fix the error in this code to listen for window keydown events using svelte:window.

Svelte

<svelte:window on:[1]={handleKeydown} />

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

Akeydown

Bkeypress

Ckeyup

Dkeypressed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'keypress' which is deprecated.

Using 'keypressed' which is not a valid event.

The correct event for detecting when a key is pressed down is keydown. The others are either deprecated or incorrect event names.

4fill in blank

hard

Fill both blanks to bind window scroll positions using svelte:window.

Svelte

<svelte:window bind:[1] bind:[2] />

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

AscrollX

BscrollY

CpageXOffset

DpageYOffset

Attempts:

3 left

💡 Hint

Common Mistakes

Using pageXOffset and pageYOffset which are read-only and not bindable.

Binding only one scroll position instead of both.

Binding scrollX and scrollY tracks the horizontal and vertical scroll positions of the window reactively.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates width and height on window resize using svelte:window.

Svelte

<script>
  let width;
  let height;

  $: size = { width: [1], height: [2] };
</script>

<svelte:window bind:[3]={width} bind:innerHeight={height} on:resize />

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

Awidth

BinnerWidth

CinnerHeight

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable names and window property names incorrectly.

Binding width directly instead of innerWidth.

The reactive statement uses width and height variables. The svelte:window binds innerWidth to width and innerHeight to height.

Practice

1. What is the main purpose of using svelte:window in a Svelte component?

easy

A. To style the window element with CSS

B. To create a new browser window

C. To listen to events on the browser window like resize or scroll

D. To manage component state internally

Solution

1. Step 1: Understand svelte:window usage

   svelte:window is a special element in Svelte used to listen to events on the browser window object.

2. Step 2: Identify the correct purpose

   It does not create windows or style elements but listens to events like resize or scroll on the window.

3. Final Answer:

   To listen to events on the browser window like resize or scroll -> Option C

4. Quick Check:

   svelte:window listens to window events [OK]

Hint: Remember: svelte:window listens to window events only [OK]

Common Mistakes:

• Thinking it creates or styles windows
• Confusing with component state management
• Using it to listen to DOM element events

2. Which of the following is the correct syntax to listen for the window's resize event using svelte:window?

easy

A. <div on:resize={handleResize}></div>

B. <svelte:window on:resize={handleResize} />

C. <window onresize={handleResize}></window>

D. <svelte:window bind:resize={handleResize} />

Solution

1. Step 1: Recall correct event binding syntax in Svelte

   In Svelte, event listeners use on:eventName={handler} syntax.

2. Step 2: Apply to svelte:window

   The correct way to listen to window resize is <svelte:window on:resize={handleResize} />.

3. Final Answer:

   <svelte:window on:resize={handleResize} /> -> Option B

4. Quick Check:

   Use on:event on svelte:window [OK]

Hint: Use on:event syntax on svelte:window [OK]

Common Mistakes:

• Using HTML window tag which doesn't exist
• Trying to bind event with bind: instead of on:
• Attaching events to div instead of svelte:window

3. Given this Svelte code snippet, what will be the value of width after resizing the browser window?

  <script>
    let width = 0;
    function updateWidth(event) {
      width = event.currentTarget.innerWidth;
    }
  </script>

  <svelte:window on:resize={updateWidth} />

  <p>Window width: {width}</p>

medium

A. It updates to the current window width on every resize

B. It stays 0 because width is never updated

C. It throws an error because event.currentTarget is undefined

D. It updates only once when the component loads

Solution

1. Step 1: Understand the event handler logic

   The updateWidth function sets width to event.currentTarget.innerWidth, which is the window's width.

2. Step 2: Recognize svelte:window event behavior

   On every resize event, updateWidth runs, updating width reactively.

3. Final Answer:

   It updates to the current window width on every resize -> Option A

4. Quick Check:

   Resize triggers updateWidth, updating width [OK]

Hint: Resize triggers handler updating width reactively [OK]

Common Mistakes:

• Assuming width never changes without explicit initialization
• Confusing event.currentTarget with event.target
• Thinking event.currentTarget is undefined in this context

4. Identify the error in this Svelte code that tries to listen for the window scroll event:

  <script>
    let scrollY = 0;
    function onScroll() {
      scrollY = window.scrollY;
    }
  </script>

  <svelte:window on:scroll={onScroll}></svelte:window>

  <p>Scroll position: {scrollY}</p>

medium

A. Not binding scrollY with bind:scrollY

B. Missing event parameter in onScroll function

C. Accessing window.scrollY inside the handler is invalid

D. Using <svelte:window> with a closing tag instead of self-closing

Solution

1. Step 1: Check svelte:window tag usage

   svelte:window is a special element that must be self-closing when used to listen to events.

2. Step 2: Identify the tag error

   The code uses an opening and closing tag <svelte:window></svelte:window>, which is invalid syntax for this element.

3. Final Answer:

   Using <svelte:window> with a closing tag instead of self-closing -> Option D

4. Quick Check:

   svelte:window must be self-closing [OK]

Hint: Always self-close svelte:window when listening to events [OK]

Common Mistakes:

• Trying to use opening and closing tags for svelte:window
• Thinking bind: is needed for event values
• Assuming window.scrollY is inaccessible in handler

5. You want to track both the window's width and height reactively using svelte:window. Which code snippet correctly updates both values on resize events?

hard

A. <script>
let width = 0, height = 0;
function updateSize() {
width = window.innerWidth;
height = window.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

B. <script>
let width = 0, height = 0;
function updateSize(event) {
width = event.currentTarget.innerWidth;
height = event.currentTarget.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

C. <script>
let width = 0, height = 0;
<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
</script>

D. <script>
let width = 0, height = 0;
function updateSize(event) {
width = event.target.innerWidth;
height = event.target.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

Solution

1. Step 1: Understand event object properties

   In window resize events, event.currentTarget and event.target may not reliably provide innerWidth and innerHeight. Using window.innerWidth and window.innerHeight is safer.

2. Step 2: Check each option

   <script> let width = 0, height = 0; function updateSize(event) { width = event.currentTarget.innerWidth; height = event.currentTarget.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses event.currentTarget which may not always be the window. <script> let width = 0, height = 0; function updateSize() { width = window.innerWidth; height = window.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses window.innerWidth and window.innerHeight directly, which is correct. <script> let width = 0, height = 0; <svelte:window bind:innerWidth={width} bind:innerHeight={height} /> </script> tries to bind non-bindable properties. <script> let width = 0, height = 0; function updateSize(event) { width = event.target.innerWidth; height = event.target.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses event.target which is unreliable.

3. Final Answer:

   Use window.innerWidth and window.innerHeight inside the handler -> Option A

4. Quick Check:

   Access window size via window.innerWidth in handler [OK]

Hint: Use window.innerWidth inside handler, not event properties [OK]

Common Mistakes:

• Using event.currentTarget or event.target for window size
• Trying to bind window properties directly
• Assuming event object always has innerWidth/innerHeight