Svelte Logic

What you'll learn

• How to use conditional statements ({#if}, {:else}, {:else if}) in Svelte
• How to iterate through arrays using {#each} loops
• How to create dynamic, interactive components
• How to bind data between parent and child components
• How to implement form validation and calculations

Total Activity Time: 90 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

💡 Tip Save your work frequently by copying your code to a text editor - the Svelte REPL doesn't auto-save!

Steps to Create Your Svelte Logic Projects

💻 Activity One: Conditional Display with Props

Time: 15 minutes | Difficulty: Easy

Objective: Make the output display "Surprise! 🥳" when the boxOpen prop is called in the App.svelte file.

Steps:

1. Open Svelte REPL and clear all existing code
2. Create a new file named Box.svelte by clicking the + button
3. In Box.svelte, export a boxOpen prop
4. Use \{#if\} and \{:else\} statements to show different messages
5. In App.svelte, import the Box component
6. Pass boxOpen=\{true\} to see the surprise message

💡 Tip Remember that in Svelte, props are exported using export let propName; in the child component.

Box.svelte:

<script>
    export let boxOpen;
</script>

{#if boxOpen}
    <p>Surprise! 🥳</p>
{:else}
    <p>Please open the box 🎁</p>
{/if}

App.svelte:

<script>
    import Box from './Box.svelte';
</script>

<Box boxOpen={true} />

Before:

After:

💻 Activity 2: Button Click Toggle

Time: 15 minutes | Difficulty: Easy

Objective: Make the output display "Clicked" when the "Click Me" button is clicked.

Steps:

1. Open a fresh Svelte REPL
2. Create a variable btn with initial value \{clicked: false\}
3. Write a click() function that toggles the clicked state
4. Use \{#if\} statement to show different button text based on state
5. Bind the click event to your button using on:click

💡 Tip To toggle a boolean value, use the NOT operator: !btn.clicked will flip between true and false.

App.svelte:

<script>
    let btn = {clicked: false};
    
    function click() {
        btn.clicked = !btn.clicked;
    }
</script>

{#if btn.clicked}
    <button on:click={click}>
        Clicked
    </button>
{:else}
    <button on:click={click}>
        Click Me
    </button>
{/if}

Before:

After:

💻 Activity 3: Color Display System

Time: 20 minutes | Difficulty: Medium

Objective: Make the output display colors accordingly when the color name is typed in the text input.

Steps:

1. Start with a new Svelte REPL
2. Create a new file named Color.svelte with an exported color prop
3. Add a text input field with bind:value=\{color\} in Color.svelte
4. In App.svelte, use multiple conditions (\{#if\}, \{:else if\}, \{:else\})
5. Test by typing "red", "blue", or "green" in the input field

💡 Tip Use bind: for two-way data binding between components. In the parent: <Color bind:color=\{color\} />

Color.svelte:

<script>
    export let color;
</script>

<h3>Choose a color (red/blue/green)</h3>
<input type="text" placeholder="red/blue/green" bind:value={color}>

App.svelte:

<script>
    import Color from './Color.svelte';
    let color = "";
</script>

<Color bind:color={color} />

{#if color === 'green'}
    <p>Green 🟩</p>
{:else if color === 'blue'}
    <p>Blue 🟦</p>
{:else if color === 'red'}
    <p>Red 🟥</p>
{:else}
    <p>No color chosen yet</p>
{/if}

Before:

After:

💻 Activity 4: Student Data Table

Time: 20 minutes | Difficulty: Medium

Objective: Make the output display student names, heights, and weights using loop and array.

Steps:

1. Open a new Svelte REPL
2. Create an array called students with at least 5 student objects
3. Each object should have: name, height, and weight properties
4. Use \{#each students as student\} to loop through the array
5. Display the data in a formatted table
6. Add Bootstrap CSS for styling (copy the style tag provided)

💡 Tip The \{#each\} loop syntax is: \{#each arrayName as itemName\}...content...\{/each\}. You can access properties using dot notation like \{student.name\}.

• [Hint: Use \{#each array as item\}...\{/each\} to loop through arrays)

App.svelte:

<script>
    let students = [ 
        {name:"Alice", height:165, weight:55},
        {name:"Bob", height:175, weight:70},
        {name:"Charlie", height:160, weight:60},
        {name:"Diana", height:170, weight:58},
        {name:"Eve", height:168, weight:65}
    ]
</script>

<h1 class="text-center">Telebort Prog E Monday 2PM</h1>
<h5>Teacher: </h5>
<p>Teacher John</p>
<h5>Students:</h5>

<table class="table table-bordered">
    <thead class="thead-dark">
        <tr>
            <th>Name</th>
            <th>Height (cm)</th>
            <th>Weight (kg)</th>
        </tr>
    </thead>
    
    {#each students as student}
        <tr>
            <td>{student.name}</td>
            <td>{student.height}</td>
            <td>{student.weight}</td>
        </tr>
    {/each}
</table>

<style>
    @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");
</style>

💻 Activity 5: Advanced - BMI Calculator

Time: 20 minutes | Difficulty: Hard

Objective: Create a BMI calculator that calculates BMI and displays weight status based on BMI ranges.

BMI Range Table:

Steps:

1. Create a new Svelte REPL project
2. Create a Details.svelte component with three input fields:
   • Name (text input)
   • Height in cm (number input)
   • Weight in kg (number input)
3. Use bind: to connect inputs between parent and child components
4. Create a calculateBMI() function that:
   • Validates all fields are filled
   • Calculates BMI using the formula
   • Determines weight status based on BMI value
5. Display results only after calculation

💡 Tip Common Challenges

• Remember to convert height to meters: (height * height) / 10000
• Use .toFixed(2) to round BMI to 2 decimal places
• Check for empty values before calculating to avoid errors

Details.svelte:

<script>
    export let name;
    export let height;
    export let weight;
</script>

<div>
    <label>Name:</label>
    <input type="text" bind:value={name}>
    
    <label>Height (cm):</label>
    <input type="number" bind:value={height}>
    
    <label>Weight (kg):</label>
    <input type="number" bind:value={weight}>
</div>

App.svelte:

<script>
    import Details from './Details.svelte';
    
    let name = '';
    let height = 0;
    let weight = 0;
    let showResult = false;
    let bmi = 0;
    let status = '';
    
    function calculateBMI() {
        if (!name || !height || !weight) {
            alert('Please fill in all details');
            return;
        }
        
        bmi = (weight / ((height * height) / 10000)).toFixed(2);
        
        if (bmi < 18.6) {
            status = 'Underweight';
        } else if (bmi < 24.9) {
            status = 'Normal';
        } else {
            status = 'Overweight';
        }
        
        alert(`Your BMI is ${bmi}`);
        showResult = true;
    }
</script>

<Details bind:name={name} bind:height={height} bind:weight={weight} />

<button on:click={calculateBMI}>Calculate BMI</button>

{#if showResult}
    <div>
        <h3>Results for {name}:</h3>
        <p>BMI: {bmi}</p>
        <p>Status: {status}</p>
    </div>
{/if}

Before the details are entered:

If the details are not filled yet but the Calculate BMI button is clicked:

When the Calculate BMI button is clicked after the details are entered:

After the alert of the BMI value comes out:

Required Elements

Make sure your Svelte Logic projects include:

• Activity 1: Conditional rendering using {#if} and {:else} statements ✓
• Activity 2: Toggle functionality with boolean state management ✓
• Activity 3: Multiple conditional branches using {:else if} statements ✓
• Activity 4: Array iteration using {#each} loops with object properties ✓
• Activity 5: Complex conditional logic with form validation and calculations ✓
• All logic blocks must use proper Svelte syntax
• Data binding between components must work correctly
• Interactive elements must respond to user input appropriately

💡 General Tips

• Conditional Rendering: Use {#if condition}...{:else}...{/if}
• Loops: Use {#each array as item}...{/each}
• Multiple Conditions: Use {:else if condition} between {#if} and {:else}
• Toggle Boolean: Use !variable to flip true/false values
• Input Validation: Always check for empty or invalid values before calculations
• Component Communication: Use export let in child and bind: in parent

⚠️ Troubleshooting Common Issues

1. "Cannot read property of undefined"

   • Make sure your variables are initialized before use
   • Check that array items exist before accessing properties

2. Two-way binding not working

   • Ensure you're using bind: not just passing props
   • Export the variable in the child component

3. Conditional logic not updating

   • Svelte is reactive - make sure you're reassigning variables, not just mutating them
   • For objects, use obj = {...obj, property: newValue}

📤 Project Submission

⚠️ Important Submission Instructions

1. Complete ALL 5 activities before submitting
2. Test each activity thoroughly:
   • Activity One: Both true and false states work
   • Activity 2: Button toggles correctly
   • Activity 3: All three colors display properly
   • Activity 4: Table shows all student data
   • Activity 5: BMI calculates and shows correct status
3. Copy your final code to a safe place - REPL doesn't save automatically!

Submit Your Projects Here

ℹ️ Need Help? Watch the code review video for solutions and explanations: Code Review: