Activity 03: Svelte Props - Discovery Challenge

W3 Server-Side Development & Authentication - Lesson 3

🎯 Learning Objectives

By completing this activity, you will:

• Create and use props in Svelte components
• Pass data from parent to child components
• Use export let to define component props
• Work with object spread syntax for multiple props
• Create reusable components with dynamic data

🚀 Getting Started (See Results in 30 Seconds!)

IMPORTANT: This template provides a 70% pre-built foundation!

Option One: Svelte REPL (Recommended - Zero Setup!)

1. Open Svelte REPL: Go to https://svelte.dev/playground/hello-world?version=5.33.10
2. Remove existing code from the editor
3. Copy the starter code from the files below
4. Click the + button to create new component files
5. See it working immediately!

Option 2: Local Development

1. Open this folder in VS Code
2. No installation needed - This is a copy-paste template for Svelte REPL
3. Refer to the files below for code to copy into the REPL

🎯 What's Already Working (70% Complete)

Already implemented for you:

• ✅ Score Component: Complete with player and score props, styled cards
• ✅ App with 3 Players: Three Score components displaying different player data
• ✅ Multiply Component: Complete with num1 and num2 props and calculation
• ✅ Multiply App: Working calculator showing "3 x 8 = 24"
• ✅ Card Component Base: Student card with 4 exported props (school, name, studentID, year)
• ✅ Card Styling: Professional card layout with shadows and borders
• ⚠️ Student Data Object: TODO - Create studentData object in App
• ⚠️ Spread Syntax: TODO - Use {...studentData} to pass all props at once

📂 Files Structure

activity-03-svelte-props/
├── README.md                    # This file
├── 01-player-score/
│   ├── App.svelte              # 100% complete
│   └── Score.svelte            # 100% complete
├── 02-multiply-calculator/
│   ├── App.svelte              # 100% complete
│   └── Multiply.svelte         # 100% complete
└── 03-student-card/
    ├── App.svelte              # 40% complete - needs data object
    └── Card.svelte             # 100% complete

📋 Tasks to Complete

TODO 1: Create Student Data Object (Medium)

Create a JavaScript object with all student information properties.

File: 03-student-card/App.svelte

Success Criteria:

• Create studentData object variable using let
• Object has school property (e.g., "Telebort Academy")
• Object has name property (e.g., "John Doe")
• Object has studentID property (e.g., "TB2024001")
• Object has year property (e.g., "2024")
• Property names match exactly with Card component props

Code Location: App.svelte - Inside <script> tag after the import

Hint: Look at Activity 1's code for examples of passing props. Now instead of passing them one by one, you'll create an object with all the data.

Example Pattern:

let studentData = {
    school: "Your School Name",
    name: "Your Name",
    studentID: "Your ID",
    year: "Your Year"
};

TODO 2: Use Object Spread Syntax (Medium)

Pass all props to the Card component using the spread operator.

File: 03-student-card/App.svelte

Success Criteria:

• Replace individual props with {...studentData}
• Card component receives all 4 props automatically
• Student information displays correctly
• No console errors

Code Location: App.svelte - The <Card /> component line

Hint: Instead of writing <Card school={studentData.school} name={studentData.name} ...>, you can use <Card {...studentData} /> to pass all properties at once!

Before (Manual Props):

<Card school={data.school} name={data.name} studentID={data.studentID} year={data.year} />

After (Spread Syntax):

<Card {...studentData} />

💡 What You'll Learn

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

Props Fundamentals

• export let: How to define props in child components
• Passing Props: Using attributes like player="1" to send data
• Receiving Props: How child components access prop values
• Prop Types: Props can be strings, numbers, objects, or any JavaScript value

Object Spread Syntax

• Efficiency: Passing many props without typing each one
• Matching Names: Object properties must match component prop names
• Clean Code: {...obj} is cleaner than listing 10+ props manually
• Common Pattern: Used frequently in React, Svelte, and Vue

Component Reusability

• Same Component, Different Data: Score component used 3 times with different players
• Template Pattern: Card component can display any student's information
• DRY Principle: Don't Repeat Yourself - write component once, use many times

📝 Starter Code

Activity One: Player Score Tracker (100% Complete - No Changes Needed)

Score.svelte:

<script>
   export let player;
   export let score;
</script>

<div>
   <p>Player {player}</p>
   <p>Score: {score}</p>
</div>

<style>
div{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
    padding: 0.5rem;
    margin: 12px 40px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

p{
    margin: 0;
}
</style>

App.svelte:

<script>
    import Score from "./Score.svelte";
</script>

<Score player="1" score="100" />
<Score player="2" score="250" />
<Score player="3" score="180" />

Activity 2: Multiply Calculator (100% Complete - No Changes Needed)

Multiply.svelte:

<script>
   export let num1;
   export let num2;
   let answer = num1 * num2;
</script>

<p>{num1} x {num2} = {answer}</p>

App.svelte:

<script>
    import Multiply from "./Multiply.svelte";
</script>

<Multiply num1="3" num2="8" />

Activity 3: Student Card (40% Complete - Needs Your Work!)

Card.svelte (100% Complete):

<script>
   export let school;
   export let name;
   export let studentID;
   export let year;
</script>

<div class="card">
   <h1>{school}</h1>
   <p class="stu">Student</p>
   <h1>:)</h1>
   <p>{name}</p>
   <p>{studentID}</p>
   <p>INTAKE: {year}</p>
