https://github.com/danretegan/cat-information-search
https://github.com/danretegan/cat-information-search
axios javascript notiflix slimselect
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/danretegan/cat-information-search
- Owner: danretegan
- Created: 2023-11-17T07:46:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-25T11:57:29.000Z (over 1 year ago)
- Last Synced: 2025-01-03T00:34:28.592Z (9 months ago)
- Topics: axios, javascript, notiflix, slimselect
- Language: JavaScript
- Homepage: https://danretegan.github.io/cat-information-search/
- Size: 3.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.CatFinder.md
Awesome Lists containing this project
README
Este creat repozitoriul goit-js-hw-10. Când accesați pagina live a unui
exercițiu, nu există erori sau avertismente în consolă. Proiectul este construit
cu ajutorul parcel-project-template. Codul este formatat de Prettier.
Fișiere start Descărcați fișierul de start index.html cu structura de bază a
sarcinii. Copiați-l pentru proiectul dvs. în folderul src în
parcel-project-template.
Sarcină - Cat Finder Creați partea frontend a aplicației de căutare a
informațiilor despre pisici în funcție de rasă. Vizionați filmulețul
demonstrativ al aplicației și folosiți-l ca punct de referință pentru
funcționalitatea necesară.
HTTP-cereri Folosiți The Cat API public. Pentru a începe trebuie să vă
înregistrați și să primiți cheia de acces unică, care trebuie să fie atașată
fiecărei cereri. Accesați pagina principală și apăsați butonul de mai jos,
Signup for free, urmați instrucțiunile și cheia va fi trimisă la adresa e-mail
pe care ați furnizat-o.
Cheia trebuie utilizată în antetul HTTP x-api-key. Este recomandat ca axios să
fie utilizat și ca un antet să fie adăugat pentru toate interogările.
import axios from "axios";
axios.defaults.headers.common["x-api-key"] = "cheia ta";
Colecția de rase Când pagina este încărcată, trebuie să se execute HTTP-cererea
pentru colecția de rase. Pentru asta trebuie efectuată o cerere GET către adresa
https://api.thecatapi.com/v1/breeds, returnând o matrice de obiecte. Dacă
solicitarea este reușită, trebuie de completat select.breed-select cu opțiuni,
astfel încât value opțiunii să conțină id rasei, iar interfața utilizatorului să
afișeze denumirea rasei.
Scrieți funcția fetchBreeds(), care creează o cerere HTTP și returnează Promise
cu o matrice de rase - rezultatul cererii. Extrageți-o în fișierul cat-api.js și
exportați-o cu nume.
Informații despre pisică Când utilizatorul selectează o anumită opțiune în
selector, este necesar să se efectueze o cerere pentru informații complete
despre pisică la adresa https://api.thecatapi.com/v1/images/search. Nu uitați să
specificați în această interogare parametrul șirului interogării breed_ids cu
identificatorul rasei.
Iată cum va arăta URL-ul pentru solicitarea tuturor informațiilor despre câine,
în funcție de ID-ul rasei.
https://api.thecatapi.com/v1/images/search?breed_ids=identificator_rasă
Scrieți funcția fetchCatByBreed(breedId), care așteaptă identificarea rasei,
creează o cerere HTTP și returnează un promise cu informații despre pisică -
rezultatul cererii. Extrageți-o în fișierul cat-api.js și exportați-o cu nume.
Dacă cererea a fost reușită, sub selector, în blocul div.cat-info va apărea
imaginea și informații detaliate despre pisică: denumirea rasei, descrierea și
temperamentul.
Procesarea stării de încărcare Pe perioada efectuării cererii HTTP, trebuie să
se afișeze loaderul - elementul p.loader. Dacă nu există cereri sau dacă cererea
s-a încheiat, loaderul trebuie ascuns. Folosiți clasele CSS suplimentare pentru
acest lucru.
În timp ce se desfășoară cererea pentru lista de rase, select.breed-select
trebuie ascuns și trebuie afișat p.loader. În timp ce se desfășoară cererea
informațiilor despre pisică, div.cat-info trebuie ascuns și trebuie afișat
p.loader. Când se încheie orice cerere, p.loader trebuie ascuns. Tratarea
erorilor Dacă utilizatorul întâmpină o eroare la orice solicitare HTTP, de
exemplu, dacă a căzut rețeaua, a apărut o pierdere de pachete etc, adică
promise-ul a fost respins, trebuie să se afișeze elementul p.error, și să fie
ascuns la fiecare solicitare ulterioară. Folosiți clase CSS suplimentare pentru
a realiza acest lucru.
Pentru a testa dacă eroarea se afișează, modificați adresa cererii adăugând
orice caracter la sfârșit, de exemplu, în loc de
https://api.thecatapi.com/v1/breeds, folosiți
https://api.thecatapi.com/v1/breeds123. Cererea de obținere a listei de rase va
fi respinsă cu o eroare. La fel și pentru solicitarea informațiilor despre
pisici, în funcție de rasă.
Interfața Adăugați un design minimalist pentru elementele de interfață. În loc
de select.breed-select, puteți folosi orice librărie cu select, de exemplu
https://slimselectjs.com/ În loc de p.loader, puteți folosi orice librărie cu
CSS loaders, de exemplu https://cssloaders.github.io/ În loc de p.error, puteți
folosi orice librărie cu alerte, de exemplu Notiflix
---