Lekcja 5

Lekcja 5 – Magia Wydarzeń: Spraw, by Twoje Strony Ożyły 🎩✨

Witaj na Lekcji 5! Dziś poznamy wydarzenia, czyli te małe magiczne mechanizmy, które pozwalają Twoim stronkom reagować na kliknięcia, ruchy myszki czy wpisywanie tekstu. Krótko mówiąc: sprawimy, że Twoja strona przestanie być „statycznym nudziarzem” i stanie się „dynamicznym bohaterem internetu”!

Wydarzenia to jak przyprawy do Twojego kodu – bez nich strona działa, ale nie zachwyca. Dodajmy trochę interaktywności i zobaczmy, jak użytkownicy mówią: „Wow, to działa?”.

Przygotowanie Projektu 🛠️

Zaczynamy od utworzenia prostego projektu: plik HTML, trochę kodu JavaScript i nasz niezawodny Caddy, który postawi serwer.

Utwórz folder projektu (lub dodaj pliki do istniejącego DOM_Project):
```
mkdir Lekcja5
cd Lekcja5
```

Stwórz plik HTML o nazwie index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magia Wydarzeń</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">Witamy w Magii Wydarzeń! 🪄</h1>
    <button id="click-me-btn" class="button">Kliknij Mnie</button>
    <input type="text" id="text-input" placeholder="Napisz coś..." />
    <div id="output"></div>
    <input type="text" id="task-input" placeholder="Wpisz zadanie i naciśnij Enter" />
    <ul id="task-list"></ul>

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

Stwórz plik JavaScript o nazwie script.js:

// Wybór elementów
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");

// Wydarzenie kliknięcia w przycisk
button.addEventListener("click", function () {
    alert("Kliknięto przycisk! 🎉");
});

// Wydarzenie wpisywania tekstu
textInput.addEventListener("input", function () {
    outputDiv.textContent = `Napisałeś: ${textInput.value}`;
});

// Dodawanie zadań do listy przy 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 = ""; // Czyści pole
    }
});

Uruchamianie Serwera Lokalnego przez Caddy 🌐

Gotowe pliki? Teraz uruchommy Caddy, aby zobaczyć efekt naszych działań w przeglądarce.

Przejdź do folderu projektu (Lekcja5):
```
cd Lekcja5
```
Uruchom serwer Caddy:
```
caddy file-server --listen :8080
```
Otwórz przeglądarkę i wejdź na http://localhost:8080. Voilà – Twój projekt działa!

Eksplorujemy Wydarzenia 🎉

Co dzieje się w naszym projekcie:

Wydarzenie Kliknięcia w Przycisk

Klikając w przycisk “Kliknij Mnie”, wyświetla się alert:

button.addEventListener("click", function () {
    alert("Kliknięto przycisk! 🎉");
});

Wydarzenie Wpisywania Tekstu

Podczas wpisywania tekstu w polu, treść dynamicznie wyświetla się poniżej:

textInput.addEventListener("input", function () {
    outputDiv.textContent = `Napisałeś: ${textInput.value}`;
});

Dodawanie Zadań Dynamicznie

Naciskając Enter w polu do zadań, dodajesz nowy element do listy:

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 = ""; // Czyści pole
    }
});

Odświeżanie z Ctrl + F5 🔄

Czasem przeglądarka nie chce pokazać nowych zmian. Ctrl + F5 to Twój najlepszy przyjaciel – czyści pamięć podręczną i ładuje stronę na nowo.

Co Dalej?

Świetna robota! Teraz jesteś mistrzem wydarzeń w JavaScript. W kolejnym kroku zajmiemy się delegacją wydarzeń, aby efektywnie zarządzać dynamicznie dodawanymi elementami.

Do zobaczenia w Lekcji 6 – Delegacja Wydarzeń: Efektywność na Wyższym Poziomie!

Teraz idź i twórz dynamiczne strony, które zachwycą wszystkich! 🎠