Why events drive user interaction in Svelte - See It in Action

Why events drive user interaction

📖 Scenario: You are building a simple web page where users can click a button to increase a counter. This helps understand how events make web pages interactive.

🎯 Goal: Create a Svelte component that shows a number and a button. When the button is clicked, the number increases by one.

📋 What You'll Learn

Create a variable to hold the count starting at 0

Create a button element in the HTML

Add an event handler to the button to increase the count when clicked

Display the current count in the component

💡 Why This Matters

🌍 Real World

Interactive buttons and counters are common in web apps for likes, votes, or tracking actions.

💼 Career

Understanding event handling in frameworks like Svelte is essential for building responsive user interfaces.

1

Set up the count variable

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

Svelte

  // Create a variable called count and set it to 0
  // Your code here

Need a hint?

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

2

Add a button to the HTML

Add a <button> element below the <script> tag with the text Click me.

Svelte

  let count = 0;



Click me

Need a hint?

Write <button>Click me</button> in the HTML part of the component.

3

Add a click event handler to the button

Add a click event handler to the <button> using on:click that increases count by 1.

Svelte

  let count = 0;



 count += 1}>Click me

Need a hint?

Use on:click={() => count += 1} inside the <button> tag.

4

Display the current count

Add a <p> element below the button that shows the text Count: followed by the value of count using curly braces.

Svelte

  let count = 0;


 count += 1}>Click me


Count: {count}

Need a hint?

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