Activity 04: Svelte Events - Discovery Challenge

W3 Server-Side Development & Authentication - Lesson 4

🎯 Learning Objectives

By completing this activity, you will:

• Handle click events in Svelte components
• Create and use functions with events
• Work with prompts and alerts for user interaction
• Build dynamic components that respond to user actions
• Combine props and event handlers in reusable components

🚀 Getting Started (See Results in 30 Seconds!)

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

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

1. Open Svelte REPL: Go to https://svelte.dev/repl/hello-world
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 (for Activity 1 only)
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 (65% Complete)

Already implemented for you:

• ✅ Button Component: Complete with props (name, text, colour) and Bootstrap styling
• ✅ popUp Function: Working alert functionality
• ✅ Click Event: on:click={popUp} syntax working
• ✅ Two Button Demo: btn1 and btn2 objects with spread syntax
• ✅ PIN Lock Base: Variables (btnName, message) and initial UI setup
• ✅ Bootstrap CDN: Pre-linked for professional styling
• ✅ Info Update UI: Display structure for name, age, GitHub ID, phone number
• ⚠️ PIN Validation Logic: TODO - Implement check() function with conditional
• ⚠️ Update Function: TODO - Complete with prompts for all 4 fields
• ⚠️ Clear Function: TODO - Add clear() function and button

📂 Files Structure

activity-04-svelte-events/
├── README.md                    # This file
├── 01-alert-button/
│   ├── App.svelte              # 100% complete
│   └── Button.svelte           # 100% complete
├── 02-pin-lock/
│   └── App.svelte              # 60% complete - needs validation logic
├── 03-info-update/
│   └── App.svelte              # 50% complete - needs update function
└── 04-clear-button/
    └── App.svelte              # 40% complete - needs clear function + button

📋 Tasks to Complete

TODO 1: Complete PIN Validation Logic (Medium)

Implement the check() function to validate user PIN entry.

File: 02-pin-lock/App.svelte

Success Criteria:

• Prompt user for PIN number using prompt()
• Convert input to number using + operator
• Compare against correct PIN: 4321
• If wrong: Set message to "Wrong pin number!"
• If correct: Set btnName to "Opened" AND message to "Successfully opened the locker!"
• Use !== for comparison (strict inequality)

Code Location: Inside the check() function (currently empty)

Hint: You need to create a variable to store the user's input, then use an if/else statement to check if it matches 4321.

Example Pattern:

function check() {
    let userInput = +prompt("Enter PIN:");
    if (userInput !== correctPIN) {
        // Set error message
    } else {
        // Set success message and change button
    }
}

TODO 2: Complete Update Function (Medium)

Implement prompts to collect all four pieces of user information.

File: 03-info-update/App.svelte

Success Criteria:

• Prompt for name and assign to name variable
• Prompt for age and assign to age variable
• Prompt for GitHub ID and assign to githubId variable
• Prompt for phone number and assign to phoneNumber variable
• All prompts have clear, user-friendly messages
• UI updates immediately after clicking Update

Code Location: Inside the update() function (currently empty)

Hint: You need four separate prompt() calls, one for each piece of information. Use descriptive messages like "Please enter your name".

TODO 3: Add Clear Functionality (Easy)

Create a function to reset all user information and add a Clear button.

File: 04-clear-button/App.svelte (same as 03, with additions)

Success Criteria:

• Create clear() function
• Function sets all 4 variables to empty strings ""
• Add Clear button next to Update button
• Clear button uses btn-danger class (red styling)
• Clear button has on:click={clear} event
• Use mr-2 class on Update button for spacing

Code Location:

• Function: Inside <script> tag after update()
• Button: Inside the <div> after the Update button

Hint: The clear function is very simple - just set each variable back to "". The button follows the same pattern as the Update button.

💡 What You'll Learn

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

Event Handling Fundamentals

• on:click Syntax: Using on:click={functionName} (no parentheses!)
• Event Functions: Creating functions that respond to user actions
• User Interaction: Prompts and alerts for simple user input
• Dynamic Updates: How Svelte automatically updates UI when variables change

