goit js hw 11
1.0.0
Lesen Sie in anderen Sprachen: Ukrainisch, Englisch.
goit-js-hw-11 -Repository wurde erstellt.GitHub Pages .async/await Syntax verwendet.Prettier formuliert.Erstellen Sie eine Vorderseite der Anwendung der Suche und Anzeige von Bildern nach Schlüsselwort. Fügen Sie das Design von Schnittstellenelementen hinzu. Siehe die Demo-Video der Anwendung.
Das Formular enthält zuerst im HTML -Dokument. Der Benutzer wird eine Zeile eingeben, um in ein Textfeld zu suchen, und die Form des Formulars muss durch HTTP -Anforderung erstellt werden.
< form class =" search-form " id =" search-form " >
< input
type =" text "
name =" searchQuery "
autocomplete =" off "
placeholder =" Search images... "
/>
< button type =" submit " > Search </ button >
</ form > Verwenden Sie eine Pixabay Public API für eine Unterstützung. Registrieren Sie sich, erhalten Sie Ihren einzigartigen Zugriffsschlüssel und kennen Sie die Dokumentation.
Liste der Optionen für Abfragestöne, die Sie angeben müssen:
key ist Ihr einzigartiger Zugriffstaste für API.q ist der Begriff für die Suche. Was der Benutzer eingeben wird.image_type - Bildtyp. Es werden nur Fotos benötigt, also photo Sie.orientation - Orientierung des Fotos. Setzen Sie den Wert von horizontal ein.safesearch - Filter nach Alter. Setzen Sie einen true Wert ein.Die Antwort wird eine Reihe von Bildern sein, die die Kriterien der Abfrageparameter erfüllen. Jedes Bild wird durch ein Objekt beschrieben, aus dem Sie nur an den folgenden Eigenschaften interessiert sind:
webformatURL - Link zu einem kleinen Bild für die Kartenliste.largeImageURL - Link zu einem großen Bild.tags - eine Linie mit einer Bildbeschreibung. Geeignet für ein Attribut alt .likes - die Anzahl der Likes.views - Die Anzahl der Ansichten.comments - die Anzahl der Kommentare.downloads - die Anzahl der Downloads. Wenn eine Unterstützung ein leeres Array zurückgibt, wurde nichts geeignetes gefunden. Zeigen Sie in diesem Fall eine Nachricht mit dem Text an. "Sorry, there are no images matching your search query. Please try again." . Verwenden Sie die Notiflix -Bibliothek für Nachrichten.
Das div.gallery -Element ist zuerst im HTML -Dokument enthalten und muss für Bildkartenmarkierungen gemietet werden. Bei der Suche nach einem neuen Schlüsselwort müssen Sie den Inhalt der Galerie vollständig reinigen, um die Ergebnisse nicht zu mischen.
< div class =" gallery " >
<!-- Картки зображень -->
</ div >Kartenmarkup -Vorlage eines Bildes für die 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 > Die Pixabay -API unterstützt die Pagination und bietet page und per_page -Parameter. Stellen Sie sicher, dass jede Antwort 40 Objekte enthält (Standard 20).
page muss 1 betragen.1 erhöht werden.page an die ursprüngliche zurückgegeben werden, da es ein Vlies für eine neue Bildsammlung gibt.Das HTML -Dokument enthält bereits eine Schaltflächenmarkierung, auf der Sie eine Anfrage für die nächste Gruppe von Bildern stellen und die markierten Markierung zu den vorhandenen Elementen der Galerie hinzufügen müssen.
< button type =" button " class =" load-more " > Load more </ button > Als Antwort gibt die Backing totalHits -Eigenschaft zurück - die Gesamtzahl der Bilder, die das Suchkriterium erfüllen (für ein kostenloses Konto). Wenn der Benutzer das Ende der Sammlung erreicht hat, verbergen Sie die Schaltfläche und geben Sie eine Nachricht mit dem Text "We're sorry, but you've reached the end of search results." .
Euen Die folgende Funktionalität ist für die Aufgabe nicht erforderlich, ist aber eine gute zusätzliche Praxis.
Erhalten Sie nach der ersten Anfrage bei jeder neuen Suche eine Nachricht, die besagt, wie viele Bilder gefunden wurden ( totalHits ). Nachrichtentext - "Hooray! We found totalHits images."
SimpleLightbox LibraryFügen Sie eine große Version des Bildes mit der SimplyLightbox -Bibliothek für eine vollständige Galerie hinzu.
refresh() Mattode, der jedes Mal aufgerufen werden muss, wenn eine neue Bildgruppe hinzugefügt wird.Um den CSS -Bibliothekscode mit dem Projekt zu verbinden, müssen Sie einen weiteren Import hinzufügen, außer wie in der Dokumentation beschrieben.
// Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ;Machen Sie eine reibungslose Scrollen der Seite, nachdem Sie jede nachfolgende Bildgruppe angefordert und abgespielt haben. Hier ist ein Codecode, aber verstehen Sie ihn selbst.
const { height : cardHeight } = document
. querySelector ( '.gallery' )
. firstElementChild . getBoundingClientRect ( ) ;
window . scrollBy ( {
top : cardHeight * 2 ,
behavior : 'smooth' ,
} ) ;Anstelle der Schaltfläche More Load können Sie beim Scrollen einen endlosen Download von Bildern durchführen. Wir geben Ihnen die volle Aktionsfreiheit bei der Implementierung, Sie können alle Bibliotheken verwenden.
Dieses Projekt war ein Sozdan in Parcel. Für die Markierung und Anpassung der Verankerung der Exposition, die zur Dokumentation ausgewählt werden soll.
parcel-project-template Nash Nashmi.npm install .npm start .src/sass -Papquet und werden in den Dateidateien von Seiten importiert. Zum Beispiel heißt index.html die Stildatei index.scss .src/images . Der Chorusianer optimiert sie, jedoch nur mit der Deploration der Projektversion des Projekts. Alles geht in den Anblick Ihres Computers, so dass es viel Zeit für die schwachen Autos sein kann. Um das Projekt DePaza anzupassen, müssen Sie viele zusätzliche Shags auf die Einstellung Ihres Repositorys zeichnen. Kommen Sie auf Settings und wählen Sie in den Actions das General Element aus.
Schieben Sie die Handlung in die Post -Secia, in der die Opakie in der Spur auf der Spur des Bildes und des Save aufgenommen wird. Ohne diese Tunks in den Scoops wird es eine Ungültigkeit für die Automatisierung des Bereitstellungsvorgangs geben.
Die Projektversion des Projekts wird automatisch sein und auf den Github-Seiten in der gh-pages -Nass gestoppt. Die Zeit des COGD wird main aktualisiert. Zum Beispiel eine gerade Pusha oder ein Pool-blockiertes Pusha oder ein gerader Pusha. Dazu müssen Sie eine homepage und das Skript build von package.json -Datei einreichen, your_username und your_repo_name Ihren eigenen und den Namen auf GitHub senden.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, Gehen Sie nahezu in die GitHub-Repository-Abstimmung ( Settings > Pages ) und zeichnen Sie die Produktion von Dateidatei aus dem Ordner /root der gh-pages heraus, wenn dies nicht viel automatisch ist.
Der Status eines Einsatzes eines extremen Putsy wird durch die Ikone des Ego des Yoditikators erobert.
Die schmerzhaften detaillierten Informationen über den Status können im Symbol und im Schalter der Windows -Schalter Details überschritten werden.
Aufgrund der Zeit, ein paar Flotten, lebe ich die Handlung, Sie können die in homepage angegebene Adresse köcheln lassen. Zum Beispiel lebe ich einen Mand für dieses Repository https://goitacademy.github.io/parcel-project-template.
Wenn eine Wüstenhandlung geöffnet wird, um Console des NOT -Anblicks der integrierten Packungen von CSS- und JS -Projektdateien zu töten ( 404 ). Storch All in Taby Unregelmäßige Bedeutung von homepage oder build Skript in package.json .
main spezielles Skript (GitHub -Aktion) aus der Datei .github/workflows/deploy.yml gestartet.gh-pages . Im gegenüberliegenden Fall wird im Logikskript im Problem angegeben.
