- Створено репозиторій
goit-js-hw-10
. - Домашня робота містить два посилання: на вихідні файли і робочу сторінку на
GitHub Pages
. - В консолі відсутні помилки і попередження під час відкриття живої сторінки завдання.
- Проект зібраний за допомогою parcel-project-template.
- Код відформатований за допомогою
Prettier
.
У папці src знайдеш стартові файли. Скопіюй їх собі у проект, повністю замінивши папку
src
в parcel-project-template. Для цього
завантаж увесь цей репозиторій як архів або використовуй
сервіс DownGit для завантаження окремої папки з репозиторія.
Створи фронтенд частину програми пошуку даних про країну за її частковою або повною назвою. Подивися демо-відео роботи програми.
Використовуй публічний API Rest Countries v2, а саме ресурс name, який повертає масив об'єктів країн, що задовольнили критерій пошуку. Додай мінімальне оформлення елементів інтерфейсу.
Напиши функцію fetchCountries(name)
, яка робить HTTP-запит на
ресурс name і повертає проміс з масивом країн -
результатом запиту. Винеси її в окремий файл fetchCountries.js
і зроби іменований експорт.
У відповіді від бекенду повертаються об'єкти, велика частина властивостей яких, тобі не знадобиться. Щоб скоротити обсяг переданих даних, додай рядок параметрів запиту - таким чином цей бекенд реалізує фільтрацію полів. Ознайомся з документацією синтаксису фільтрів.
Тобі потрібні тільки наступні властивості:
name.official
- повна назва країниcapital
- столицяpopulation
- населенняflags.svg
- посилання на зображення прапораlanguages
- масив мов
Назву країни для пошуку користувач вводить у текстове поле input#search-box
. HTTP-запити
виконуються при введенні назви країни, тобто на події input
. Але робити запит з кожним натисканням
клавіші не можна, оскільки одночасно буде багато запитів і вони будуть виконуватися в
непередбачуваному порядку.
Необхідно застосувати прийом Debounce
на обробнику події і робити HTTP-запит через 300мс
після
того, як користувач перестав вводити текст. Використовуй пакет
lodash.debounce.
Якщо користувач повністю очищає поле пошуку, то HTTP-запит не виконується, а розмітка списку країн або інформації про країну зникає.
Виконай санітизацію введеного рядка методом trim()
, це вирішить проблему, коли в полі введення
тільки пробіли, або вони є на початку і в кінці рядка.
Якщо у відповіді бекенд повернув більше ніж 10 країн, в інтерфейсі з'являється повідомлення про те,
що назва повинна бути специфічнішою. Для повідомлень використовуй
бібліотеку notiflix і виводь такий рядок
"Too many matches found. Please enter a more specific name."
.
Якщо бекенд повернув від 2-х до 10-и країн, під тестовим полем відображається список знайдених країн. Кожен елемент списку складається з прапора та назви країни.
Якщо результат запиту - це масив з однією країною, в інтерфейсі відображається розмітка картки з даними про країну: прапор, назва, столиця, населення і мови.
⚠️ Достатньо, щоб застосунок працював для більшості країн. Деякі країни, як-отSudan
, можуть створювати проблеми, оскільки назва країни є частиною назви іншої країни -South Sudan
. Не потрібно турбуватися про ці винятки.
Якщо користувач ввів назву країни, якої не існує, бекенд поверне не порожній масив, а помилку зі
статус кодом 404
- не знайдено. Якщо це не обробити, то користувач ніколи не дізнається про те, що
пошук не дав результатів. Додай повідомлення "Oops, there is no country with that name"
у разі
помилки, використовуючи бібліотеку notiflix.
⚠️ Не забувай про те, щоfetch
не вважає 404 помилкою, тому необхідно явно відхилити проміс, щоб можна було зловити і обробити помилку.