Reactive declarations (let) in Svelte - Mini Project: Build & Apply

Simple Counter with Reactive Declarations in Svelte

📖 Scenario: You are building a simple counter app in Svelte. The app shows a number that can be increased by clicking a button. You want to display the double of the current count reactively, so it updates automatically when the count changes.

🎯 Goal: Create a Svelte component that has a count variable, a reactive declaration for double the count, and a button to increase the count. The double value should update automatically when the count changes.

📋 What You'll Learn

Create a let variable called count initialized to 0.

Add a reactive declaration $: double = count * 2 to calculate double the count.

Add a button that increases count by 1 when clicked.

Display both count and double values in the component.

💡 Why This Matters

🌍 Real World

Reactive declarations help build interactive user interfaces that update automatically when data changes, like counters, live search, or dynamic forms.

💼 Career

Understanding reactive declarations is essential for Svelte developers to write clean, efficient, and responsive UI code.

1

Set up the count variable

Create a let variable called count and set it to 0.

Svelte

// Your code here

Need a hint?

Use let count = 0; to create a variable that can change.

2

Add a reactive declaration for double

Add a reactive declaration $: double = count * 2 below the count variable.

Svelte

let count = 0;
// Your code here

Need a hint?

Use $: double = count * 2; to make double update automatically when count changes.

3

Add a button to increase count

Add a <button> element with an on:click event that increases count by 1 using count += 1.

Svelte

let count = 0;
$: double = count * 2;

Need a hint?

Use <button on:click={() => count += 1}>Increase Count</button> to add the button.

4

Display count and double values

Add two <p> elements to display the current count and the reactive double values using curly braces {count} and {double}.

Svelte

let count = 0;
$: double = count * 2;

 count += 1}>Increase Count

Need a hint?

Use <p>Count: {count}</p> and <p>Double: {double}</p> to show the values.