</div>

<style>
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
    padding: 2px 16px;
    margin: 12px 4px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
</style>

App.svelte (40% Complete - YOUR TURN!):

<script>
    import Card from "./Card.svelte";

    // TODO 1: Create studentData object here
    // let studentData = {
    //     school: "Telebort Academy",
    //     name: "John Doe",
    //     studentID: "TB2024001",
    //     year: "2024"
    // };
</script>

<!-- TODO 2: Replace this line with spread syntax -->
<Card school="" name="" studentID="" year="" />
<!-- Should become: <Card {...studentData} /> -->

✅ Success Criteria

Your activity is complete when:

• ✅ Activity 1 displays three player score cards (ALREADY WORKING)
• ✅ Activity 2 shows "3 x 8 = 24" multiplication (ALREADY WORKING)
• ✅ Card component has all 4 props exported (ALREADY WORKING)
• TODO: studentData object created with all 4 properties
• TODO: Card component uses {...studentData} spread syntax
• Student card displays school, name, ID, and year correctly
• No console errors in Svelte REPL
• All three activities working together

🧪 Testing Your Implementation

Test these scenarios in Svelte REPL:

1. Props Passing:

   • Change player scores in Activity 1 -> Should update cards
   • Change multiply numbers in Activity 2 -> Should recalculate
   • Change studentData values -> Should update card immediately

2. Object Spread:

   • Add/remove properties from studentData
   • See what happens if property names don't match props
   • Try passing additional properties (they'll be ignored)

3. Component Reusability:

   • Create a second studentData object
   • Add another <Card {...studentData2} />
   • Verify both cards display different data

4. Prop Types:

   • Try passing numbers instead of strings for score
   • Test what happens with missing props

🔗 How to Use This Template

Setting Up Activity 1 (Player Score):

1. Go to Svelte REPL
2. Copy App.svelte code into the main file
3. Create Score.svelte component
4. Test that all three player cards appear

Setting Up Activity 2 (Multiply Calculator):

1. Start fresh - Open new Svelte REPL
2. Copy Multiply.svelte and App.svelte code
3. Test calculation displays correctly

Setting Up Activity 3 (Student Card):

1. Start fresh - Open new Svelte REPL
2. Copy Card.svelte (fully working)
3. Copy App.svelte (has TODOs)
4. Complete TODO 1 - Create studentData object
5. Complete TODO 2 - Use spread syntax
6. Test that card displays your data

🛠️ Troubleshooting

Issue: "Cannot read property of undefined" Solution: Make sure object property names match component prop names exactly (case-sensitive!)

Issue: Props not updating Solution: Ensure you used export let propName in the child component

Issue: Spread syntax not working Solution:

• Check object is defined before the component
• Verify you're using {...objectName} not ...objectName
• Property names must match exported props

Issue: Student card is blank Solution: Check that all 4 properties exist in studentData object

Issue: Styling not appearing Solution: Make sure you copied the entire component including the <style> section

🚀 Extension Challenges

Ready for more? Try these bonus features:

Beginner Extensions

• More Players: Add 5 more players to Activity 1
• Different Calculations: Create Divide.svelte and Add.svelte components
• Multiple Students: Create 3+ student cards with different data

Intermediate Extensions

• Grade Component: Create a component that accepts subject and grade props
• Dynamic Player: Use a form to create new players dynamically
• Default Props: Add default values like export let name = "Unknown"

Advanced Extensions

• Props Validation: Check if props are valid before displaying
• Computed Props: Create props that calculate values from other props
• Array Props: Pass an array of items as a prop

📖 Related Resources

• Svelte Tutorial - Props: https://svelte.dev/tutorial/component-props
• Svelte Tutorial - Spread Props: https://svelte.dev/tutorial/spread-props
• MDN - Spread Syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
• Concept 03: Svelte Props (Course Materials)
• Activity 03 Specification: ../../Activities/Activity 03- Svelte Props.mdx

📤 Submission

When you've completed all three activities:

1. Test Activity 1 displays three player cards
2. Test Activity 2 shows correct multiplication
3. Test Activity 3 displays student card with your data
4. Verify spread syntax is working (check TODOs are complete)
5. Check no console errors in Svelte REPL
6. Copy your REPL URLs for all 3 activities
7. Submit using: Submit Your Projects Here

Remember: Props are how components communicate. Master props, and you can build complex applications from simple, reusable pieces!

💡 Pro Tip: The spread operator {...object} is extremely powerful. You'll use it constantly in modern web development - not just in Svelte, but in React, Vue, and plain JavaScript too!