Activity 06: Svelte Data Binding - Discovery Challenge

W3 Server-Side Development & Authentication - Lesson 6

🎯 Learning Objectives

By completing this activity, you will:

• Master two-way data binding with the bind: directive
• Understand real-time updates with text and number inputs
• Bind radio buttons for group selections
• Create reactive validation systems
• Implement component communication with bound props
• Build interactive forms with instant feedback

Total Activity Time: 60-75 minutes

🚀 Getting Started (See Results in 30 Seconds!)

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

Option One: Use Svelte REPL (Recommended)

1. Go to Svelte REPL
2. Copy the code from App.svelte in this folder
3. For Activity 3 & 4: Click the + button to create Order.svelte and copy that code too
4. See it working immediately!
5. Complete the TODOs marked in the code

🎯 What's Already Working (70% Complete)

70% of the code is implemented for you:

• ✅ Activity 1 - Structure: Text input, button, and h1 display ready
• ✅ Activity 1 - Alert Function: popUp() function fully working
• ⚠️ Activity 1 - TODO #1: Add bind:value to connect input to variable (5%)
• ✅ Activity 2 - Structure: Two number inputs and display ready
• ✅ Activity 2 - Variables: number1 and number2 initialized
• ⚠️ Activity 2 - TODO #2: Add reactive validation statements (10%)
• ✅ Activity 3 - Component Structure: Order.svelte component created
• ✅ Activity 3 - Radio Buttons: Three flavor options ready
• ⚠️ Activity 3 - TODO #3: Add component binding in App.svelte (5%)
• ✅ Activity 4 - Base: All Activity 3 code ready for enhancement
• ⚠️ Activity 4 - TODO #4: Add custom styling and improvements (10%)

📋 Tasks to Complete

TODO #1: Add Text Input Binding (Easy)

Files: App.svelte - Lines 8 and 15 Time: 5 minutes

Connect the input field to the name variable using two-way data binding.

Success Criteria:

• Add bind:value={name} to the input element
• Display updates in real-time as you type
• Alert shows the entered name when clicking OK
• h1 displays: "My name is name!"

Hint: The bind: directive creates a two-way connection. When the input changes, the variable updates. When the variable changes, the input updates.

Example Pattern:

<input type="text" bind:value={variableName}>

TODO #2: Add Number Input Validation (Medium)

File: App.svelte - Lines 26-36 Time: 10 minutes

Add reactive validation to ensure both numbers stay within 0-20 range.

Success Criteria:

• Use $: for reactive statements
• Check if number1 < 0 || number1 > 20
• Show alert "Please enter a value between 0-20"
• Reset number to 0 when out of range
• Repeat for number2 with same validation
• Division calculates and displays correctly

Hint: Create two separate reactive statements, one for each number. Each should follow the same pattern.

Example Pattern:

$: if (variable < min || variable > max) {
    alert("message");
    variable = resetValue;
}

TODO #3: Add Component Prop Binding (Medium)

Files: App.svelte and Order.svelte Time: 15 minutes

Implement two-way binding between parent (App) and child (Order) components.

Success Criteria:

• In Order.svelte: Export cName and flavor props
• In Order.svelte: Bind text input to cName
• In Order.svelte: Bind radio group to flavor
• In App.svelte: Import Order component
• In App.svelte: Use bind:cName={cName} and bind:flavor={flavor}
• Display customer name and flavor choice

Hint: For radio buttons, use bind:group instead of bind:value. All radio buttons in the same group should bind to the same variable but have different value attributes.

Example Pattern:

<!-- Child component -->
<script>
    export let propName;
</script>
<input type="radio" bind:group={propName} value="option1">

<!-- Parent component -->
<script>
    import Child from './Child.svelte';
    let propName = "";
</script>
<Child bind:propName={propName} />

TODO #4: Enhance Ice Cream Shop (Hard - Optional)

Files: App.svelte and Order.svelte Time: 15-20 minutes

Take the ice cream shop to the next level with styling and features.

Success Criteria:

• Add CSS styling to make it visually appealing
• Add price calculation based on flavor
• Include more flavor options
• Create order summary section
• Add form validation (name required)

Enhancement Ideas:

• Use gradient backgrounds
• Add flavor icons or emojis
• Create price object: {vanilla: 3, chocolate: 4, ...}
• Show total with quantity selector
• Disable submit if name is empty

