goit js hw 11

Lisez dans d'autres langues: ukrainien, anglais.

Critères d'acceptation

• Le référentiel goit-js-hw-11 a été créé.
• Les devoirs contient deux liens: sur les fichiers de sortie et une page de travail sur GitHub Pages .
• La console manque d'erreurs et d'avertissements lors de l'ouverture d'une page de vie de la tâche.
• Le projet est assemblé à l'aide de palette-template.
• La bibliothèque Axios a été utilisée pour les demandes HTTP.
• La syntaxe async/await est utilisée.
• La bibliothèque Notiflix a été utilisée pour les messages.
• Le code est formulé à l'aide Prettier .

La tâche consiste à trouver des images

Créez un front de l'application de la recherche et de la visualisation des images par mot-clé. Ajoutez la conception des éléments d'interface. Voir le Demo-video de l'application.

Image-search-ppp-dmo.mp4

Le formulaire de recherche

Le formulaire contient d'abord dans le document HTML. L'utilisateur entrera une ligne à rechercher dans une zone de texte et le formulaire du formulaire doit être fait par demande HTTP.

 < form class =" search-form " id =" search-form " >
  < input
    type =" text "
    name =" searchQuery "
    autocomplete =" off "
    placeholder =" Search images... "
  />
  < button type =" submit " > Search </ button >
</ form > 

Http-ask

Utilisez une API publique Pixabay pour un soutien. Inscrivez-vous, obtenez votre clé d'accès unique et familiarisez-vous avec la documentation.

Liste des options de chaîne de requête que vous devez indiquer:

• key est votre clé d'accès unique à l'API.
• q est le terme pour la recherche. Ce que l'utilisateur entrera.
• image_type - Type d'image. Seules les photos sont nécessaires, alors mettez photo .
• orientation - Orientation de la photo. Mettez la valeur de horizontal .
• safesearch - filtre par âge. Mettez une true valeur.

La réponse sera un éventail d'images satisfaisant aux critères des paramètres de requête. Chaque image est décrite par un objet à partir duquel vous ne vous intéressez que par les propriétés suivantes:

• webformatURL - Lien vers une petite image pour la liste des cartes.
• largeImageURL - Lien vers une grande image.
• tags - une ligne avec une description d'image. Convient pour un attribut alt .
• likes - le nombre de likes.
• views - Le nombre de vues.
• comments - Le nombre de commentaires.
• downloads - Le nombre de téléchargements.

Si un support renvoie un tableau vide, alors rien d'adapté n'a été trouvé. Dans ce cas, affichez un message avec le texte "Sorry, there are no images matching your search query. Please try again." . Utilisez la bibliothèque Notiflix pour les messages.

Galerie et carte d'image

L'élément div.gallery est d'abord contenu dans le document HTML, et il doit être loué pour les marques de cartes d'image. Lorsque vous recherchez un nouveau mot-clé, vous devez nettoyer complètement le contenu de la galerie afin de ne pas mélanger les résultats.

 < div class =" gallery " >
  <!-- Картки зображень -->
</ div >

Modèle de balisage de la carte d'une image pour la galerie.

 < div class =" photo-card " >
  < img src ="" alt ="" loading =" lazy " />
  < div class =" info " >
    < p class =" info-item " >
      < b > Likes </ b >
    </ p >
    < p class =" info-item " >
      < b > Views </ b >
    </ p >
    < p class =" info-item " >
      < b > Comments </ b >
    </ p >
    < p class =" info-item " >
      < b > Downloads </ b >
    </ p >
  </ div >
</ div > 

Pagination

L'API Pixabay prend en charge la pagination et fournit des paramètres page et per_page . Assurez-vous que chaque réponse vient 40 objets (par défaut 20).

• La valeur initiale du paramètre page doit être 1 .
• À chaque demande ultérieure, elle doit être augmentée de 1 .
• Lors de la recherche d'un nouveau mot-clé, la valeur page doit être renvoyée à l'original, car il y aura une toison sur une nouvelle collection d'images.

Le document HTML contient déjà un marquage de bouton, sur le clic sur lequel vous devez faire une demande pour le prochain groupe d'images et ajouter le marquage aux éléments existants de la galerie.

 < button type =" button " class =" load-more " > Load more </ button >

• Dans l'état initial, le bouton doit être caché.
• Après la première demande, le bouton apparaît dans l'interface sous la galerie.
• Dans le cas de re-subform, le bouton est d'abord caché, et après la demande, il s'affiche à nouveau.

En réponse, le soutien renvoie totalHits - le nombre total d'images qui répondent au critère de recherche (pour un compte gratuit). Si l'utilisateur a atteint la fin de la collection, masquez le bouton et publiez un message avec le texte "We're sorry, but you've reached the end of search results." .

En plus

️ La fonctionnalité suivante n'est pas requise pour la tâche, mais sera une bonne pratique supplémentaire.

Message

Après la première demande avec chaque nouvelle recherche, recevez un message qui dira combien d'images ont été trouvées ( totalHits ). Texte du message - "Hooray! We found totalHits images."

