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.