💡 What You'll Learn

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

Data Binding Fundamentals

• Two-Way Binding: bind:value creates live connection between UI and data
• Input Types: Text, number, radio - each has specific binding syntax
• Component Binding: Props can be bound between parent and child
• Reactive Validation: Combine $: with binding for instant validation

Component Communication

• Props Flow: How data moves between components
• Export/Import: Using export let to create bindable props
• Radio Groups: Managing single selection from multiple options
• Real-time Updates: Changes propagate instantly without manual sync

Real-World Patterns

• Form Validation: Check inputs as users type
• Live Calculations: Update totals automatically
• User Feedback: Show errors immediately
• Component Reusability: Create forms that work anywhere

🧪 Testing Your Implementation

Test these scenarios:

1. Activity 1 (After TODO #1):

   • Type your name -> h1 should update live
   • Click OK -> alert should show your name
   • Clear input -> display should clear too

2. Activity 2 (After TODO #2):

   • Enter valid numbers (0-20) -> division calculates
   • Try -5 -> should alert and reset to 0
   • Try 25 -> should alert and reset to 0
   • Enter 20 / 4 -> should show 5

3. Activity 3 (After TODO #3):

   • Type name -> should display in greeting
   • Select flavor -> should update in summary
   • Both should work together for complete order

4. Activity 4 (After TODO #4):

   • All Activity 3 features still work
   • Visual improvements are noticeable
   • New features function correctly
   • Form validation prevents invalid submissions

✅ Success Criteria

Your project is complete when:

Activity 1:

• Input field is bound to name variable
• Real-time display updates as you type
• Alert function works with entered name
• Display shows: "My name is name!"

Activity 2:

• Both inputs are bound to number variables
• Validation checks 0-20 range for both numbers
• Out-of-range values trigger alerts
• Division calculation displays correctly
• Format: {number1} ÷ {number2} = {result}

Activity 3:

• Order.svelte exports cName and flavor props
• Text input bound to cName
• Radio buttons bound to flavor using bind:group
• App.svelte imports and binds to Order component
• Customer name and flavor display in summary

Activity 4 (Optional):

• Enhanced CSS styling applied
• Additional features working (prices, validation, etc.)
• User experience improved
• All previous functionality still works

📖 Key Concepts Reference

Common Symbols

• Division: ÷ or HTML entity ÷
• Less than: < or <
• Greater than: > or >

🐛 Common Issues & Solutions

Issue: Binding not working, changes don't appear Solution: Check you're using curly braces {variable} not "variable" in strings

Issue: Radio buttons not grouping correctly Solution: All buttons in group must use same bind:group variable but different value attributes

Issue: Validation not triggering Solution: Make sure you're using $: for reactive statements, not regular if statements

Issue: Component props not updating Solution: Use bind: when passing props from parent, and export let in child component

Issue: Number input accepting any value Solution: Add reactive statement with proper range check and reset logic

🚀 Extension Challenges (Optional)

Ready for more? Try these bonus features:

Beginner Extensions:

• Add a "Clear Form" button
• Show character count for name input
• Add email input with validation pattern
• Display order confirmation message

Advanced Extensions:

• Create quantity selector for multiple items
• Add order history (array of past orders)
• Implement discount codes
• Save orders to localStorage

Creative Extensions:

• Add animated transitions
• Create themed styling (dark mode toggle)
• Multi-step order form with navigation
• Print receipt function

🔗 Resources

• Svelte Bindings Tutorial: https://svelte.dev/tutorial/text-inputs
• Component Bindings: https://svelte.dev/tutorial/component-bindings
• Radio Groups: https://svelte.dev/tutorial/group-inputs
• Svelte REPL: https://svelte.dev/playground

🔗 Related Course Materials

• Concept 06: Svelte Data Binding
• Activity Specification: ../../Activities/Activity 06- Svelte Data Binding.mdx
• Lesson: 6

Remember: Data binding is what makes modern web apps feel responsive and intuitive. With Svelte's bind: directive, you get two-way synchronization automatically - no boilerplate code needed!

💡 Pro Tip: When debugging bindings, add console.log(variable) inside reactive statements ($: console.log(name)) to see when values change. This helps you understand the data flow!