🆓 FREE PROJECT

🚖 Урок 1: Знайомство з Web APIs

📱 Уяви: ти відкриваєш додаток таксі!

🗺️ Як він знає де ти? → Geolocation API!

🗺️ Як показує карту? → iframe + Maps API!

💾 Як зберігає історію? → LocalStorage API!

🔔 Як надсилає "Таксі прибуло!"? → Notification API!

Сьогодні ми ВІДКРИВАЄМО КАПОТ браузера! 🔧

💡

FUN FACTS!

🚕 Uber використовує 15+ різних Web APIs!
🚖 Bolt обробляє 2+ мільйони поїздок на день через такі ж APIs!
📅 querySelector з'явився в 2013 — до цього код був набагато довшим!

😂 Жарт для розігріву!

Чому JavaScript-розробник викликав таксі?

Бо його код знову пішов не в той callback! 🚖💨

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

Спробуй інтерактивний Koodi Taxi!

9:41 🔋 100%

🚖 KOODI TAXI

📍 вул. Хрещатик, 22

🏁 8 км

Привіт,

Пасажире!

🚕

Стандарт

₴ 98

🚖

Комфорт

₴ 113

🚗

Бізнес

₴ 168

🚙

Green

₴ 105

💳 •• 8022

👤 Для вас

💬 Коментар

⚙️ Послуги

👆 Введи ім'я → вибери клас авто → натисни "Замовити"!

🔌

Що таке Web API?

API (Application Programming Interface) — це інтерфейс браузера для взаємодії з JavaScript!

Все починається з DOM API — це "руки" JavaScript що можуть схопити будь-який елемент на сторінці, прочитати його, змінити або видалити!

HTML CSS JavaScript

🎮

API — це пульт від телевізора

Ти натискаєш кнопку на пульті → телевізор реагує.
JavaScript викликає API → браузер виконує дію!

document.getElementById() — це як кнопка "вибрати канал" 📺

🎮

Пульт

Керує ТВ

🔌

Web API

Керує браузером

🔍

DOM Explorer

Клікни на методи — елементи підсвітяться!

                            
                            <div id="app">
                        
                            <h1>Koodi Taxi</h1>
                        
                            <input id="name">
                        
                            <button id="start">Почати</button>
                        
                            </div>

⚡ Клікни на метод — елемент підсвітиться:

📝

textContent vs innerHTML

Побач різницю в реальному часі!

Введи HTML код:

textContent

<b>Жовте</b> таксі 🚖

Показує HTML як звичайний текст

innerHTML

Жовте таксі 🚖

Парсить HTML теги

💡 Порада: textContent безпечніший — не виконує скрипти!

🖱️

Event Listener Demo

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

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

🧪

Пісочниця коду

Спробуй виконати JavaScript!

📦 Результат:

Текст зміниться тут...

📄 Базова структура HTML

🏗️ Кожна веб-сторінка починається з <!DOCTYPE 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>🚖 Koodi Taxi</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>

🧪 Міні-тест: Web API — це...

💡 <!DOCTYPE html> — каже браузеру: "Це HTML5 документ!"

💡 <html lang="uk"> — вказуємо що сторінка українською 🇺🇦

💡 <meta viewport> — робить сайт гарним на телефонах

💡 <link> — підключаємо зовнішній CSS файл

🚖 Екран привітання

📱 Створюємо welcome-screen — перший екран додатку!
Тут буде input для імені та кнопка "Почати".

ДОДАЙ всередину <body>:

<div id="welcome-screen"> <h1>🚖 Koodi Taxi</h1> <p id="greeting">Привіт, пасажире!</p> <input type="text" id="userName" placeholder="Твоє ім'я"> <button id="startBtn">Почати</button> </div> <script src="app.js"></script>

🧪 querySelector('.btn') знайде...

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

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

💡 id="userName" — поле вводу для імені

💡 id="startBtn" — кнопка яку будемо слухати

⚡ JavaScript інтерактивність

🧠 addEventListener — це як сторож біля кнопки.
Він чекає на клік і виконує дію!

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

// Знаходимо кнопку const startBtn = document.getElementById('startBtn'); // Слухаємо клік startBtn.addEventListener('click', function() { // Отримуємо ім'я const name = document.getElementById('userName').value; // Перевіряємо чи не порожнє if (!name) { alert("Введи своє ім'я!"); return; } // Змінюємо текст привітання const greeting = document.getElementById('greeting'); greeting.textContent = 'Привіт, ' + name + '! 👋'; });

🧪 textContent відрізняється від innerHTML тим, що...

💡 getElementById('startBtn') — знаходимо кнопку по id

💡 addEventListener('click', function) — слухаємо клік

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

💡 textContent — змінюємо текст елемента

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

Введи ім'я та клікни "Почати" — привітання зміниться на персональне!

💡 А в демо-телефоні вище — бачиш яку круту картку можна зробити!

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

✓ Що таке Web API — інтерфейс браузера

✓ DOM API — getElementById, querySelector

✓ textContent vs innerHTML — різниця в роботі

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

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

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

⏱️ ~12 хв • Урок 1 з 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>
    <!-- Крок 2: Додай welcome-screen тут -->

</body>
</html>

/* 🚖 Стилі для Koodi Taxi */
* {
    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;
}

#welcome-screen {
    text-align: center;
    background: rgba(255, 213, 0, 0.1);
    padding: 40px;
    border-radius: 25px;
    border: 3px solid #FFD500;
}

h1 {
    color: #FFD500;
    font-size: 2.5em;
    margin-bottom: 20px;
}

#greeting {
    color: #FFF;
    font-size: 1.3em;
    margin-bottom: 25px;
}

#userName {
    padding: 15px 25px;
    font-size: 1.1em;
    border: 3px solid #FFD500;
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    color: #FFF;
    width: 250px;
    outline: none;
    margin-bottom: 15px;
}

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

#startBtn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #FFD500, #E5BF00);
    border: 3px solid #000;
    border-radius: 15px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

#startBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(255,213,0,0.4);
}

// 🚖 JavaScript для Koodi Taxi
// Крок 3: Додай код для кнопки тут!

console.log('🚖 Koodi Taxi завантажено!');

16px

Koodi Taxi