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.