Compiler-based approach (no virtual DOM) in Svelte - Mini Project: Build & Apply

Build a Simple Counter with Svelte's Compiler-based Approach

📖 Scenario: You want to create a simple web counter that increases when you click a button. Using Svelte, which compiles your code into efficient JavaScript without using a virtual DOM, you will build this interactive counter step-by-step.

🎯 Goal: Build a Svelte component that shows a number starting at zero and a button. When you click the button, the number increases by one. This demonstrates how Svelte updates the page efficiently without a virtual DOM.

📋 What You'll Learn

Create a variable to hold the count starting at 0

Add a button element with a click event handler

Update the count variable when the button is clicked

Display the current count in the component

💡 Why This Matters

🌍 Real World

Svelte is used to build fast, interactive web apps that update the page efficiently without the overhead of a virtual DOM. This project shows how simple it is to create reactive UI with Svelte's compiler.

💼 Career

Understanding Svelte's compiler-based approach is valuable for frontend developers who want to build performant web apps with less code and better user experience.

1

Set up the count variable

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

Svelte

  // Your code here


Click me
Count: 0

Need a hint?

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

2

Add a click event to the button

Add a click event handler to the <button> element using on:click that calls a function to increase count by 1.

Svelte

  let count = 0;


Click me
Count: 0

Need a hint?

Use on:click={() => count += 1} on the button to increase the count when clicked.

3

Display the current count

Replace the static number 0 inside the <p> tag with the dynamic variable {count} to show the current count.

Svelte

  let count = 0;


 count += 1}>Click me
Count: {/* Your code here */}

Need a hint?

Use curly braces {count} inside the paragraph to show the variable's value.

4

Add accessibility and semantic HTML

Add an aria-label attribute to the <button> with the value Increment count for screen readers and ensure the HTML uses semantic tags.

Svelte

  let count = 0;


 count += 1} aria-label="">Click me
Count: {count}

Need a hint?

Add aria-label="Increment count" to the button for better accessibility.