Function Patterns

• Simple Functions: function popUp() { ... } for alerts
• Conditional Logic: Using if/else for validation
• Variable Updates: Changing state based on user actions
• Multiple Functions: Different functions for different actions (update vs clear)

Combining Concepts

• Props + Events: Components can accept both data (props) and handle events
• Reusable Event Components: Button component works with any click action
• State Management: Variables track application state (message, name, etc.)

📝 Starter Code

Activity One: Alert Button Component (100% Complete - No Changes Needed)

Button.svelte:

<script>
    export let name;
    export let text;
    export let colour;

    function popUp() {
        alert(text);
    }
</script>

<button class='btn {colour} m-1' on:click={popUp}>
    {name}
</button>

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

App.svelte:

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

    let btn1 = {
        name: 'Button',
        text: 'Hello',
        colour: 'btn-success'
    };

    let btn2 = {
        name: 'Alert',
        text: 'Alert',
        colour: 'btn-primary'
    };
</script>

<Button {...btn1} />
<Button {...btn2} />

Activity 2: PIN Lock System (60% Complete - YOUR TURN!)

App.svelte:

<script>
    let btnName = "Unlock";
    let message = "Click on the button to open the locker.";

    function check() {
        // TODO 1: Implement PIN validation
        // 1. Prompt user for PIN number (use +prompt() to convert to number)
        // 2. Check if pinNo !== 4321
        // 3. If wrong: message = "Wrong pin number!"
        // 4. If correct: btnName = "Opened" and message = "Successfully opened the locker!"
    }
</script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<button on:click={check} class="btn btn-success">
    {btnName}
</button>

<p class="mt-2">{message}</p>

Activity 3: Information Update Page (50% Complete - YOUR TURN!)

App.svelte:

<script>
    let name = '';
    let age = '';
    let githubId = '';
    let phoneNumber = '';

    function update() {
        // TODO 2: Implement update function
        // Prompt for each field and assign to variables:
        // name = prompt('Please enter your name');
        // (repeat for age, githubId, phoneNumber)
    }
</script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<h1 class="text-center text-white bg-dark mb-0 p-2">
    Exercise 3
</h1>
<div class='bg-secondary p-5 text-center text-white'>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
    <p>Github ID: {githubId}</p>
    <p>Phone Number: {phoneNumber}</p>

    <button class='btn btn-success mr-2' on:click={update}>
        Update
    </button>
</div>

Activity 4: Clear Button Functionality (40% Complete - YOUR TURN!)

App.svelte (Based on Activity 3):

<script>
    let name = '';
    let age = '';
    let githubId = '';
    let phoneNumber = '';

    function update() {
        name = prompt('Please enter your name');
        age = prompt('Please enter your age');
        githubId = prompt('Please enter your Github ID');
        phoneNumber = prompt('Please enter your phone number');
    }

    // TODO 3: Add clear() function here
    // function clear() {
    //     name = "";
    //     age = "";
    //     githubId = "";
    //     phoneNumber = "";
    // }
</script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<h1 class="text-center text-white bg-dark mb-0 p-2">
    Exercise 3
</h1>
<div class='bg-secondary p-5 text-center text-white'>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
    <p>Github ID: {githubId}</p>
    <p>Phone Number: {phoneNumber}</p>

    <button class='btn btn-success mr-2' on:click={update}>
        Update
    </button>
    <!-- TODO 3: Add Clear button here -->
    <!-- <button class='btn btn-danger' on:click={clear}>Clear</button> -->
</div>

✅ Success Criteria

Your activity is complete when:

• ✅ Activity 1 shows two buttons with working alerts (ALREADY WORKING)
• ✅ Button component accepts props and handles click events (ALREADY WORKING)
• TODO: Activity 2 validates PIN 4321 with correct/incorrect messages
• TODO: Activity 3 prompts for all 4 user fields and displays them
• TODO: Activity 4 includes Clear button that resets all fields
• All event handlers use on:click={functionName} syntax (no parentheses)
• No console errors in Svelte REPL
• All four activities working independently

