🆓 FREE PROJECT

🚖 Урок 2: Events — форма замовлення

🖱️ Браузер слухає кожну твою дію!

addEventListener ставить "датчик" на елемент, що реагує на події.

Сьогодні: click, change, input, submit + e.preventDefault()!

💡

FUN FACT!

🚕 Uber та Bolt обробляють мільйони подій на секунду — click, scroll, touch!
📱 Кожен тап на екрані — це Event який слухає JavaScript!

🧠

А ТИ ЗНАВ?

📜 Раніше писали <button onclick="doSomething()"> — JS прямо в HTML!
😱 Уяви 100 кнопок — і в кожній JavaScript... Хаос!
✨ addEventListener — це чистий код: HTML окремо, логіка окремо!

🚨

addEventListener — це датчик руху!

Уяви датчик руху в магазині — коли хтось заходить, дзвінок дзвенить.

addEventListener('click', function) — це такий же датчик!
Він чекає на дію і викликає функцію коли вона відбулась.

📁

Чому окремі файли?

index.html + style.css + app.js

📄

index.html

Структура
"Що на сторінці?"

🎨

style.css

Вигляд
"Як виглядає?"

⚡

app.js

Логіка
"Що робити?"

🤔 Навіщо розділяти?

✅ Легше читати — кожен файл має одну задачу

✅ Легше знаходити баги — проблема зі стилями? Дивись CSS!

✅ Командна робота — дизайнер редагує CSS, програміст — JS

✅ Кешування — браузер зберігає CSS/JS окремо, сторінка швидша

🔗 Як вони з'єднані?
<link rel="stylesheet" href="style.css"> — підключає стилі
<script src="app.js"></script> — підключає JavaScript

📱 ЖИВИЙ ДОДАТОК

Форма замовлення таксі

9:41 🔋 100%

🚖 KOODI TAXI

🚕

Стандарт

₴98

🚖

Комфорт

₴113

🚗

Бізнес

₴168

₴98

👆 Клікай на клас авто — ціна змінюється миттєво!

📊

Event Explorer

Лог click/input/change в реальному часі!

📋 Лог подій з'явиться тут...

🛑

preventDefault() Demo

Порівняй поведінку з/без preventDefault

❌ БЕЗ preventDefault

Перейти на Google

Сторінка відкриється...

✅ З preventDefault

Перейти на Google

Клікни — нічого не станеться!

💡 Коли використовувати? Форми (submit), посилання, кнопки — коли хочеш контролювати поведінку!

📄 HTML форма замовлення

📝 Форма — це контейнер для полів вводу.
<form> об'єднує inputs і має подію submit!

У вкладці index.html вже є форма! Перевір:

<form id="orderForm"> <h1>🚖 Замовити таксі</h1> <input id="pickup" placeholder="📍 Звідки?"> <input id="destination" placeholder="🏁 Куди?"> <select id="carType"> <option value="economy">🚕 Стандарт — ₴98</option> <option value="comfort">🚖 Комфорт — ₴113</option> <option value="premium">🚗 Бізнес — ₴168</option> </select> <p id="price">Ціна: ₴98</p> <button type="submit">🚖 Замовити</button> </form>

🧪 e.preventDefault() потрібен щоб...

💡 id="orderForm" — унікальний ідентифікатор форми

💡 id="carType" — select для вибору класу авто

💡 id="price" — параграф з ціною який будемо змінювати

💡 type="submit" — кнопка відправки форми

🔄 Подія change — зміна ціни

🎚️ change спрацьовує коли користувач змінив значення select/input.
Як перемикач світла — клац, і щось змінилось!

Перейди у app.js та ДОДАЙ:

// Ціни для кожного класу const prices = { economy: 98, comfort: 113, premium: 168 }; // Знаходимо елементи const carType = document.getElementById('carType'); const price = document.getElementById('price'); // Слухаємо зміну вибору carType.addEventListener('change', function(e) { const selected = e.target.value; price.textContent = 'Ціна: ₴' + prices[selected]; });

🧪 e.target повертає...

💡 e.target — елемент на якому сталася подія (select)

💡 e.target.value — обране значення (economy/comfort/premium)

💡 prices[selected] — отримуємо ціну з об'єкта

💡 'change' — подія спрацьовує при зміні вибору

📤 Подія submit — відправка форми

🚫 submit за замовчуванням перезавантажує сторінку!
e.preventDefault() — СТОП! Ми самі вирішимо що робити.

ДОДАЙ нижче в app.js:

// Знаходимо форму const form = document.getElementById('orderForm'); // Слухаємо відправку form.addEventListener('submit', function(e) { // СТОП! Не перезавантажуй сторінку! e.preventDefault(); // Отримуємо дані const pickup = document.getElementById('pickup').value; const dest = document.getElementById('destination').value; // Показуємо замовлення alert('🚖 Замовлення!\nЗвідки: ' + pickup + '\nКуди: ' + dest); });

🧪 Подія "input" спрацьовує...

💡 e.preventDefault() — зупиняє стандартну поведінку (перезавантаження)

💡 'submit' — подія при відправці форми

💡 .value — отримуємо текст з input

💡 alert() — показуємо повідомлення користувачу

▶️ Натисни RUN і перевір!

Обери клас авто — ціна зміниться! Натисни "Замовити" — побачиш alert!

🏆 Що ти вивчив:

✓ addEventListener — слухаємо події

✓ e.target — елемент на якому подія

✓ e.preventDefault() — зупиняємо дефолт

✓ change/submit/input — типи подій

✅ Коли все працює:

Натисни "Готово" в редакторі!

