Text interpolation with {} in Svelte - Mini Project: Build & Apply

Text interpolation with {} in Svelte

📖 Scenario: You are building a simple Svelte component that shows a greeting message with a user's name.

🎯 Goal: Create a Svelte component that uses text interpolation with {} to display a greeting message including a user's name.

📋 What You'll Learn

Create a variable called name with the exact value 'Alice'.

Create a variable called greeting with the exact value 'Hello'.

Use text interpolation with {} inside the <p> tag to show the full greeting message combining greeting and name.

Ensure the Svelte component renders the greeting message correctly.

💡 Why This Matters

🌍 Real World

Text interpolation is used in web apps to show dynamic data like user names, dates, or messages inside the page content.

💼 Career

Knowing how to use text interpolation in Svelte is essential for frontend developers building interactive user interfaces.

1

Create the name variable

Create a variable called name and set it to the string 'Alice' inside the <script> tag.

Svelte

  // Create a variable called name and set it to 'Alice'
  

Need a hint?

Use let name = 'Alice'; inside the <script> tag.

2

Create the greeting variable

Add a variable called greeting and set it to the string 'Hello' inside the existing <script> tag.

Svelte

  let name = 'Alice';
  // Create a variable called greeting and set it to 'Hello'

Need a hint?

Add let greeting = 'Hello'; inside the <script> tag below name.

3

Use text interpolation to show the greeting message

Inside the <p> tag, use text interpolation with {} to display the combined message: greeting followed by a space and then name.

Svelte

  let name = 'Alice';
  let greeting = 'Hello';



  

Need a hint?

Write {greeting} {name} inside the <p> tag to combine the two variables.

4

Complete the Svelte component

Ensure the Svelte component includes the <script> tag with both variables and the <p> tag with the interpolated greeting message exactly as shown.

Svelte

  let name = 'Alice';
  let greeting = 'Hello';


{greeting} {name}

Need a hint?

Check that your component has the variables and the <p> tag with interpolation exactly as required.