Svelte Data Binding

What you'll learn

In this hands-on activity, you'll master:

• :emoji: Two-way data binding with the bind: directive
• :zap: Real-time updates with text and number inputs
• :emoji: Binding radio buttons for group selections
• :white_check_mark: Creating reactive validation systems
• :emoji: Component communication with bound props

Total Time: 60-75 minutes

Before You Begin:

1. Go to Svelte REPL
2. Remove all existing code before starting the exercises
3. Click the + symbol button to add new files when needed

:bulb: Tip Save your work frequently! The Svelte REPL can lose changes if you refresh the page accidentally.

Steps to Create Your Svelte Data Binding Projects

:computer: Activity One: Name Display with Text Input

Time: 10-15 minutes

Create a real-time name display that updates as you type and shows a welcome message.

Steps:

1. Open Svelte REPL and clear all existing code
2. Create a variable called name in the script tag (don't assign any value)
3. Create an <input> tag with type="text" and bind it to the name variable
4. Create a button with "OK" text and add a click event
5. Create a popUp() function that alerts "Welcome " + name
6. Display the name in an <h1> tag

:bulb: Tip Use bind:value={variableName} for two-way data binding. This creates a live connection between the input and your variable!

<script>
    let name;
    
    function popUp() \{
        alert('Welcome ' + name);
    \}
</script>

<input type="text" bind:value=\{name\}>
<button on:click=\{popUp\}>OK</button>
<h1>My name is \{name\}!</h1>

:computer: Activity 2: Division Calculator with Range Validation

Time: 15-20 minutes

Build a calculator that divides two numbers with automatic validation to ensure both numbers are between 0-20.

Steps:

1. Open a new Svelte REPL and clear all code
2. Create two variables number1 and number2, both assigned to 0
3. Create two reactive statements to validate the range (0-20)
4. Create two <p> tags with "First Number" and "Second Number" labels
5. Create two <input> tags with type="number" and bind them to the variables
6. Display the division result using the division symbol (/)

:bulb: Tip Use $: for reactive statements that run automatically when variables change. This is perfect for validation!

<script>
    let number1 = 0;
    let number2 = 0;
    
    $: if(number1 < 0 || number1 > 20) \{
        alert("Please enter a value between 0-20");
        number1 = 0;
    \}
    
    $: if(number2 < 0 || number2 > 20) \{
        alert("Please enter a value between 0-20");
        number2 = 0;
    \}
</script>

<p>First Number</p>
<input type="number" bind:value=\{number1\}>

<p>Second Number</p>
<input type="number" bind:value=\{number2\}>

<p>\{number1\} ÷ \{number2\} = \{number1 / number2\}</p>

When the number range is between 0-20:

When the number range is not in between 0-20:

:computer: Activity 3: Ice-cream Shop Order System

Time: 20-25 minutes

Create an interactive ordering system for an ice-cream shop where customers can enter their name and choose flavors.

Steps:

1. Open a new Svelte REPL and clear all code
2. Create a new component file called Order.svelte (click the + button)
3. In Order.svelte, export props cName and flavor (no initial values)
4. Create a text input bound to cName and radio buttons bound to flavor
5. In App.svelte, import the Order component and bind the props
6. Display the customer name and selected flavor

:bulb: Tip Use bind:group={variableName} for radio button binding. This automatically manages which option is selected!

Order.svelte:

<script>
    export let cName;
    export let flavor;
</script>

<h1>Welcome to Telebort Ice-cream Shop!</h1>

<p>Enter your name:</p>
<input type="text" bind:value=\{cName\}>

<p>Select the flavour that you want:</p>
<input type="radio" bind:group=\{flavor\} value="vanilla"> Vanilla <br />
<input type="radio" bind:group=\{flavor\} value="chocolate"> Chocolate <br />
<input type="radio" bind:group=\{flavor\} value="choco vanilla"> Choco Vanilla <br />

<p>Hi, \{cName\}. You wanted the \{flavor\} ice-cream.</p>

App.svelte:

<script>
    import Order from "./Order.svelte";
    
    let cName = "";
    let flavor = "";
</script>

<Order bind:cName=\{cName\} bind:flavor=\{flavor\} />

:art: Activity 4: Advanced - Enhanced Ice-cream Shop

Time: 15-20 minutes

Take your ice-cream shop to the next level with improved styling and user experience!

Enhancement Ideas:

1. Add CSS styling to make the interface more appealing
2. Include price calculations based on flavor selection
3. Add more flavor options
4. Create a order summary section
5. Add form validation (e.g., name required)

:bulb: Tip Use Svelte's style blocks to add CSS directly in your components. Remember, styles are scoped by default!

Required Elements

Make sure your Svelte Data Binding projects include:

:white_check_mark: Activity 1: Text input with two-way binding and real-time display updates :white_check_mark: Activity 2: Number inputs with reactive validation and range checking :white_check_mark: Activity 3: Component communication using bound props and radio button groups :white_check_mark: Activity 4: Enhanced styling and user experience improvements

All projects must demonstrate:

• Proper bind: directive syntax
• Reactive statements for validation
• Component props properly bound between parent and child

:bulb: Quick Reference

:bulb: Tip Remember: The division symbol can be typed as ÷ or use the HTML entity ÷

:wrench: Troubleshooting

Common Issues:

1. Binding not working?

   • Check that you're using curly braces: {variable} not variable
   • Ensure the variable is declared in the script section

2. Radio buttons not grouping?

   • All radio buttons in a group must use the same bind:group variable
   • Each radio button needs a unique value attribute

3. Validation not triggering?

   • Make sure you're using $: for reactive statements
   • Check that your conditions are properly formatted

4. Component props not updating?

   • Use bind: when passing props from parent to child
   • Ensure props are exported in the child component

:emoji: Project Submission

:warning: Warning Important: Test all functionality before submitting!

• :emoji: All bindings work correctly
• :emoji: Validation triggers properly
• :emoji: Components communicate as expected

When you have completed all activities and tested your Svelte Data Binding projects:

Submit Your Projects Here

:information_source: Info :bulb: Submission Tip: Keep your REPL tabs open until you receive confirmation that your submission was received.