Svelte Events

What you'll learn

• How to handle click events in Svelte components
• Creating and using functions with events
• Working with prompts and alerts for user interaction
• Building dynamic components that respond to user actions
• Passing props and event handlers between components

Total time: ~60 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
4. Rename files by clicking on the file tab name

:bulb: Tip :bulb: Quick tip: Keep the Svelte REPL open in a separate tab so you can easily switch between instructions and coding!

Steps to Create Your Svelte Events Projects

:computer: Activity One: Alert Button Component

Time estimate: 15 minutes

Svelte REPL - Start with a clean workspace

Let's create a simple alert button that will trigger a pop-up box when it is clicked.

Steps:

1. Create a new component file called Button.svelte
2. Add the following props to your component:
   • name (button text)
   • text (alert message)
   • colour (button style class)
3. Create a popUp() function that shows an alert with the text prop
4. Add an on:click event to the button that calls the popUp function
5. In App.svelte, import the Button component
6. Create two button objects with different properties
7. Pass the props to your Button components

:bulb: Tip :bulb: Event syntax: Use on:click={functionName} to handle click events in Svelte. Don't add parentheses after the function name!

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\} />

If you've done it correctly, it should look like this:

:computer: Activity 2: PIN Lock System

Time estimate: 20 minutes

Svelte REPL - Start fresh for this exercise

Let's create a PIN lock system that prompts users for a PIN and validates it.

Steps:

1. Create a new App.svelte file with the template code below
2. Set up two variables:
   • btnName - for the button text
   • message - for the status message
3. Create a check() function that:
   • Prompts the user for a PIN
   • Converts the input to a number
   • Validates against PIN: 4321
   • Updates the button text and message
4. Add the on:click event to call the check function

:bulb: Tip :bulb: Number conversion: Use +prompt() to convert the string input to a number. This is important for comparing with the PIN number!

:warning: Warning :warning: Common mistake: Make sure to use !== for comparison, not !=, to ensure strict type checking.

App.svelte:

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

    function check() \{
        let pinNo = +prompt("Please enter the PIN number:");
        
        if (pinNo !== 4321) \{
            message = "Wrong pin number!";
        \} else \{
            btnName = "Opened";
            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>

Before pressing on the Unlock button:

After pressing on the Unlock button:

Correct pin number:

Wrong pin number:

:computer: Activity 3: Information Update Page

Time estimate: 15 minutes

Svelte REPL - Start with a new workspace

Let's create a page that can update and display your information.

Steps:

1. Create variables for storing user information:
   • name, age, githubId, phoneNumber (all empty strings)
2. Create an update() function that:
   • Uses prompt() to ask for each piece of information
   • Assigns the results to the variables
3. Add the display elements to show the information
4. Create an Update button with on:click event
5. Test by entering your information

:bulb: Tip :bulb: Reactive updates: In Svelte, when you change a variable's value, the UI automatically updates. No need to manually refresh!

App.svelte:

<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');
    \}
</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>

:computer: Activity 4: Advanced - Clear Button Functionality

Time estimate: 10 minutes

Continuing from Activity 3, let's add a clear button to reset all the information.

Steps:

1. Keep all code from Activity 3
2. Create a clear() function that:
   • Sets all variables back to empty strings ("")
3. Add a Clear button next to the Update button
4. Style it with btn-danger class for visual distinction
5. Add on:click event to call the clear function
6. Test both buttons work correctly

:bulb: Tip :bulb: Button spacing: Use Bootstrap's mr-2 class on the first button to add space between buttons!

Enhanced App.svelte:

<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');
    \}
    
    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>
    <button class='btn btn-danger' on:click=\{clear\}>
        Clear
    </button>
</div>

Required Elements

Make sure your Svelte Events projects include:

• Activity 1: Button component with props, click events, and alert functionality
• Activity 2: PIN validation system with prompts, conditionals, and dynamic UI updates
• Activity 3: Information form with multiple prompts and real-time display updates
• Activity 4: Clear functionality that resets all form data
• All components should use proper on:click event syntax
• Functions should be properly defined and called
• Props should be correctly passed and used

:wrench: Troubleshooting

Common issues and solutions:

1. "Function is not defined" error

   • Make sure your function is inside the <script> tag
   • Check spelling and case sensitivity

2. Click event not working

   • Verify you're using on:click={functionName} (no parentheses!)
   • Ensure the function exists in your script

3. Props not showing

   • Check that you exported the prop: export let propName;
   • Verify you're passing the prop from the parent component

4. Alert/Prompt not appearing

   • Some browsers block pop-ups - check your browser settings
   • Make sure you're in the Svelte REPL preview window

Project Submission

:information_source: Info :memo: Ready to submit? Make sure to test all event handlers and verify they work correctly in the Svelte REPL before submitting!

Submit Your Projects Here

Submission checklist:

• All 4 activities completed
• Click events working properly
• Functions executing correctly
• Props being passed and displayed
• Tested in Svelte REPL

Code Review: YouTube Tutorial