🧪 Testing Your Implementation

Test these scenarios in Svelte REPL:

1. Activity 1 - Alert Button:

   • Click "Button" -> Should alert "Hello"
   • Click "Alert" -> Should alert "Alert"
   • Try changing btn1.text -> Alert should show new text

2. Activity 2 - PIN Lock:

   • Click Unlock -> Should prompt for PIN
   • Enter 1234 -> Should show "Wrong pin number!"
   • Enter 4321 -> Button should say "Opened", message shows success

3. Activity 3 - Info Update:

   • Click Update -> Should prompt for name, age, GitHub ID, phone
   • Enter data -> Should display on page immediately
   • UI updates reactively as variables change

4. Activity 4 - Clear Button:

   • Fill in data with Update
   • Click Clear -> All fields should reset to empty
   • Click Update again -> Should work normally

🔗 How to Use This Template

Setting Up Each Activity:

Each activity is independent - set up in separate Svelte REPL instances:

Activity One: (No changes needed - reference only)

1. Copy Button.svelte and App.svelte code
2. Test both buttons work

Activity 2: (TODO 1)

1. Copy App.svelte code into REPL
2. Complete the check() function
3. Test with wrong and correct PIN

Activity 3: (TODO 2)

1. Copy App.svelte code into REPL
2. Complete the update() function
3. Test all 4 prompts work

Activity 4: (TODO 3)

1. Copy App.svelte code (includes completed update function)
2. Add clear() function
3. Add Clear button
4. Test both Update and Clear work

🛠️ Troubleshooting

Issue: "Function is not defined" error Solution: Make sure function is inside <script> tag and spelled correctly

Issue: Click event not working Solution: Use on:click={functionName} with NO parentheses - {popUp} not {popUp()}

Issue: Props not showing in Button component Solution: Check you used export let for all props (name, text, colour)

Issue: Alert/Prompt not appearing Solution: Some browsers block pop-ups - check browser settings, or make sure you're in the REPL preview window

Issue: PIN validation always shows wrong Solution: Make sure you used +prompt() to convert string to number, and !== for comparison

Issue: Variables not updating UI Solution: Svelte is reactive - but make sure you're assigning directly to variables, not properties of objects

Issue: Bootstrap styles not working Solution: Copy the entire <link> tag for Bootstrap CDN

🚀 Extension Challenges

Ready for more? Try these bonus features:

Beginner Extensions

• More Buttons: Add 5 different buttons with different colors and messages
• Better Validation: Add length checks for phone number or student ID
• Confirmation: Add confirm() before clearing data

Intermediate Extensions

• Counter Button: Create button that increments a counter on each click
• Toggle Button: Create button that switches between two states
• Multiple PINs: Accept different PINs for different users

Advanced Extensions

• Form Validation: Check if age is a number, validate email format
• Local Storage: Save user data so it persists after page reload
• Event Modifiers: Use on:click|once or on:click|preventDefault

📖 Related Resources

• Svelte Tutorial - Events: https://svelte.dev/tutorial/dom-events
• Svelte Tutorial - Event Modifiers: https://svelte.dev/tutorial/event-modifiers
• MDN - Browser Dialogs: https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
• Bootstrap Buttons: https://getbootstrap.com/docs/5.0/components/buttons/
• Concept 04: Svelte Events (Course Materials)
• Activity 04 Specification: ../../Activities/Activity 04- Svelte Events.mdx

📤 Submission

When you've completed all four activities:

1. Test Activity 1 buttons trigger correct alerts
2. Test Activity 2 validates PIN correctly
3. Test Activity 3 updates all 4 fields
4. Test Activity 4 clears all data
5. Verify no console errors in Svelte REPL
6. Copy your REPL URLs for all activities
7. Submit using: Submit Your Projects Here

Remember: Event handling is what makes web apps interactive. You've learned the core pattern that powers every button, form, and interactive element in modern web development!

💡 Pro Tip: The on:click={functionName} pattern works for all DOM events: on:mouseover, on:keydown, on:submit, etc. Master this pattern, and you can handle any user interaction!