Inline event handlers in Svelte - Mini Project: Build & Apply

Inline event handlers in Svelte

📖 Scenario: You are building a simple interactive webpage where users can click a button to increase a counter. This is a common feature on many websites to show likes, votes, or clicks.

🎯 Goal: Create a Svelte component that shows a number starting at zero and a button. When the button is clicked, the number increases by one using an inline event handler.

📋 What You'll Learn

Create a variable called count initialized to 0.

Add a button element with an inline on:click event handler.

The inline event handler should increase count by 1 when clicked.

Display the current value of count in the component.

💡 Why This Matters

🌍 Real World

Inline event handlers are used in many interactive web apps to respond immediately to user actions like clicks, taps, or key presses.

💼 Career

Understanding inline event handlers in Svelte is essential for building responsive user interfaces in modern web development jobs.

1

Set up the count variable

Create a variable called count and set it to 0 inside the <script> tag.

Svelte

  // Your code here

Need a hint?

Use let count = 0; inside the <script> tag to create a reactive variable.

2

Add a button with an inline click event

Add a <button> element below the <script> tag with an inline on:click event handler that increases count by 1 using count += 1.

Svelte

  let count = 0;

Need a hint?

Use <button on:click={count += 1}>Click me</button> to add the inline event handler.

3

Display the current count

Below the button, add a paragraph <p> that shows the current value of count using curly braces {count}.

Svelte

  let count = 0;


Click me

Need a hint?

Use <p>Count: {count}</p> to show the current count.

4

Make the button accessible with aria-label

Add an aria-label attribute to the <button> with the value Increase count to improve accessibility.

Svelte

  let count = 0;


 >Click me

Count: {count}

Need a hint?

Add aria-label=\"Increase count\" inside the <button> tag.