Why components are the building blocks in Svelte - Test Your Understanding

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'

Atitle

Bname

Cgreeting

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not declared in the script.

Forgetting to use curly braces to insert variables in the markup.

The variable name holds the greeting name, so we use it inside the curly braces to display the message.

2fill in blank

medium

Complete the code to bind the input value to the name variable in a Svelte component.

Svelte

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

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

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

Abind:value

Bvalue

Cbind:name

Dbind

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value attribute which does not update the variable.

Using incorrect binding syntax like bind:name.

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 Svelte component to correctly import and use a child component named Button.

Svelte

<script>
  import [1] from './Button.svelte';
</script>

<[1] />

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

AButton

Bbutton

CbuttonComponent

DBtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components.

Mismatch between import name and usage tag.

Component names in Svelte must start with a capital letter and match the import name exactly.

4fill in blank

hard

Fill both blanks to create a Svelte component that passes a label prop to a child Button component.

Svelte

<script>
  import Button from './Button.svelte';
  let buttonLabel = "Click me";
</script>

<Button [1]=[2] />

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

Alabel

BbuttonLabel

Ctext

DlabelText

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names that the child component does not expect.

Passing string literals instead of variables.

The Button component expects a prop named label. We pass the variable buttonLabel to it.

5fill in blank

hard

Fill all three blanks to create a Svelte component that conditionally shows a message when showMessage is true and uses a slot for content.

Svelte

<script>
  let showMessage = true;
</script>

{#if [1]
  <div aria-live="polite">[2]</div>
{/if}

<slot>[3]</slot>

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

AshowMessage

B"Hello from Svelte!"

C"Default slot content"

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names in the condition.

Forgetting quotes around string content.

Not using slot correctly.

The {#if} block checks showMessage. The message is shown inside the div. The slot shows default content if no content is passed.