Bibliothèque SimpleLightbox

Ajoutez une grande version de l'image avec la bibliothèque Simplelightbox pour une galerie complète.

• Le marquage devra envelopper chaque carte d'image dans le lien, comme indiqué dans la documentation.
• La bibliothèque contient une cartode refresh() , qui doit être appelée chaque fois qu'un nouveau groupe d'images est ajouté.

Afin de connecter le code de la bibliothèque CSS au projet, vous devez ajouter une autre importation, sauf comme décrit dans la documentation.

 // Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ;

Faire défiler la page

Faites un défilement fluide de la page après avoir demandé et joué à chaque groupe d'images ultérieur. Voici un code de code, mais comprenez-le vous-même.

 const { height : cardHeight } = document
  . querySelector ( '.gallery' )
  . firstElementChild . getBoundingClientRect ( ) ;

window . scrollBy ( {
  top : cardHeight * 2 ,
  behavior : 'smooth' ,
} ) ;

Classe sans fin

Au lieu du bouton de chargement plus, vous pouvez faire un téléchargement sans fin d'images pendant le défilement. Nous vous donnons une liberté d'action totale dans la mise en œuvre, vous pouvez utiliser toutes les bibliothèques.

---

Modèle de colis

Ce projet était un Sozdan chez Parcel. Pour le marquage et l'ajustement de l'ancrage de l'exposition à sélectionner pour la documentation.

Préparation d'un nouveau projet

1. Faites correspondre la Version LTS de Node.js. Télécharger et les institutions si cela est nécessaire.
2. Le verre est le référentiel.
3. parcel-project-template nash nashmi.
4. Créez un nouveau référentiel vide sur GitHub.
5. Projet OTKROI dans VSCODE, Démarrez le termine et sacrifiez le projet avec les référenciers GitHub sur les instructions.
6. Institutions du projet dans l'équipe de Terminal npm install .
7. Démarrer le mode de reproduction, publié la commande npm start .
8. Accédez au navigateur sur http: // localhost: 1234. Ce tracé sera remplacé par l'homme storisé auto dans les fichiers du projet.

Fichiers et dossiers

• Tous les styles de fichiers Parshali se trouvent dans le Papquet src/sass et sont importés dans les fichiers de pages. Par exemple, pour index.html , le fichier de style est appelé index.scss .
• Identifiez dans le dossier src/images . Le chorus les optimise, mais uniquement avec la déploration de la version du projet du projet. Tout va à la vue de votre ordinateur, donc cela peut être beaucoup de temps sur les voitures faibles.

DÉPLOYER

Pour ajuster le projet Depaza, il est nécessaire de dessiner beaucoup de shags supplémentaires sur le réglage de votre référentiel. Venez Settings et dans les sous-secteurs Actions Sélectionnez l'élément General .

Faites glisser le tracé vers le post -secia, dans lequel l'Opacia est prise sur la piste sur la trace de l'image et le plaisir de Save . Sans ces tuns dans les scoops, il n'y aura pas de mal à l'automatisation du processus de déployé.

La version du projet du projet sera automatique et arrêtée sur les pages GitHub, dans le gh-pages Wet, le temps du COGD est mis à jour main humide. Par exemple, une pusha droite ou un pusha retesté par la piscine ou une pusha droite. Pour cela, vous devez déposer un package.json Fichier homepage et build Script, étouffé your_username et your_repo_name pour vous et envoyer le nom sur GitHub.

 "homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
  "build" : " parcel build src/*.html --public-url /your_repo_name/ "
},

Entrez presque dans le réglage GitHub-Repository ( Settings > Pages ) et tirera la production de fichiers de fichiers à partir du dossier /root de gh-pages , si ce n'est pas beaucoup de automatique.

Statut de Depaza

Le statut de déploiement d'un commutateur extrême est conquis par l'icône de l'ego du yoditicator.

• La ictère - La collection et DePlese of the Project.
• La couleur verte - le Deploi s'est terminé par un fond.
• La couleur rouge - au temps de la peluche, du scoop ou du déploiement du déploiement.

Les informations détaillées douloureuses sur le statut peuvent être trempées dans l'icône et dans le dépassement de l'interrupteur Windows sur Details .

Intrigue en direct

En raison du temps, quelques flottes, je vis l'intrigue, vous pouvez mijoter à l'adresse indiquée dans homepage . Par exemple, je vis un mandat pour ce référentiel https://goitacademy.github.io/parcel-project-Template.

Si une parcelle de désert est ouverte, pour tuer Console du NOR à la vue des packs incorporés de fichiers de projet CSS et JS ( 404 ). Stork All in Taby Irregular Signification de homepage ou du script build dans File package.json .

Comment va ce travail

1. Après chaque poussée, main script spécial (action github) dans le fichier .github/workflows/deploy.yml est lancé.
2. Tous les réposants de fichiers sont compilés sur le serveur, où le projet est initialisé et passe la récolte devant le Deplo.
3. Si toutes les étapes passaient tellement, la seule production du fichier de projet projette dans gh-pages . Dans le cas opposé, le script logique sera donné dans le problème.