SvelteKit overview - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic SvelteKit page component.

Svelte

<script>
  export let name = "World";
</script>

<h1>Hello, [1]!</h1>

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

Auser

Btitle

Cname

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined or exported.

Forgetting to use curly braces to insert the variable.

The variable name is exported and used inside the template to display the greeting.

2fill in blank

medium

Complete the code to navigate to a new page using SvelteKit's goto function.

Svelte

<script>
  import { goto } from '$app/navigation';

  function goToAbout() {
    goto('[1]');
  }
</script>

<button on:click={goToAbout}>About</button>

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

A/about

B/contact

C/home

D/profile

Attempts:

3 left

💡 Hint

Common Mistakes

Using a path that does not exist.

Forgetting the leading slash in the path.

The goto function navigates to the specified path. Here, it should go to the /about page.

3fill in blank

hard

Fix the error in the SvelteKit load function to fetch data from an API.

Svelte

export async function load({ fetch }) {
  const res = await fetch('[1]');
  const data = await res.json();
  return { props: { data } };
}

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

A'https://api.example.com/data'

B'/api/data'

C'/data.json'

D'api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths for external APIs.

Omitting the protocol (https://) in the URL.

The fetch inside load can call external URLs. The full URL is needed for external APIs.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates double when count changes.

Svelte

<script>
  let count = 0;
  let double;

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

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

Adouble

Bcount

Ccount + 1

Ddouble + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable on the left side.

Using an expression instead of a variable on the right side.

The reactive statement uses $: double = count * 2; to update double whenever count changes.

5fill in blank

hard

Fill all three blanks to create a SvelteKit form that submits data and handles the response.

Svelte

<script>
  import { invalidate } from '$app/navigation';

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const response = await fetch('[1]', {
      method: '[2]',
      body: formData
    });
    if (response.ok) {
      await invalidate('[3]');
    }
  }
</script>

<form on:submit={handleSubmit} aria-label="Contact form">
  <input name="email" type="email" required aria-required="true" placeholder="Your email" />
  <button type="submit">Send</button>
</form>

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

A/contact

BPOST

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST for form submission.

Mismatching URLs in fetch and invalidate calls.

The form submits to /contact using POST. After submission, invalidate('/contact') refreshes the data.