Урок 5

Урок 5 – Магія Подій: Робимо Сторінки Інтерактивними 🎩✨

Вітаю на Уроці 5! Сьогодні ми вчимося створювати справжню магію за допомогою подій JavaScript. Кнопки будуть клікати, текстові поля — реагувати, а користувачі, можливо, навіть перестануть питати: «А це точно працює?».

Події — це як спеції у програмуванні. Без них сторінки були б прісними й статичними. Але додайте трохи подій, і ось вона — динаміка, взаємодія, а можливо, навіть трошки драйву. Почнімо!

Створюємо Наш Проєкт 🛠️

Для цієї теми створимо новий проєкт: напишемо файл HTML, додамо трохи магії JavaScript і піднімемо це все на Caddy.

Створіть нову папку для уроку (або скористайтеся вашою папкою DOM_Project):
```
mkdir Lesson5
cd Lesson5
```

Створіть HTML-файл під назвою index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Магія Подій</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">Ласкаво просимо до Магії Подій! 🪄</h1>
    <button id="click-me-btn" class="button">Натисни Мене</button>
    <input type="text" id="text-input" placeholder="Напишіть щось..." />
    <div id="output"></div>
    <input type="text" id="task-input" placeholder="Введіть завдання і натисніть Enter" />
    <ul id="task-list"></ul>

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

Створіть JavaScript-файл під назвою script.js:

// Вибір елементів
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.addEventListener("click", function () {
    alert("Кнопка натиснута! 🎉");
});

// Подія вводу тексту
textInput.addEventListener("input", function () {
    outputDiv.textContent = `Ви написали: ${textInput.value}`;
});

// Додавання завдань у список при натисканні 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 = ""; // Очищаємо поле вводу
    }
});

Запускаємо Локальний Сервер через Caddy 🌐

Тепер, коли наші файли готові, використаємо Caddy, щоб запустити проєкт локально і перевірити результат у браузері.

Перейдіть у папку вашого проєкту (Lesson5):
```
cd Lesson5
```
Запустіть сервер Caddy:
```
caddy file-server --listen :8080
```
Відкрийте браузер і перейдіть на http://localhost:8080. Ваш проєкт готовий до роботи!

Досліджуємо Події 🎉

Що відбувається у нашому проєкті:

Подія Кліку на Кнопку

Коли ви натискаєте кнопку “Натисни Мене”, з’являється повідомлення:

button.addEventListener("click", function () {
    alert("Кнопка натиснута! 🎉");
});

Подія Вводу у Поле

Коли ви вводите текст у поле, він динамічно з’являється нижче:

textInput.addEventListener("input", function () {
    outputDiv.textContent = `Ви написали: ${textInput.value}`;
});

Додавання Завдань Динамічно

Натиснувши 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 = ""; // Очищаємо поле вводу
    }
});

Оновлення з Ctrl + F5 🔄

Буває, браузер не хоче показувати зміни відразу. Ctrl + F5 — це як магічна паличка, яка очищує кеш і перезавантажує сторінку, щоб ви побачили останню версію вашого проєкту.

Що Далі?

Відмінна робота! Тепер ви справжній майстер подій у JavaScript. Наступного разу ми розглянемо делегування подій, ефективний спосіб роботи з подіями для динамічних елементів.

До зустрічі у Урок 6 – Делегування Подій: Майстерність Ефективної Взаємодії!

Тепер ідіть і змусьте свої веб-сторінки ожити! 🎠