⏱️ ~15 хв • Урок 2 з 8

Потрібна допомога?

💡 Підказка

🤖 AI-KOODI

index.html ✏️

style.css

app.js

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚖 Koodi Taxi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- =============================================
         🚖 ЗАВДАННЯ: Створи форму замовлення таксі
         =============================================

         <form> — контейнер для полів вводу
         id="..." — унікальний ідентифікатор елемента

         СТВОРИ ФОРМУ з такими елементами:

         1. <form id="orderForm">
            └── Контейнер форми. Має подію "submit"

         2. <h1>🚖 Замовити таксі</h1>
            └── Заголовок сторінки

         3. <input type="text" id="pickup" placeholder="📍 Звідки?">
            └── Поле для адреси відправлення

         4. <input type="text" id="destination" placeholder="🏁 Куди?">
            └── Поле для адреси призначення

         5. <select id="carType">
               <option value="economy">🚕 Стандарт — ₴98</option>
               <option value="comfort">🚖 Комфорт — ₴113</option>
               <option value="premium">🚗 Бізнес — ₴168</option>
            </select>
            └── Випадаючий список для вибору класу авто
            └── value — значення яке отримаємо в JS

         6. <p id="price">Ціна: ₴98</p>
            └── Параграф для відображення ціни
            └── Будемо змінювати через textContent

         7. <button type="submit">🚖 Замовити</button>
            └── type="submit" викликає подію submit на формі

         ⬇️ ПИШИ КОД НИЖЧЕ (видали цей коментар) ⬇️
    -->


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

/* =============================================
   🎨 СТИЛІ ДЛЯ KOODI TAXI
   =============================================
   Стилі вже готові! Фокус уроку — JavaScript Events.
   Можеш переглянути як стилізовані елементи.
*/

/* Скидання стилів браузера */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Фон сторінки — градієнт темно-синій */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #1A1A2E, #16213e);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Форма замовлення — картка по центру */
#orderForm {
    background: rgba(255, 213, 0, 0.1);
    padding: 40px;
    border-radius: 25px;
    border: 3px solid #FFD500;  /* Жовта рамка таксі */
    text-align: center;
    max-width: 350px;
    width: 100%;
}

/* Заголовок — жовтий колір */
h1 {
    color: #FFD500;
    font-size: 1.8em;
    margin-bottom: 25px;
}

/* Поля вводу та select */
input, select {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 2px solid #FFD500;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    color: #FFF;
    font-size: 1em;
}

input::placeholder { color: rgba(255,255,255,0.5); }

select option {
    background: #1A1A2E;
    color: #FFF;
}

/* Ціна — великий жовтий текст */
#price {
    color: #FFD500;
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px 0;
}

/* Кнопка замовлення — жовтий градієнт */
button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #FFD500, #E5BF00);
    border: 3px solid #000;
    border-radius: 12px;
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

/* Ефект при наведенні */
button:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(255,213,0,0.4);
}

// =============================================
// 🚖 KOODI TAXI — Events (Урок 2)
// =============================================
// Сьогодні вивчаємо: слухачі подій, об'єкт події, зупинку перезавантаження

// ─────────────────────────────────────────────
// 📦 КРОК 1: Об'єкт з цінами
// ─────────────────────────────────────────────
// Створи об'єкт prices з цінами для кожного класу:
// - economy: 98
// - comfort: 113
// - premium: 168
//
// ПРИКЛАД об'єкта:
// const назва = {
//     ключ1: значення1,
//     ключ2: значення2
// };
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🔍 КРОК 2: Знайди елементи
// ─────────────────────────────────────────────
// Використай document.getElementById() щоб знайти:
// - carType (select для вибору класу)
// - price (p для відображення ціни)
// - form (форма orderForm)
//
// СИНТАКСИС:
// const змінна = document.getElementById('id-елемента');
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🔄 КРОК 3: Подія "change" — зміна класу авто
// ─────────────────────────────────────────────
// Коли користувач змінює вибір у select — оновлюй ціну!
//
// слухачПодій('зміна', функція(e) {...})
// └── 'зміна' — подія при зміні значення
// └── e — об'єкт події
// └── e.target — елемент на якому подія (select)
// └── e.target.value — обране значення (economy/comfort/premium)
//
// ЛОГІКА:
// 1. Отримай обране значення: e.target.value
// 2. Знайди ціну в об'єкті: prices[обране_значення]
// 3. Оновити текст: price.textContent = 'Ціна: ₴' + ціна
//
// ПРИКЛАД (псевдокод):
// елемент.слухайПодію('зміна', функція(подія) {
//     отримуємо обране значення
//     оновлюємо текст ціни
// });
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 📤 КРОК 4: Подія "submit" — відправка форми
// ─────────────────────────────────────────────
// Коли користувач натискає "Замовити" — покажи alert!
//
// ⚠️ ВАЖЛИВО: зупинити стандартну поведінку
// └── Метод який зупиняє перезавантаження форми
// └── Без нього сторінка перезавантажиться!
//
// ЛОГІКА:
// 1. Зупини перезавантаження сторінки
// 2. Отримай значення полів через .value
// 3. Покажи alert з даними замовлення
//
// ПРИКЛАД (псевдокод):
// форма.слухайПодію('відправка', функція(подія) {
//     зупиняємо перезавантаження
//     отримуємо значення полів
//     показуємо повідомлення з даними
// });
//
// ⬇️ ПИШИ ТУТ:



console.log('🚖 Koodi Taxi Events!');

16px

localhost/taxi.html

🚖

Напиши код і натисни Run ▶

Koodi Taxi