Activity 05: Svelte Reactivity - Discovery Challenge

W3 Server-Side Development & Authentication - Lesson 5

🎯 Learning Objectives

By completing this activity, you will:

• Understand Svelte's automatic reactivity system
• Create reactive variables that update the DOM automatically
• Use reactive declarations with $: syntax
• Implement reactive statements for validation and limits
• Build interactive counters and calculators
• Set limits and validation with reactive logic

Total Activity Time: 45 minutes

🚀 Getting Started (See Results in 30 Seconds!)

IMPORTANT: This template includes a WORKING foundation with 65% pre-built!

Option One: Use Svelte REPL (Recommended for Quick Start)

1. Go to Svelte REPL
2. Copy the code from App.svelte in this folder
3. Paste into the REPL and see it working immediately!
4. Complete the TODOs marked in the code

Option 2: Run Locally

1. Open this folder in your code editor
2. Import into Svelte REPL or run locally with:
   bash

   # No installation needed - just copy to Svelte REPL!
   

🎯 What's Already Working (65% Complete)

65% of the code is implemented for you:

• ✅ Exercise 1 - Counter: Basic increment/decrement buttons fully working
• ✅ Exercise 2 - Structure: HTML layout and buttons ready
• ✅ Exercise 2 - Functions: Increase/decrease functions working
• ⚠️ Exercise 2 - TODO #1: Create reactive declaration for multiplication (10%)
• ⚠️ Exercise 2 - TODO #2: Add reactive statement for lower limit (0) (10%)
• ⚠️ Exercise 2 - TODO #3: Add reactive statement for upper limit (12) (10%)
• ⚠️ Exercise 3 - TODO #4: Add second number variable and functions (5%)

📋 Tasks to Complete

TODO #1: Create Reactive Multiplication (Easy)

File: App.svelte - Line 11 Time: 5 minutes

Add a reactive declaration that multiplies number by 6 automatically.

Success Criteria:

• Use $: syntax for reactive declaration
• Create variable named multiply
• Set value to number * 6
• Value updates automatically when number changes

Hint: Reactive declarations start with $: and run whenever their dependencies change.

Example Pattern:

$: variableName = calculation;

TODO #2: Add Lower Limit Validation (Medium)

File: App.svelte - Line 14 Time: 5 minutes

Add a reactive statement that prevents number from going below 0.

Success Criteria:

• Use $: syntax for reactive statement
• Check if number < 0
• Show alert "Cannot go below zero"
• Reset number to 0

Hint: Reactive statements can contain if conditions and will run automatically when dependencies change.

Example Pattern:

$: if (condition) {
    alert("message");
    variable = resetValue;
}

TODO #3: Add Upper Limit Validation (Medium)

File: App.svelte - Line 23 Time: 5 minutes

Add a reactive statement that prevents number from going above 12.

Success Criteria:

• Use $: syntax for reactive statement
• Check if number > 12
• Show alert "Cannot go above 12, resetting to 0"
• Reset number to 0

Hint: This follows the same pattern as TODO #2, just with different condition and message.

TODO #4: Add Two-Number Calculator (Hard)

File: App.svelte - Lines 32-62 Time: 15 minutes

Extend the calculator to multiply two different numbers.

Success Criteria:

• Declare number2 variable initialized to 0
• Update multiply to use number * number2
• Create decrease2() and increase2() functions
• Add buttons for second number in HTML
• Update limits to check both numbers with || operator
• Display format: {number} x {number2} = {multiply}

Hint: Follow the pattern of the existing number1 functions and buttons. Use HTML entities < and > for < and > symbols.

💡 What You'll Learn

By examining the working code and completing the TODOs, you'll understand:

Svelte Reactivity Basics

• Automatic Updates: Variables update the DOM without manual refresh
• Reactive Declarations: $: variable = expression creates auto-updating computed values
• Reactive Statements: $: if (condition) { ... } runs code when dependencies change
• Dependencies: Svelte automatically tracks what variables are used in reactive code

