Practice and reinforce the concepts from Lesson 7
{#if}
, {:else}
, {:else if}
) in Svelte{#each}
loopsTotal Activity Time: 90 minutes
:bulb: Tip Save your work frequently by copying your code to a text editor - the Svelte REPL doesn't auto-save!
Time: 15 minutes | Difficulty: Easy
Objective: Make the output display "Surprise! :emoji:" when the boxOpen
prop is called in the App.svelte file.
Steps:
Box.svelte
by clicking the + buttonBox.svelte
, export a boxOpen
prop\{#if\}
and \{:else\}
statements to show different messagesApp.svelte
, import the Box componentboxOpen=\{true\}
to see the surprise message:bulb: 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:
Time: 15 minutes | Difficulty: Easy
Objective: Make the output display "Clicked" when the "Click Me" button is clicked.
Steps:
btn
with initial value \{clicked: false\}
click()
function that toggles the clicked state\{#if\}
statement to show different button text based on stateon:click
:bulb: 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:
Time: 20 minutes | Difficulty: Medium
Objective: Make the output display colors accordingly when the color name is typed in the text input.
Steps:
Color.svelte
with an exported color
propbind:value=\{color\}
in Color.svelte\{#if\}
, \{:else if\}
, \{:else\}
):bulb: 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:
Time: 20 minutes | Difficulty: Medium
Objective: Make the output display student names, heights, and weights using loop and array.
Steps:
students
with at least 5 student objectsname
, height
, and weight
properties\{#each students as student\}
to loop through the array:bulb: Tip The
\{#each\}
loop syntax is:\{#each arrayName as itemName\}...content...\{/each\}
. You can access properties using dot notation like\{student.name\}
.
\{#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>
Time: 20 minutes | Difficulty: Hard
Objective: Create a BMI calculator that calculates BMI and displays weight status based on BMI ranges.
BMI Range Table:
BMI Range | Weight Status |
---|---|
Below 18.6 | Underweight |
18.6 - 24.9 | Normal |
24.9 and above | Overweight |
Steps:
Details.svelte
component with three input fields:
bind:
to connect inputs between parent and child componentscalculateBMI()
function that:
:bulb: Tip Common Challenges
(height * height) / 10000
.toFixed(2)
to round BMI to 2 decimal placesDetails.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:
Make sure your Svelte Logic projects include:
{#if\}
and \{:else\}
statements :emoji:\{:else if\}
statements :emoji:{#each\}
loops with object properties :emoji:\{#if condition\}...\{:else\}...\{/if\}
\{#each array as item\}...\{/each\}
\{:else if condition\}
between \{#if\}
and \{:else\}
!variable
to flip true/false valuesexport let
in child and bind:
in parent"Cannot read property of undefined"
Two-way binding not working
bind:
not just passing propsConditional logic not updating
obj = {...obj, property: newValue}
:warning: Important Submission Instructions
- Complete ALL 5 activities before submitting
- 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
- Copy your final code to a safe place - REPL doesn't save automatically!
:information_source: Need Help? Watch the code review video for solutions and explanations: Code Review: YouTube Tutorial