Svelte Reactivity

What you'll learn

• How to create reactive variables in Svelte
• Using reactive declarations with $: syntax
• Implementing reactive statements for automatic updates
• Building interactive counters and calculators
• Setting limits and validation with reactive logic

In this activity, you will learn about Svelte's reactivity system using reactive declarations and reactive statements. You'll practice creating counters, automatic calculations, and implementing limits with alerts using Svelte's reactive features.

Before You Begin:

1. Go to Svelte REPL
2. Remove all existing code before starting the exercises
3. Remember to save your exercise before closing or refreshing the tab

:bulb: Tip :bulb: The Svelte REPL automatically saves your work, but it's good practice to manually save before closing the browser tab!

Steps to Create Your Svelte Reactivity Projects

:computer: Exercise One: Increment and Decrement Button

Time: 10 minutes

Svelte REPL - Remove all the codes before doing exercise

Let's create a simple increment and decrement button that will increase and decrease the number value.

Instructions:

1. Create a variable called number and set its value to 0
2. Display the number inside a <p> tag
3. Create a Decrease button using <button> tag
4. Create a function called decrease() that subtracts 1 from number
5. Add the on:click event to call the decrease function
6. Create an Increase button and function following the same pattern

:bulb: Tip :wrench: Svelte automatically updates the DOM when variables change - no need to manually refresh!

<script>
    let number = 0;
    
    function decrease() \{
        number = number - 1;
    \}
    
    function increase() \{
        number = number + 1;
    \}
</script>

<p>\{number\}</p>
<button on:click=\{decrease\}>Decrease</button>
<button on:click=\{increase\}>Increase</button>

If you done it correctly, the output should look like this:

:computer: Exercise 2: Multiplication with Limits

Time: 15 minutes

Continue with Exercise 1 - Let's make a multiplication of 6 that updates automatically when the number changes.

Instructions:

1. Create a reactive declaration for a multiply variable
2. Set the value of multiply to be number * 6
3. Display the multiplication equation in a <p> tag
4. Add reactive statements to prevent going below 0 and above 12

:bulb: Tip :dart: Use $: for reactive declarations and statements in Svelte. This tells Svelte to re-run the code whenever its dependencies change!

<script>
    let number = 0;
    
    // Reactive declaration
    $: multiply = number * 6;
    
    // Reactive statements for limits
    $: if (number < 0) \{
        alert("Cannot go below zero");
        number = 0;
    \}
    
    $: if (number > 12) \{
        alert("Cannot go above 12, resetting to 0");
        number = 0;
    \}
    
    function decrease() \{
        number = number - 1;
    \}
    
    function increase() \{
        number = number + 1;
    \}
</script>

<p>\{number\} x 6 = \{multiply\}</p>
<button on:click=\{decrease\}>Decrease</button>
<button on:click=\{increase\}>Increase</button>

If you've done it correctly, it should look like this:

:computer: Exercise 3: Advanced - Two Number Calculator

Time: 20 minutes

Continue with Exercise 2 - Let's make it so the user can multiply two different numbers instead of one.

Instructions:

1. Declare a new variable called number2
2. Change the multiply reactive variable to use number * number2
3. Add increment and decrement buttons for the second number
4. Update the alert conditions to use || (or) operator for both numbers

:bulb: Tip :bulb: Use HTML entities for button symbols:

• < for < (Decrement)
• > for > (Increment)

<script>
    let number = 0;
    let number2 = 0;
    
    // Reactive declaration for multiplication
    $: multiply = number * number2;
    
    // Reactive statements for limits on both numbers
    $: if (number < 0 || number2 < 0) \{
        alert("Cannot go below zero");
        if (number < 0) number = 0;
        if (number2 < 0) number2 = 0;
    \}
    
    $: if (number > 12 || number2 > 12) \{
        alert("Cannot go above 12, resetting to 0");
        if (number > 12) number = 0;
        if (number2 > 12) number2 = 0;
    \}
    
    function decrease1() \{
        number = number - 1;
    \}
    
    function increase1() \{
        number = number + 1;
    \}
    
    function decrease2() \{
        number2 = number2 - 1;
    \}
    
    function increase2() \{
        number2 = number2 + 1;
    \}
</script>

<p>\{number\} x \{number2\} = \{multiply\}</p>

<div>
    Number 1: 
    <button on:click=\{decrease1\}><</button>
    \{number\}
    <button on:click=\{increase1\}>></button>
</div>

<div>
    Number 2: 
    <button on:click=\{decrease2\}><</button>
    \{number2\}
    <button on:click=\{increase2\}>></button>
</div>

The output should look like this:

Required Elements

Make sure your Svelte Reactivity projects include:

• Exercise 1: Basic counter with increment/decrement functionality
• Exercise 2: Reactive multiplication calculation with limit alerts
• Exercise 3: Two-number calculator with reactive updates and limit checking
• All reactive declarations should use $: syntax
• Automatic DOM updates when variables change
• Proper limit checking with alert notifications
• Clean button interfaces with increment/decrement symbols

:hammer_and_wrench: Troubleshooting

Common Issues:

1. Reactivity not working?

   • Make sure you're using $: before reactive declarations
   • Check that variable names match exactly

2. Alerts showing multiple times?

   • Ensure your conditional logic is correct
   • Reset values properly after alerts

3. Buttons not responding?

   • Verify on:click syntax is correct
   • Check function names match exactly

:bulb: Tip :mag: Use the browser console to debug any JavaScript errors in your Svelte code!

Project Submission

:warning: Warning :alarm_clock: Total Activity Time: 45 minutes

• Exercise One: 10 minutes
• Exercise 2: 15 minutes
• Exercise 3: 20 minutes

When you have completed your "Svelte Reactivity" projects, submit them using the link below:

:information_source: Info :emoji: Submit Your Projects Here

Make sure to test all reactive features and limit checking before submitting!

Code Review: YouTube Tutorial