Reactive statements ($:) in Svelte - Mini Project: Build & Apply

Using Reactive Statements ($:) in Svelte

📖 Scenario: You are building a simple Svelte component that calculates the total price of items in a shopping cart. The prices and quantities can change, and the total should update automatically.

🎯 Goal: Create a Svelte component that uses reactive statements ($:) to automatically update the total price when the quantity or price changes.

📋 What You'll Learn

Create variables for item price and quantity

Create a reactive statement using $: to calculate the total price

Display the price, quantity, and total price in the component

Update the total price automatically when price or quantity changes

💡 Why This Matters

🌍 Real World

Reactive statements are useful in real apps to keep UI and data in sync automatically, like updating totals, filtering lists, or calculating values.

💼 Career

Understanding reactive statements is key for Svelte developers to build efficient, responsive user interfaces that update smoothly without manual event handling.

1

Set up price and quantity variables

Create two variables in the <script> block: price set to 10 and quantity set to 2.

Svelte

// Create variables price and quantity
// Your code here


Price: {price}
Quantity: {quantity}
Total: 

Need a hint?

Use let to declare variables inside the <script> block.

2

Add a reactive statement for total price

Add a reactive statement using $: to create a variable total that calculates price * quantity.

Svelte

let price = 10;
let quantity = 2;

// Add reactive statement for total
// Your code here


Price: {price}
Quantity: {quantity}
Total: 

Need a hint?

Use $: total = price * quantity; to create a reactive statement that updates total automatically.

3

Display the total price in the component

Replace the comment inside the <p> tag for total with {total} to show the calculated total price.

Svelte

let price = 10;
let quantity = 2;

$: total = price * quantity;


Price: {price}
Quantity: {quantity}
Total: { /* show total here */ }

Need a hint?

Use curly braces {total} inside the HTML to display the reactive variable.

4

Make price and quantity editable with inputs

Add two <input> elements with type="number" and bind their values to price and quantity using bind:value. Place them above the paragraphs.

Svelte

let price = 10;
let quantity = 2;

$: total = price * quantity;





Price: {price}
Quantity: {quantity}
Total: {total}

Need a hint?

Use <input type="number" bind:value={price} /> and similarly for quantity to make them editable.