Лабораторна робота №6: JavaScript. Формат JSON. API. Отримання даних із зовнішньої сторінки (fetch, promise)

Цей проєкт є частиною лабораторної роботи №6 з дисципліни «Основи Front-end технологій», виконаної студентом Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського».

Метою роботи було навчитися працювати з даними в форматі JSON, отримувати та обробляти дані із зовнішнього API за допомогою методів fetch та Promise.

---

Опис проєкту

Проєкт реалізує асинхронне завантаження даних користувачів з Random User API та їх відображення на веб-сторінці.

Варіант для завдання розраховувався за формулою: my_variant = (my_num - 1) % total_variants + 1, де my_num = 49 (мій номер у переліку студентів), total_variants = 20 (згідно з Таблицею 1).

Розрахунок: my_variant = (49 - 1) % 20 + 1 = 9

Варіант №9

Згідно з варіантом №9, дані відображаються у такій послідовності (рядки 1, 4, 6, 3, 2 з Таблиці 2):

1. picture — фотографія користувача
2. city — місто
3. postcode — поштовий індекс
4. cell — мобільний телефон
5. name — повне ім'я

Функціонал

• Кнопка "Download" — ініціює запит до API при натисканні
• Асинхронне завантаження — використовується fetch() та Promise (метод .then())
• Відображення даних — після успішного завантаження з'являється повідомлення "success!" та 5 карток користувачів
• Адаптивна сітка — картки автоматично розподіляються по ширині екрану
• Обробка помилок — при виникненні помилки виводиться відповідне повідомлення

---

Використані технології

• HTML5 — структура сторінки
• CSS3 — стилізація елементів, CSS Grid для адаптивної сітки
• JavaScript (ES6) — асинхронні запити через Fetch API та Promise
• Random User API — зовнішній API для отримання даних користувачів у форматі JSON
• WebStorm — середовище розробки
• Git / GitHub — система контролю версій та хостинг проєкту
• GitHub Pages — публікація веб-сторінки онлайн

---

Документація

• Fetch API: https://developer.mozilla.org/uk/docs/Web/API/Fetch_API
• Promise: https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise
• Random User API: https://randomuser.me/documentation
• JSON: https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON

---

Переглянути сторінку

Проєкт розміщено на GitHub Pages і доступний за посиланням:
👉 https://randomiv.github.io/lab6-frontend/

---

Локальний запуск

Щоб переглянути проєкт локально:

1. Клонуйте репозиторій з GitHub:

git clone https://github.com/RandomIv/lab6-frontend

2. Перейдіть до папки проєкту:

cd lab6-frontend

3. Відкрийте файл index.html у веб-браузері (Chrome, Firefox, Safari тощо).

Примітка: Для роботи з API необхідне інтернет-з'єднання.

---

Автор

• Ім'я: Іванишин Олександр Олександрович
• Група: ІМ-32
• Варіант: 49