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.

Practice

1. What is the main purpose of SvelteKit in web development?

easy

A. To manage databases and server hardware

B. To create mobile apps using native code

C. To design static images and graphics

D. To build fast, modern web apps with minimal setup

Solution

1. Step 1: Understand SvelteKit's role

   SvelteKit is a framework designed to help developers build web applications quickly and efficiently.

2. Step 2: Identify the main feature

   It focuses on fast performance and less setup compared to traditional methods.

3. Final Answer:

   To build fast, modern web apps with minimal setup -> Option D

4. Quick Check:

   SvelteKit = fast web apps with less setup [OK]

Hint: Remember SvelteKit is for fast web apps, not mobile or graphics [OK]

Common Mistakes:

• Confusing SvelteKit with mobile app frameworks
• Thinking it manages databases directly
• Assuming it is for graphic design

2. Which file naming pattern does SvelteKit use to create routes automatically?

easy

A. Files inside the src/routes folder

B. Files inside the src/components folder

C. Files inside the public/assets folder

D. Files inside the src/styles folder

Solution

1. Step 1: Recall SvelteKit routing system

   SvelteKit uses file-based routing, where files in a specific folder define pages.

2. Step 2: Identify the correct folder

   The src/routes folder contains files that become routes automatically.

3. Final Answer:

   Files inside the src/routes folder -> Option A

4. Quick Check:

   Routes = files in src/routes [OK]

Hint: Routes come from src/routes folder files [OK]

Common Mistakes:

• Choosing components folder for routes
• Confusing public assets with routes
• Thinking styles folder controls routing

3. Given this SvelteKit page code, what will be rendered?

 <script>
  export let data;
</script>

<h1>User: {data.name}</h1>
<p>Age: {data.age}</p>

<!-- Assume load function returns { name: 'Alice', age: 30 } -->

medium

A. Error: data is undefined

B. User: AliceAge: 30

C. User: Age:

D. User: {data.name}Age: {data.age}

Solution

1. Step 1: Understand data passing in SvelteKit

   The load function provides data as props to the page component.

2. Step 2: Substitute data values in template

   Given { name: 'Alice', age: 30 }, the template renders those values inside the tags.

3. Final Answer:

   <h1>User: Alice</h1><p>Age: 30</p> -> Option B

4. Quick Check:

   Data props render actual values [OK]

Hint: Load data appears as props, so values show in template [OK]

Common Mistakes:

• Thinking template shows raw {data.name} text
• Assuming data is undefined without load
• Confusing syntax with missing data

4. What is wrong with this SvelteKit load function?

export async function load() {
  const res = await fetch('/api/data');
  const data = await res.json();
  return data;
}

medium

A. The function must not be async

B. It should return an object with data as a property, not just data

C. The load function is missing the `{ fetch }` argument

D. It should return a Promise, not data directly

Solution

1. Step 1: Recall load function signature

   SvelteKit load functions receive an argument object containing `fetch`, `params`, `parent`, etc.

2. Step 2: Identify the mistake in the function definition

   The function `load()` takes no arguments, so `fetch` inside is undefined, causing a runtime error.

3. Final Answer:

   The load function is missing the `{ fetch }` argument -> Option C

4. Quick Check:

   load({ fetch }) required [OK]

Hint: Always destructure { fetch } in load function args [OK]

Common Mistakes:

• Thinking load functions cannot be async
• Believing load must return { data: data }
• Thinking async functions need explicit Promise return

5. How can you create a dynamic route in SvelteKit to show user profiles by ID?

hard

A. Create a file named [id].svelte inside src/routes/users/

B. Create a file named id.svelte inside src/routes/users/

C. Create a folder named id inside src/routes/users/ with index.svelte

D. Create a file named users.svelte with a parameter inside

Solution

1. Step 1: Understand dynamic routing syntax

   SvelteKit uses square brackets in filenames to define dynamic route parameters.

2. Step 2: Apply to user ID route

   To capture user IDs dynamically, create [id].svelte inside the users folder.

3. Final Answer:

   Create a file named [id].svelte inside src/routes/users/ -> Option A

4. Quick Check:

   Dynamic routes use [param].svelte [OK]

Hint: Use square brackets in filename for dynamic routes [OK]

Common Mistakes:

• Omitting brackets for dynamic params
• Using folder names instead of file names
• Placing params in wrong folder