First Svelte component - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte component display?

Consider this simple Svelte component code. What will be shown on the webpage when it renders?

Svelte

<script>
  let name = 'Alice';
</script>

<h1>Hello {name}!</h1>

A Hello {name}!

B Hello Alice!

C Hello !

D Error: name is not defined

💡 Hint

Look at how the variable 'name' is used inside curly braces in the HTML.

The variable name is set to 'Alice' and used inside curly braces in the HTML. Svelte replaces {name} with the variable's value, so it displays 'Hello Alice!'.

📝 Syntax

intermediate

Which option correctly defines a Svelte component with a button that increments a counter?

Choose the code that correctly creates a Svelte component with a button. Clicking the button increases a number shown on the page.

A

<script>
  let count = 0
  function increment() {
    count = count + 1
  }
</script>
<button on:click=increment>{count}</button>

B

<script>
  let count = 0;
  function increment() {
    count++
  }
</script>
<button onclick={increment}>{count}</button>

C

<script>
  let count = 0;
  function increment() {
    count += 1
  }
</script>
<button onClick={increment}>{count}</button>

D

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>{count}</button>

💡 Hint

Svelte uses 'on:click' for event handlers and requires braces around the handler function.

Option D uses on:click={increment} which is the correct Svelte syntax for event handlers. Other options have wrong event attribute names or missing braces.

❓ state_output

advanced

What is the displayed count after clicking the button twice?

Given this Svelte component, what number will be shown after clicking the button two times?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>{count}</button>

A 0

B 1

C 2

D Error: count is not reactive

💡 Hint

Each click runs the increment function which adds 1 to count.

The initial count is 0. Each click adds 1. After two clicks, count is 2, so the button shows '2'.

🔧 Debug

advanced

Why does this Svelte component not update the count when the button is clicked?

Look at this code. Clicking the button does not change the number shown. What is the reason?

Svelte

<script>
  let count = 0;
  function increment() {
    count = count + 1;
  }
</script>
<button on:click=increment>{count}</button>

A The event handler is missing braces around 'increment': should be 'on:click={increment}' not 'on:click=increment'.

B The variable 'count' must be declared with 'const' to update.

C The function 'increment' must return the new count value.

D The button element cannot display variables inside curly braces.

💡 Hint

Check the event attribute syntax in Svelte, especially the braces around the handler.

Svelte event directives require braces {} around the handler, like on:click={increment}. Without braces, on:click=increment treats 'increment' as a string literal, so no handler is attached and clicking does nothing.

🧠 Conceptual

expert

What happens if you declare a variable with 'const' in a Svelte component and try to update it?

In Svelte, if you write const count = 0; and then try to increase count inside a function, what will happen?

A A runtime error occurs because 'count' cannot be reassigned.

B The count updates normally because Svelte tracks all variables.

C The count updates but the UI does not reflect the change.

D The component compiles but clicking the button does nothing silently.

💡 Hint

Think about how 'const' works in JavaScript and Svelte's reactivity.

Variables declared with const cannot be reassigned. Trying to update count causes a runtime error. Svelte requires let for reactive variables.

Practice

1. What is the main purpose of a Svelte component?

easy

A. To write backend server code

B. To combine HTML, CSS, and JavaScript in one file for UI parts

C. To create database schemas

D. To manage operating system processes

Solution

1. Step 1: Understand what Svelte components do

   Svelte components bundle HTML, CSS, and JavaScript to build user interfaces.

2. Step 2: Compare options with this purpose

   Only To combine HTML, CSS, and JavaScript in one file for UI parts describes combining these parts for UI, others are unrelated.

3. Final Answer:

   To combine HTML, CSS, and JavaScript in one file for UI parts -> Option B

4. Quick Check:

   Svelte components = UI parts combined [OK]

Hint: Remember Svelte bundles UI code in one file [OK]

Common Mistakes:

• Thinking Svelte is for backend code
• Confusing Svelte with database tools
• Assuming Svelte manages OS tasks

2. Which of the following is the correct way to define a simple Svelte component that displays "Hello World!"?

easy

A. Hello {name}!

B. Hello World

C. function Hello() { return 'Hello World'; }

D. Hello World

Solution

1. Step 1: Identify Svelte syntax for components

   Svelte uses <script> for logic and HTML with curly braces for variables.

2. Step 2: Check which option matches this pattern

   <script>export let name = 'World';</script><h1>Hello {name}!</h1> uses <script> and {name} interpolation correctly; others are plain HTML or JS functions.

3. Final Answer:

   <script>export let name = 'World';</script><h1>Hello {name}!</h1> -> Option A

4. Quick Check:

   Svelte uses <script> and { } for variables [OK]

Hint: Look for <script> and { } interpolation in Svelte [OK]

Common Mistakes:

• Using plain HTML without <script>
• Writing JS functions instead of Svelte syntax
• Including full HTML document tags inside component

3. Given this Svelte component code:

<script>
  let count = 0;
</script>
<button on:click={() => count++}>Clicked {count} times</button>

What will the button display after clicking it 3 times?

medium

A. Clicked 3 times

B. Clicked 0 times

C. Clicked count times

D. Clicked NaN times

Solution

1. Step 1: Understand the initial state and event

   Variable count starts at 0; clicking button runs count++ to increase by 1.

2. Step 2: Calculate count after 3 clicks

   After 3 clicks, count increments 3 times: 0 + 3 = 3.

3. Final Answer:

   Clicked 3 times -> Option A

4. Quick Check:

   count increments on click = 3 [OK]

Hint: Count increments by 1 each click [OK]

Common Mistakes:

• Thinking count resets on each click
• Confusing variable name with string literal
• Expecting no change without explicit render

4. What is wrong with this Svelte component code?

<script>
  let message = 'Hi';
</script>
<h1>{message</h1>

medium

A. Script tag should be outside the component

B. Variable message is not declared

C. Missing closing curly brace in {message}

D. Using <h1> tag is invalid in Svelte

Solution

1. Step 1: Check the template syntax

   The expression {message} must have matching braces; here the closing brace is missing.

2. Step 2: Verify other parts

   Variable is declared, <h1> is valid, and <script> is correctly placed.

3. Final Answer:

   Missing closing curly brace in {message} -> Option C

4. Quick Check:

   Curly braces must open and close properly [OK]

Hint: Check all { } pairs in template expressions [OK]

Common Mistakes:

• Forgetting to close curly braces
• Thinking HTML tags are invalid in Svelte
• Misplacing the <script> tag

5. You want to create a Svelte component that shows a greeting only if a user name is provided. Which code correctly implements this?

hard

A. Hello {user}!

B. Hello {user || 'Guest'}!

C. Hello {user}!

D. {#if user}Hello {user}!{/if}

Solution

1. Step 1: Understand conditional rendering in Svelte

   Svelte uses {#if condition} ... {/if} blocks to show content conditionally.

2. Step 2: Check which option uses this correctly

   <script>export let user = '';</script>{#if user}<p>Hello {user}!</p>{/if} uses {#if user} to show greeting only if user is not empty; others always show or lack condition.

3. Final Answer:

   <script>export let user = '';</script>{#if user}<p>Hello {user}!</p>{/if} -> Option D

4. Quick Check:

   Use {#if} for conditional display [OK]

Hint: Use {#if} block to show content conditionally [OK]

Common Mistakes:

• Not using {#if} for conditional display
• Always showing greeting even if user is empty
• Using JS ternary inside <p> without Svelte block