First Svelte component - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Svelte component that displays a greeting.

Svelte

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

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

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

Ausername

BName

Cname

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that was not declared.

Forgetting to use curly braces around the variable.

The variable name holds the greeting target. Using {name} inside the HTML displays its value.

2fill in blank

medium

Complete the code to bind the input value to the name variable.

Svelte

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

<input type="text" [1]={name} />
<p>Hello, {name}!</p>

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

Abind:value

Bvalue

Cbind

Dmodel

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value attribute which does not update the variable.

Using incorrect binding syntax like bind or model.

In Svelte, bind:value connects the input's value to the variable, updating it as the user types.

3fill in blank

hard

Fix the error in the component to correctly display the message only if name is not empty.

Svelte

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

[1] (name) {
  <p>Hello, {name}!</p>
}

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

Aif

B{#if

C{#each

Dwhile

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain JavaScript if without Svelte block syntax.

Using {#each} which is for loops, not conditions.

Svelte uses {#if} blocks to conditionally render content. The syntax is {#if condition} ... {/if}.

4fill in blank

hard

Fill both blanks to create a button that increments a counter and displays it.

Svelte

<script>
  let count = 0;
  function increment() {
    count [1] 1;
  }
</script>

<button on:click=[2]>Add 1</button>
<p>Count: {count}</p>

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

A+=

B-=

Cincrement

Ddecrement

Attempts:

3 left

💡 Hint

Common Mistakes

Using -= which subtracts instead of adds.

Using wrong function name or missing the event handler.

The operator += adds 1 to count. The button's click event calls the increment function.

5fill in blank

hard

Fill all three blanks to create a reactive statement that doubles the count and displays it.

Svelte

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

<button on:click=[3]>() => count += 1</button>
<p>Double: {double}</p>

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

Adouble

Bcount

C() => count += 1

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the reactive $: syntax.

Using wrong variable names or missing the arrow function syntax.

The reactive statement uses $: double = count * 2; to update double when count changes. The button increments count with an inline arrow function.