Lesson 5

Lesson 5 – Event Magic: Making Web Pages Interactive 🎩✨

Welcome to Lesson 5! Today, we’re going to make your web pages come alive with JavaScript events. Clicks, hovers, and key presses will all have a purpose, and you’ll finally feel like the web is under your control (in the best way possible).

Let’s set up our environment and dive in!

Setting Up the Project 🛠️

We’ll create a new project folder, write an HTML file, add JavaScript for event handling, and serve it using Caddy.

Create a new folder for this lesson (or add files to your existing DOM_Project):
```
mkdir Lesson5
cd Lesson5
```

Create an HTML file called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Magic</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .button { margin: 10px 0; padding: 10px; background: lightblue; border: none; cursor: pointer; }
        .button:hover { background: deepskyblue; }
        #output, #task-list { margin-top: 10px; }
        #task-list li { margin-bottom: 5px; }
    </style>
</head>
<body>
    <h1 id="main-heading">Welcome to Event Magic! 🪄</h1>
    <button id="click-me-btn" class="button">Click Me</button>
    <input type="text" id="text-input" placeholder="Type something..." />
    <div id="output"></div>
    <input type="text" id="task-input" placeholder="Enter a task and press Enter" />
    <ul id="task-list"></ul>

    <script src="script.js"></script>
</body>
</html>

Create a JavaScript file called script.js:

// Selecting elements
let button = document.getElementById("click-me-btn");
let textInput = document.getElementById("text-input");
let outputDiv = document.getElementById("output");
let taskInput = document.getElementById("task-input");
let taskList = document.getElementById("task-list");

// Button click event
button.addEventListener("click", function () {
    alert("Button clicked! 🎉");
});

// Input event for dynamic text
textInput.addEventListener("input", function () {
    outputDiv.textContent = `You typed: ${textInput.value}`;
});

// Task list: add tasks on Enter
taskInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Clear the input
    }
});

Serving Your Project Locally with Caddy 🌐

Now that our files are ready, we’ll use Caddy to serve the project locally so you can see your work live in a browser.

Navigate to your project folder (Lesson5):
```
cd Lesson5
```
Start the Caddy server:
```
caddy file-server --listen :8080
```
Open your browser and go to http://localhost:8080. Your interactive project is now live!

Exploring Events 🎉

Let’s break down the event magic happening in our project:

Button Click Event

When you click the “Click Me” button, an alert appears:

button.addEventListener("click", function () {
    alert("Button clicked! 🎉");
});

Input Field Event

As you type into the input field, the text appears dynamically below:

textInput.addEventListener("input", function () {
    outputDiv.textContent = `You typed: ${textInput.value}`;
});

Adding Tasks Dynamically

Pressing Enter in the task input adds a new task to the list:

taskInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Clear the input
    }
});

Refreshing with Ctrl + F5 🔄

Sometimes changes don’t show up when you refresh your browser. Ctrl + F5 will force your browser to clear its cache and reload everything fresh—your best friend while coding!

What’s Next?

Great job! You’ve mastered JavaScript events and created an interactive project. In the next lesson, we’ll explore event delegation, a powerful technique for handling events efficiently when working with dynamically added elements.

Stay tuned for Lesson 6 – Event Delegation: Mastering Efficiency in Interaction!

Now go forth and impress your friends with your newfound event magic! 🎠