Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yevheniidatsenko/goit-advancedjs-hw-03
Cats API-Explorer (HTTP Requests and Fetch API)
https://github.com/yevheniidatsenko/goit-advancedjs-hw-03
api goit goit-advancedjs-hw-03 goit-js-hw-10 html5 http-requests javascipt
Last synced: 5 days ago
JSON representation
Cats API-Explorer (HTTP Requests and Fetch API)
- Host: GitHub
- URL: https://github.com/yevheniidatsenko/goit-advancedjs-hw-03
- Owner: yevheniidatsenko
- Created: 2023-11-26T21:14:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-28T22:52:50.000Z (about 1 year ago)
- Last Synced: 2023-11-28T23:22:28.223Z (about 1 year ago)
- Topics: api, goit, goit-advancedjs-hw-03, goit-js-hw-10, html5, http-requests, javascipt
- Language: JavaScript
- Homepage: https://yevheniidatsenko.github.io/goit-advancedjs-hw-03/
- Size: 2.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Завдання
Створити фронтенд частину застосунку для пошуку інформації про кота за його
породою.
## HTTP-запити
Використовувати публічний The Cat API.
Для використання ключа необхідно використовувати HTTP-заголовок x-api-key.
Рекомендується використовувати axios та додати заголовок до всіх запитів.
```
import axios from "axios";
axios.defaults.headers.common["x-api-key"] = "твій ключ";
```
## Колекція порід
Під час завантаження сторінки має виконуватися HTTP-запит за колекцією порід.
Для цього необхідно виконати GET-запит на ресурс
[https://api.thecatapi.com/v1/breeds](https://api.thecatapi.com/v1/breeds), що
повертає масив об'єктів. У разі успішного запиту, необхідно наповнити
select.breed-select опціями так, щоб value опції містило id породи, а в
інтерфейсі користувачеві відображалася назва породи.
Написати функцію fetchBreeds(), яка виконує HTTP-запит і повертає проміс із
масивом порід - результатом запиту. Винеси її у файл cat-api.js та зроби
іменований експорт.
## Інформація про кота
Коли користувач обирає якусь опцію в селекті, необхідно виконувати запит за
повною інформацією про кота на ресурс
[https://api.thecatapi.com/v1/images/search](https://api.thecatapi.com/v1/images/search).
Не забудь вказати в цьому запиті параметр рядка запиту breed_ids з
ідентифікатором породи.
Ось як буде виглядати URL-запит для отримання повної інформації про собаку за
ідентифікатором породи:
```
https://api.thecatapi.com/v1/images/search?breed_ids=ідентифікатор_породи
```
Написати функцію fetchCatByBreed(breedId), яка очікує ідентифікатор породи,
робить HTTP-запит і повертає проміс із даними про кота - результатом запиту.
Винеси її у файл cat-api.js і зроби іменований експорт.
Якщо запит був успішним, під селектом у блоці div.cat-info з'являється
зображення і розгорнута інформація про кота: назва породи, опис і темперамент.
## Опрацювання стану завантаження
Поки відбувається будь-який HTTP-запит, необхідно показувати завантажувач -
елемент p.loader. Поки запитів немає або коли запит завершився, завантажувач
необхідно приховувати. Використовуй для цього додаткові CSS класи.
Поки виконується запит за списком порід, необхідно приховати select.breed-select
та показати p.loader.
Поки виконується запит за інформацією про кота, необхідно приховати div.cat-info
та показати p.loader.
Як тільки будь-який запит завершився, p.loader треба приховати.
## Опрацювання помилки
Якщо у користувача сталася помилка під час будь-якого HTTP-запиту, наприклад,
впала мережа, була втрата пакетів тощо, тобто проміс було відхилено, необхідно
відобразити елемент p.error, а при кожному наступному запиті приховувати його.
Використовуй для цього додаткові CSS класи.
Протестувати працездатність відображення помилки дуже просто - зміни адресу
запиту додавши в кінець будь-який символ, наприклад замість
[https://api.thecatapi.com/v1/breeds](https://api.thecatapi.com/v1/breeds)
використовай
[https://api.thecatapi.com/v1/breeds123](https://api.thecatapi.com/v1/breeds123).
Запит отримання списку порід буде відхилено з помилкою. Аналогічно для запиту
інформації про кота за породою.
## Інтерфейс
Додавання мінімального оформлення елементів інтерфейсу.
Замість select.breed-select можна використовувати будь-яку бібліотеку з
красивими селектом, наприклад
[https://slimselectjs.com/](https://slimselectjs.com/).
Замість p.loader можна використовувати будь-яку бібліотеку з красивими
CSS-завантажувачами, наприклад
[https://cssloaders.github.io/](https://cssloaders.github.io/).
Замість завантажувача p.error можна використовувати будь-яку бібліотеку з
гарними сповіщеннями, наприклад iziToast.