Real-World Applications

• Form Validation: Check inputs and show errors automatically
• Calculated Values: Update totals, percentages, or conversions in real-time
• UI State Management: Show/hide elements based on data changes
• Interactive Calculators: Build tools that respond instantly to user input

🧪 Testing Your Implementation

Test these scenarios:

1. Exercise 1 (Already Working):

   • Click Increase -> number should go up
   • Click Decrease -> number should go down

2. Exercise 2 (After TODO #1-3):

   • Number should multiply by 6 automatically
   • Try to go below 0 -> should show alert and reset
   • Try to go above 12 -> should show alert and reset to 0

3. Exercise 3 (After TODO #4):

   • Both numbers should have their own increase/decrease buttons
   • Multiplication should use both numbers
   • Limits should apply to both numbers independently
   • Either number going out of range should trigger appropriate alert

✅ Success Criteria

Your project is complete when:

Exercise 1 (Already Complete):

• ✅ Counter displays current number
• ✅ Decrease button subtracts 1
• ✅ Increase button adds 1

Exercise 2:

• multiply variable reactively calculates number * 6
• Multiplication displays in format: {number} x 6 = {multiply}
• Cannot go below 0 (shows alert and resets)
• Cannot go above 12 (shows alert and resets to 0)

Exercise 3:

• Two separate number controls (number1 and number2)
• Multiplication uses both numbers: number * number2
• Each number has its own increment/decrement buttons
• Limits apply to both numbers with proper alerts
• Display format: {number} x {number2} = {multiply}

📖 Key Concepts

Reactive Declarations ($:)

// Runs whenever 'number' changes
$: multiply = number * 6;

// You can also use complex expressions
$: total = number1 + number2 + number3;

Reactive Statements

// Runs whenever 'number' changes
$: if (number < 0) {
    alert("Too low!");
    number = 0;
}

Multiple Dependencies

// Runs when either number1 OR number2 changes
$: if (number1 > 10 || number2 > 10) {
    alert("One number is too high!");
}

🐛 Common Issues & Solutions

Issue: Multiplication not updating automatically Solution: Make sure you used $: before the declaration

Issue: Alert showing multiple times Solution: Check your condition logic - it may be triggering on the reset itself

Issue: Buttons not working Solution: Verify on:click syntax is correct and function names match exactly

Issue: Limits not working for both numbers Solution: Use || (OR) operator to check both conditions, and use separate if statements for each number's reset

🚀 Extension Challenges (Optional)

Ready for more? Try these bonus features:

Beginner Extensions:

• Add a "Reset All" button that sets both numbers to 0
• Display the calculation history (last 5 calculations)
• Add subtraction, addition, or division operations

Advanced Extensions:

• Create a dropdown to select the operation (x, +, -, /)
• Add a range slider instead of buttons
• Implement keyboard input for numbers
• Add animation when limits are reached

Creative Extensions:

• Create a multiplication table (1-12) that highlights based on current numbers
• Add sound effects for button clicks and limit alerts
• Create a "math quiz" mode that asks questions
• Build a visual number line showing the current value

🔗 Resources

• Svelte Reactivity Tutorial: https://svelte.dev/tutorial/reactive-declarations
• Reactive Statements: https://svelte.dev/tutorial/reactive-statements
• Svelte REPL: https://svelte.dev/repl

🔗 Related Course Materials

• Concept 05: Svelte Reactivity
• Activity Specification: ../../Activities/Activity 05- Svelte Reactivity.mdx
• Lesson: 5

Remember: Reactivity is one of Svelte's superpowers! Unlike other frameworks where you manually update the DOM, Svelte automatically keeps your UI in sync with your data. Master this concept, and you'll write cleaner, more intuitive code.

💡 Pro Tip: When debugging reactive code, use console.log() inside reactive statements to see when they run. This helps you understand the dependency tracking!