{"id":23248481,"url":"https://github.com/eujinnlucashow/cats-api","last_synced_at":"2025-10-25T20:12:58.860Z","repository":{"id":205519203,"uuid":"714432590","full_name":"EuJinnLucaShow/cats-api","owner":"EuJinnLucaShow","description":"The Cat API","archived":false,"fork":false,"pushed_at":"2023-12-18T06:07:40.000Z","size":1853,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-28T04:08:31.382Z","etag":null,"topics":["advancedjs","api","goit","homework","javascript","js","localstorage","vite"],"latest_commit_sha":null,"homepage":"https://eujinnlucashow.github.io/cats-api/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EuJinnLucaShow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-11-04T21:31:20.000Z","updated_at":"2024-09-23T13:25:55.000Z","dependencies_parsed_at":"2023-12-18T07:25:55.455Z","dependency_job_id":"3042d005-fe8c-4632-9c11-016829e9207a","html_url":"https://github.com/EuJinnLucaShow/cats-api","commit_stats":null,"previous_names":["eujinnlucashow/goit-advancedjs-hw-03","eujinnlucashow/cats-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/EuJinnLucaShow/cats-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EuJinnLucaShow%2Fcats-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EuJinnLucaShow%2Fcats-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EuJinnLucaShow%2Fcats-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EuJinnLucaShow%2Fcats-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EuJinnLucaShow","download_url":"https://codeload.github.com/EuJinnLucaShow/cats-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EuJinnLucaShow%2Fcats-api/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263499193,"owners_count":23476021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advancedjs","api","goit","homework","javascript","js","localstorage","vite"],"created_at":"2024-12-19T08:13:58.509Z","updated_at":"2025-10-25T20:12:53.826Z","avatar_url":"https://github.com/EuJinnLucaShow.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Критерії приймання\n\n- Створено репозиторій `goit-advancedjs-hw-03`.\n- Домашня робота містить два посилання: на вихідні файли і робочу сторінку на\n  `GitHub Pages`.\n- В консолі відсутні помилки і попередження під час відкриття живої сторінки\n  завдання.\n- До роботи прiкрiплено файл репозиторiю у форматi `zip`.\n- Проект зібраний за допомогою\n  [vanilla-app-template](https://github.com/goitacademy/vanilla-app-template).\n- Код відформатований за допомогою `Prettier`.\n\n#### Формат оцінювання:\n\n- Оцінка від 0 до 100\n\n#### Формат здачi:\n\n- Два посилання: на вихідні файли і робочу сторінку на `GitHub Pages`\n  Прикрiплений файл репозиторію у форматi zip\n\n## Стартові файли\n\n[Завантажуй стартові файли](https://minhaskamal.github.io/DownGit/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Fjavascript-homework%2Ftree%2Fmain%2Fv2%2F10%2Fsrc)\nз базовою розміткою та стилями завдання. Скопіюй їх собі в проєкт, повністю\nзамінивши папку src у\n[vanilla-app-template](https://github.com/goitacademy/vanilla-app-template).\n\n## Завдання - Котопошук\n\nСтвори фронтенд частину застосунку для пошуку інформації про кота за його\nпородою. Подивися демо відео роботи програми, використовуй його як орієнтир для\nнеобхідного функціоналу.\n\n[Демо-відео](./assets/promo.mp4)\n\n## HTTP-запити\n\nВикористовуй публічний The Cat API. Для початку роботи необхідно зареєструватися\nй отримати унікальний ключ доступу, щоб прикріплювати його до кожного запиту.\nЗаходимо на головну сторінку та натискаємо нижче кнопку Signup for free,\nдотримуємося інструкції, ключ буде надіслано на вказану пошту.\n\nДля використання ключа необхідно використовувати HTTP-заголовок x-api-key.\nРекомендується використовувати axios та додати заголовок до всіх запитів.\n\nimport axios from \"axios\";\n\naxios.defaults.headers.common[\"x-api-key\"] = \"твій ключ\";\n\n## Колекція порід\n\nПід час завантаження сторінки має виконуватися HTTP-запит за колекцією порід.\nДля цього необхідно виконати GET-запит на ресурс\nhttps://api.thecatapi.com/v1/breeds, що повертає масив об'єктів. У разі\nуспішного запиту, необхідно наповнити select.breed-select опціями так, щоб value\nопції містило id породи, а в інтерфейсі користувачеві відображалася назва\nпороди.\n\nНапиши функцію fetchBreeds(), яка виконує HTTP-запит і повертає проміс із\nмасивом порід - результатом запиту. Винеси її у файл cat-api.js та зроби\nіменований експорт.\n\n## Інформація про кота\n\nКоли користувач обирає якусь опцію в селекті, необхідно виконувати запит за\nповною інформацією про кота на ресурс\nhttps://api.thecatapi.com/v1/images/search. Не забудь вказати в цьому запиті\nпараметр рядка запиту breed_ids з ідентифікатором породи.\n\nОсь як буде виглядати URL-запит для отримання повної інформації про собаку за\nідентифікатором породи:\n\nhttps://api.thecatapi.com/v1/images/search?breed_ids=ідентифікатор_породи\n\nНапиши функцію fetchCatByBreed(breedId), яка очікує ідентифікатор породи, робить\nHTTP-запит і повертає проміс із даними про кота - результатом запиту. Винеси її\nу файл cat-api.js і зроби іменований експорт.\n\nЯкщо запит був успішний, під селектом у блоці div.cat-info з'являється\nзображення і розгорнута інформація про кота: назва породи, опис і темперамент.\n\n## Опрацювання стану завантаження\n\nПоки відбувається будь-який HTTP-запит, необхідно показувати завантажувач -\nелемент p.loader. Поки запитів немає або коли запит завершився, завантажувач\nнеобхідно приховувати. Використовуй для цього додаткові CSS класи.\n\n- Поки виконується запит за списком порід, необхідно приховати\n  select.breed-select та показати p.loader.\n- Поки виконується запит за інформацією про кота, необхідно приховати\n  div.cat-info та показати p.loader.\n- Як тільки будь-який запит завершився, p.loader треба приховати.\n\n## Опрацювання помилки\n\nЯкщо у користувача сталася помилка під час будь-якого HTTP-запиту, наприклад,\nвпала мережа, була втрата пакетів тощо, тобто проміс було відхилено, необхідно\nвідобразити елемент p.error, а при кожному наступному запиті приховувати його.\nВикористовуй для цього додаткові CSS класи.\n\nПротестувати працездатність відображення помилки дуже просто - зміни адресу\nзапиту додавши в кінець будь-який символ, наприклад замість\nhttps://api.thecatapi.com/v1/breeds використай\nhttps://api.thecatapi.com/v1/breeds123. Запит отримання списку порід буде\nвідхилено з помилкою. Аналогічно для запиту інформації про кота за породою.\n\n## Інтерфейс\n\n- Додай мінімальне оформлення елементів інтерфейсу.\n- Замість select.breed-select можеш використовувати будь-яку бібліотеку з\n  красивими селектом, наприклад https://slimselectjs.com/\n- Замість p.loader можеш використовувати будь-яку бібліотеку з красивими\n  CSS-завантажувачами, наприклад https://cssloaders.github.io/\n- Замість завантажувача p.error можеш використовувати будь-яку бібліотеку з\n  гарними сповіщеннями, наприклад iziToast\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feujinnlucashow%2Fcats-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feujinnlucashow%2Fcats-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feujinnlucashow%2Fcats-api/lists"}