Завантаження даних з API

Створи сторінку, яка завантажує дані з безкоштовного API та красиво їх відображає.

Завдання

Використай JSONPlaceholder — безкоштовний fake REST API для тестування.

Файлова структура

api-project/
├── index.html
├── style.css
└── script.js

Вимоги

1. Завантаження користувачів:

• Fetch https://jsonplaceholder.typicode.com/users при завантаженні сторінки
• Відобрази список користувачів у вигляді карток
• Кожна картка: name, email, company.name, address.city
• Показуй spinner/loader під час завантаження
• Обробляй помилки (показуй повідомлення)

2. Завантаження постів:

• При кліку на користувача — завантаж його пости: /users/{id}/posts
• Відобрази пости під картками користувачів або у модальному вікні
• Кожен пост: title, body (обрізаний до 100 символів)

3. Пошук та фільтрація:

• Input для пошуку користувачів за ім'ям (фільтрація на клієнті)
• Пошук працює в реальному часі (на кожен keyup)

4. Технічні вимоги:

• Використовуй async/await (не .then())
• try/catch для обробки помилок
• Всі запити через fetch()
• Код розділений на функції (fetchUsers, renderUsers, filterUsers)

Підказки

• Для loader: додай/видали CSS-клас hidden або loading
• Для обрізки тексту: text.slice(0, 100) + "..."
• JSONPlaceholder endpoints:
  • GET /users — всі користувачі
  • GET /users/{id}/posts — пости конкретного користувача
  • GET /posts — всі пости

Бонус

• Додай пагінацію для постів (по 5 на сторінку)
• Додай можливість створити новий пост (POST-запит — JSONPlaceholder симулює створення)
• Зберігай улюблених користувачів в localStorage

Критерії оцінки