Projeto de API JavaScript: aplicativo de pesquisa de imagens

1. Einführung: Hallo an alle in diesem Kurs, wir werden die Photosearch-App mit JavaScript einbauen So wird unsere Photosearch-App aussehen, und Sie können in dieser App nach beliebigen Fotos suchen. Ich möchte nach Fotos suchen, die sich auf Autos beziehen Ich kann einfach Auto in dieses Eingabefeld eingeben und auf die Suchschaltfläche klicken und ich erhalte Fotos zum Thema Auto Wie Sie sehen können, haben wir Fotos zum Thema Auto. Wenn Sie mehr Fotos zum Suchstrum generieren möchten , können Sie auf diese weitere Schaltfläche klicken. Wie Sie sehen, haben wir mehr Fotos zum Suchstrum Von wo wir diese Fotos bekommen, beziehen wir diese Fotos von der Pexels Um dieses Projekt zu erstellen, werden wir die Pexels-API verwenden. Jetzt suche ich nach Fotos, die sich auf die Natur beziehen. Um nach Fotos zu suchen, die sich auf die Natur beziehen, müssen Sie Natur eingeben und dann auf diese Suchschaltfläche klicken . Wie Sie sehen können, haben wir jetzt Fotos mit Bezug zur Natur. Wenn Sie auf diese Schaltfläche „Mehr“ klicken, erhalten Sie mehr Fotos mit Bezug zur Natur. Sie haben also mehr Fotos mit Bezug zur Natur. Und wir haben in diesem Projekt auch trendige Foto-Sexons. Laden Sie dieses Projekt einfach neu. Dies ist der Trendfoto-Sexon in diesem Projekt, und dieser Trendfoto-Sexon wird vom Pixel-Team generiert , was bedeutet, dass dieser Trendfoto-Sexon Wenn du also wissen willst, wie man ein solches Projekt erstellt, kannst du an diesem Kurs teilnehmen und wir beginnen mit dem Aufbau dieses Projekts ab beginnen mit dem Aufbau dieses 2. Projektaufbau: Lassen Sie uns dieses Setup für unser Projekt in diesem Video durchführen. Um Code zu schreiben, verwenden wir den Visual Studio-Code-Editor und müssen einen Ordner im Visual Studio-Code-Editor erstellen. Ich habe bereits einen Ordner erstellt. Der Ordnername lautet Image Search Project, und Sie müssen drei Dateien erstellen HTML-Datei, JavaScript-Datei und CSS-Datei. Ich habe bereits eine HTML-Datei erstellt. Der Name der HTM-Datei ist in HTML indexiert. Und dann stylen Sie CSS und ein Punkt js. Lassen Sie uns jetzt HTML-Boilerplate schreiben. Um HTML Bilerlt zu schreiben, öffne ich meine HTML-Datei, also habe ich meine Extremal-Datei bereits geöffnet und in dieser HTML-Datei und in dieser HTML-Datei gebe ich einfach exclaim in Mark ein und klicke auf Enter und VS Code schreibt automatisch also habe ich meine Extremal-Datei bereits geöffnet und in dieser HTML-Datei gebe ich einfach exclaim in Mark ein und klicke auf Enter und VS Code schreibt automatisch das HTML-Boilerplate. Ich gehe unter dieses Titeldeck und verlinke diese Style-CSS-Datei . Um eine CSS-Datei im Stil zu verknüpfen, müssen Sie einfach Link eingeben und einfach auf dieses Linkspalten-CSS klicken. In dieser HRF müssen Sie den Dateinamen eingeben. Mein Dateiname ist Styloid CSS und in dieser HRF er in Styloid CSS geschrieben Das bedeutet, dass meine CSS-Datei mit meiner HTML-Datei verknüpft ist. Jetzt verlinke ich meine JavaScript-Datei mit dieser HTM-Datei. Um eine JavaScript-Datei zu verknüpfen, muss ich ein Scriptex erstellen, also gebe ich script ein, klicke dann auf Script Column SRC und gebe dann den Dateinamen meiner JavaScript-Datei Der endgültige Name meiner JavaScript-Datei lautet also app dot js sol type app dot Da wir das Symbol in unserem Projekt verwenden werden, zeige ich das Symbol , das wir verwenden werden. Dies ist das Symbol, das wir verwenden werden, bedeutet dieses Suchsymbol in unserem Projekt, um dieses Suchsymbol zu erhalten, wir werden diese Website verwenden, nicht diese Website, wir werden Font Awesome verwenden. Um den CDN-Link von Font Awesome zu erhalten, müssen Sie einfach CDN Js in Ihrem Browser suchen und auf diese Website klicken oder diese Website öffnen Und in dieser Sucheingabe suche einfach nach Font Awesome, also gebe ich Font Awesome ein und klicke auf diesen ersten Link Und von hier aus müssen Sie auf diese Schaltfläche klicken, Link Tech-Schaltfläche kopieren, auf diese Schaltfläche klicken und Ihr Link wird kopiert. Jetzt öffne ich meinen Visual Studio-Code und füge ihn hier unter dieser Linktechnologie Control V und meine Link-Technologie werden mit dem CDN-Link eingefügt Das ist der CDN-Link, und das ist die Das ist der CDN-Link, und das ist die Link-Technologie Lassen Sie uns jetzt überprüfen, was wir sonst noch tun wollen. Da wir auf dieser Website Roboter zur Schrift verwenden werden, also um dieses Projekt zu erstellen, werden wir die Roboto-Schrift verwenden Um diese Schriftart zu erhalten, werden wir diese Website, Google Phones, verwenden Suchen Sie einfach in Ihrem Browser nach Google Fonts und Sie erhalten diese Website. Der Link zur Website lautet phons.google.com. Mit dieser Schaltfläche für die Suche nach Schriftarten können Sie nach Roboto suchen, oder Sie finden Die erste Schriftfamilie selbst ist die Roboto-Schriftfamilie . Klicken Sie einfach darauf Wenn Sie Roboto hier finden, können Sie darauf klicken oder hier nach der Roboto-Schrift suchen Ich klicke auf dieses Roboto und von hier aus Schaltfläche „Finden“. Und ich klicke auf „Code zum Einbetten abrufen und dann auf diese Eingabe und kopiere diesen Teil Nur diesen musst du kopieren, diese Eingabe-URL musst du kopieren. Kopieren Sie das und öffnen Sie Ihren Visual Studio-Code und öffnen Sie Ihre CSS-Datei. In diese CSS-Datei werde ich den Link einfügen, den wir kopieren. Ich habe diese Eingabe-URL in meine CSS-Datei eingefügt. Das ist es für unser Setup-Video. Jetzt fangen wir an, ETL-Code aus dem nächsten Video zu schreiben. 3. API-Schlüssel erstellen: Jetzt werden wir den APA-Schlüssel aus der Pexels API generieren. Warum wir Pexels APA verwenden, wir verwenden Pexels APA, wir verwenden Pexels So wie ich hier auf dieser Website nach Natur gesucht habe und nach der Suche nach Natur habe ich Fotos bekommen, die mit der Natur zu tun haben Von wo ich diese Fotos bekommen habe, habe ich diese Fotos von der Pexels Das heißt, um Fotos zu bekommen, werden wir die Pexels-API verwenden und um die Pexels-API zu verwenden, müssen Sie ApaKey generieren und um ApaKey zu generieren, müssen Sie ein Konto bei Pexels müssen Sie ApaKey generieren und um ApaKey zu generieren, müssen Sie erstellen werden wir die Pexels-API verwenden und um die Pexels-API zu verwenden, müssen Sie ApaKey generieren und um ApaKey zu generieren, müssen Sie ein Konto bei Pexels erstellen. Es ist sehr einfach, ein Konto bei Pixels zu erstellen. Suchen Sie einfach in Ihrem Browser nach der Pexels API und klicken Sie auf diesen ersten Link oder öffnen Sie diese erste Website Oder Sie können diese URL eingeben, hier ist die URL px.com slash APSASF Sie können auf diese Schaltfläche „ Erste Schritte“ oder auf die Schaltfläche „Beitreten“ klicken oder Ich klicke auf diese Schaltfläche „Beitreten“. Ich werde nicht auf diese Schaltfläche „Beitreten“ klicken. Die Schaltfläche „Beitreten“ macht etwas anderes. Ich klicke auf die Schaltfläche Getted selbst und von hier aus auf diese Anmeldeschaltfläche Wenn Sie bereits ein Konto bei Pexels haben, erhalten Sie diese Anmeldeschaltfläche Wenn Sie noch kein Konto haben, müssen Sie auf Ich möchte herunterladen klicken und dann können Sie hier Ihr Konto erstellen Ich habe bereits ein Konto, also klicke ich auf die Schaltfläche Anmelden Nachdem Sie sich bei Pexels angemeldet haben, werden Sie diese Art von Oberfläche sehen Jetzt müssen Sie nur noch auf die Schaltfläche Zurück klicken. Oder Sie können auf dieses Pexels-Symbol klicken. Und Sie können API in diese URL eingeben oder diese Website erneut öffnen Aber jetzt möchte ich auf diese Slash-API klicken und von hier aus können Sie auf Ihre APK klicken Anstatt der Schaltfläche „Erste Schritte“ erhalten wir jetzt Ihre APK, nachdem Sie unser Konto erstellt haben. Klicken Sie einfach auf diese Schaltfläche, Ihre APAC-Schaltfläche Wir haben also erfolgreich unseren APAKey generiert. Verliere diese APK jetzt nicht. Sie können diese APK einfach in Ihrem Projektordner speichern. Also speichere ich diese APK einfach in meinem Projektordner und du musst deine eigene APK erstellen. Benutze mein APK nicht , weil ich dieses APK lösche und du dieses Pexels APA nicht verwenden kannst Sie müssen Ihren eigenen ApaKey erstellen und Das ist es für dieses Video. Lassen Sie uns nun unseren HTML-Code im nächsten schreiben. 4. Aufbau der Struktur: Jetzt werden wir den HTML-Code für unser Projekt schreiben oder wir können sagen, wir werden die Struktur unseres Projekts mithilfe von ITML erstellen Wir haben dieses HTML-Boilerplate also bereits in unserer Videoserie erstellt dieses HTML-Boilerplate also bereits in unserer Wenn Sie sich dieses Video noch nicht angesehen haben, schauen Sie sich einfach dieses Video an , sonst werden Sie nicht verstehen, woher wir diese Art von Links haben und woher wir diese Eingabe-URLs haben Wenn du also verstehen willst, woher wir diese Eingabe-URLs haben und woher wir diesen tollen Link für die Schriftart haben, musst du dir das Video ansehen. In diesem Video haben wir so viel HTML-Code geschrieben, heißt, wir haben bereits unsere HTML-Boilerplate erstellt, und dann haben wir unsere Schriftart teilweise mit unserem HTML verknüpft und dann haben wir unsere CSS-Datei mit unserem HTML verknüpft und dann haben wir unsere Ja Voice Script-Datei verlinkt Jetzt können wir unseren HTML-Code schreiben und um unseren HTML-Code zu schreiben, gehe ich in dieses Body-Tag und in diese Body-Technologie werde ich einige Tags erstellen Welche Art von Tag werde ich erstellen, um zu überprüfen, ob ich meine Website öffne. Also öffne ich einfach meine Website und auf dieser Website fehlt, wie Sie sehen können, unser Hintergrundbild. In diesem Kurs werden wir das fehlende Hintergrundbild korrigieren . Das heißt, wir werden diese Sache mit dem Hintergrundbild später in diesem Kurs korrigieren. Jetzt müssen wir nur noch diese Struktur erstellen. Als Erstes erstelle ich diesen Header und dann dieses Eingabefeld und dann erstelle ich diese Schaltfläche mit einem Suchsymbol. Dann erstelle ich diesen Fotobereich. Lass uns das machen. Zuallererst werde ich diese Header erstellen Um das zu erstellen, gehe ich in diese Körpertechnologie ein und erstelle einen Diff te Und der Klassenname der Diff-Technologie wird Min sein. Warum ich diese Dif-Technologie entwickelt habe Ich habe diese Diff-Technologie entwickelt, um CSS hinzuzufügen und um ein Diff-Tag mit dem Klassennamen Min zu erstellen, können Sie einfach Deep Dot Min eingeben Das ist nicht mit MD, wir können einfach Didot men eingeben und wir erhalten ein Diff-Tag mit dem Klassennamen Ich gehe in diese Diff-Technologie ein und erstelle eine weitere Dif-Technologie und der Klassenname dieser Diff-Technologie wird Header sein, Typ Header Und klicken Sie auf Enter. Jetzt erhalten wir ein Diff-Tag mit dem Klassennamen des Headers. Jetzt werde ich innerhalb dieser Diff-Technologie eine H-One-Technologie erstellen. Was ich in diese H-one-Technologie eintippen werde, werde ich diesen Header-Text eingeben. Ich tippe einfach, finde die besten Fotos. Ich kann es kopieren und in dieses H one Tech einfügen und jetzt erstelle ich ein Eingabefeld. Um ein Eingabefeld zu erstellen, gehe ich unter dieses H one Deck und hier erstelle ich eine weitere Diff-Technologie und innerhalb dieses Diff-Tags erstelle ich eine Eingabetechnologie und den Typ dieser Eingabetechnologie, ich klicke einfach auf Control Jet und der Typ dieses Eingabe-Tags ist Suchen. Geben Sie search ein und dann geben wir innerhalb dieser Eingabetechnologie einen Platzhalter . Warum geben wir einen Platzhalter ? Weil was ist Platzhalter Eingabefeld kannst du die Suchfotos sehen diesem Eingabefeld kannst du die Suchfotos sehen. Das ist ein Platzhalter Um also einen Platzhalter zu erstellen, erhalten Sie ein Attribut, der Attributname ist Platzhalter, geben Sie einfach Platzhalter In diesen Platzhalter können Sie alles eingeben oder Sie können alles schreiben und das Ding wird in diesem Eingabefeld angezeigt . Jetzt wollen wir Suchfotos anzeigen, also gebe ich einfach Suche und diese Fotos Ich gebe diesem Eingabefeld einen Klassennamen . Der Klassenname wird search sein. Jetzt erstelle ich ein Buttondeck unter diesem Eingabefeld. Um ein Buttondeck zu erstellen, gebe ich einfach Button ein und ich muss auch in diesem Button-Deck einen Klassennamen angeben. Der Klassenname dieses Button-Tags wird BTN One sein. Und jetzt müssen wir das Suchsymbol in dieser Button-Technologie erstellen das Suchsymbol in dieser Button-Technologie Welches Suchsymbol für diese Suche müssen wir erstellen. Wie wir dieses Suchsymbol erstellen werden, wird dieses Suchsymbol mit dieser fantastischen Schrift erstellen . Wenn Sie Font Awesome besuchen und einfach Suche in diese Sucheingabe eingeben, wird das Suchsymbol angezeigt. Auf dem Suchsymbol wird ein Itech stehen und in diesem Tech wird es einen Klassennamen geben. Und was wird der Klassenname sein, der Klassenname wird viel stärker als bei einer Lupe stehen Geben Sie einfach einen festen Strich ein. Und dann geben Sie F Strich Lupe und dann DS Glass ein. Dies ist der Klassenname für das Suchsymbol. Wenn du die Klassennamen finden möchtest, kannst du einfach diese Website besuchen und nach dem Symbol suchen und auf dieses Symbol klicken, um den Klassennamen dieser Symbole zu erhalten . Das Symbol, das wir verwenden bedeutet das Suchsymbol , das wir verwenden. Der Klassenname dieses Suchsymbols ist weitaus durchsichtig, soweit Lupe, Des-Glas Wenn ich das jetzt speichere und schauen wir mal in unserem Browser nach, also klicke ich mit der rechten Maustaste oder ich habe es schon auf unserem Live-Server geöffnet Das ist unser Live-Server und so sieht unser Projekt jetzt aus. Wir haben eine Header-Technologie erstellt, also eine H-one-Technologie, dann haben wir ein Eingabefeld erstellt und in dieses Eingabefeld haben wir einen Platzhalter geschrieben und was in den Platzhalter geschrieben steht, geschriebene Suchfotos Dann haben wir eine Button-Technologie mit dem Suchsymbol erstellt mit dem Suchsymbol Lassen Sie uns nun überprüfen, was wir erstellen müssen. Wir müssen einen Fotobereich erstellen und diese Fotos werden erst angezeigt, nachdem wir die Daten von der APA abgerufen haben und wir werden die Daten von der API abrufen Im Java-Script-Video bedeutet im nächsten Video oder neben dem nächsten Jetzt erstellen wir gerade die Struktur. Das heißt, wir bauen gerade diese Struktur. Ich erstelle dieses Fotosexon und nachdem ich dieses Foto-Sekon erstellt habe, erstelle ich diesen Ich muss ein anderes Sekon erstellen, um ein anderes Sexon zu erstellen Ich gehe unter dieses Diff-Tag und erstelle ein Sexon-Tag und erstelle ein Sexon-Tag Geben Sie einfach Sexon in diesem Sex and Tech ein, ich erstelle einen Defteg der Klassenname dieses Diffs wird der Name sein, geben Sie den Div-Punktnamen geben Sie den Div-Punktnamen Jetzt erhalten wir ein Difteg mit dem Klassennamen Name. Innerhalb dieser Diff-Technologie schreibe ich, oder ich erstelle ein H-Two-Tag innerhalb dieses H-Two-Tags, was ich schreibe, ich schreibe Fotos, kopiere Und füge es hier ein. Jetzt werde ich unter diese Dif-Technologie gehen oder ich werde unter diese Sekante gehen. Ich werde nicht unter Sex und Tech gehen, weil ich eine Dif-Technologie erstellen möchte, in der wir diese ich eine Dif-Technologie erstellen möchte Fotos Jetzt haben wir keinen Überschuss an diesen Fotos, aber wir müssen eine Diff-Technologie entwickeln, um eine Diff-Technologie Nachdem wir die Bilder von der APA abgerufen haben, werden wir diese Fotos in diesem DFTCH anzeigen Wir müssen die Diff-Technologie entwickeln. Ich gehe unter diese Dif-Technologie und erstelle eine weitere Diff-Technologie und der Klassenname dieses IF-Tags wird Fotos sein Klicken Sie auf Enter und dann haben wir ein Diff-Tag mit dem Klassennamen der Fotos Jetzt müssen wir eine weitere Schaltfläche erstellen. Um diese weitere Schaltfläche zu erstellen, gehe ich unter das Geschlecht und das t und erstelle ein weiteres Difteg und in diesem Diftek gebe ich ihm einen Namen, die Namen einen Klassennamen Klassenname und dann Klassenname werden Mores sein. Ich erstelle eine Button-Technologie, einfach Schaltfläche erstellen oder einfach Button eingeben und der Klassenname dieser Schaltfläche wird mehr sein Geben Sie mehr und dann mehr in diese Schaltfläche ein, weil wir mehr Schaltflächen erstellen , also mehr. Das heißt, weil mehr in dieser Schaltfläche steht , habe ich mehr in dieses Button-Tag geschrieben. Ich speichere das und lass uns mal in unserem Browser nach Controls schauen und diesen Browser öffnen. Wie Sie nun sehen können, haben wir unsere Struktur erfolgreich mit HTML erstellt. In den nächsten Videos werden wir nun die Daten von der API abrufen und diese Daten anzeigen was bedeutet, dass wir diese Bilder in den nächsten Videos, Is, anzeigen Lassen Sie uns im nächsten Video die Daten von der API abrufen. 5. Daten von API abrufen: Jetzt stellen wir die Abrufanforderung von der Pexels-API. Um eine Abrufanfrage zu stellen, müssen Sie den APA-Endpunkt abrufen Um den APA-Endpunkt zu erhalten, können Sie in Ihrem Browser nach der Pexs-API suchen und diese Website öffnen Und das ist dieselbe Website, auf der wir unseren APIKey generieren Sie müssen also dieselbe Website öffnen und auf derselben Website auf Dokumentation klicken Und wenn Sie Ihr APK vergessen haben, können Sie einfach auf diese Schaltfläche klicken, um Ihren APAKey zu erhalten , und Sie erhalten Ihren APAK, falls Sie diesen APIK vergessen haben Also hol dir einfach dieses APake, wenn du nicht auf diesen Button klickst und du bekommst dieses APK, kopiere es und lasse es jetzt, kopiere es und verlasse es und klicke dann auf diese Dokumentationsschaltfläche dann Und innerhalb dieser Dokumentationsschaltfläche werden wir eine Menge Optionen bekommen, denn Pexels APA bietet uns viele Funktionen und viele Optionen, die wir auf unserer Website implementieren können, aber wir wollen nur die Suchfunktion und die Funktion td photos implementieren die Suchfunktion und die Funktion td Also, was ist diese TD Photos-Funktion? Mithilfe des APA-Endpunkts td photos können wir zufällige Bilder auf unserer Website anzeigen. Bedeutet, dass das Projekt, das wir in diesem Projekt erstellen, wir mit diesen TD-Fotos zufällige Bilder anzeigen können und mithilfe der Suche nach Fotos Apendpoint nach Fotos suchen können Jetzt werde ich in diesem AP-Endpunkt eine Abrufanforderung stellen in diesem AP-Endpunkt Und nachdem ich eine Abrufanfrage gestellt habe, erhalte ich ein Bild, das sich auf das Suchfeld bezieht Das heißt, was auch immer ich suche, ich erhalte die Bilder oder ich erhalte die Daten, die sich auf diesen Suchlauf beziehen Das ist der APA-Punkt , den wir verwenden werden, um APA-Suchanfrage zu stellen, und dieser APA-Endpunkt benötigt einige Parameter Parameter wie Abfrage ist erforderlich, was bedeutet, dass Sie diesen Abfrageparameter in diesem APA-Punkt angeben müssen, sonst wird dieser AP nicht ausgeführt, und was bedeutet Abfrage Innerhalb der Abfrage können wir die Abfrage durchsuchen. Es steht hier geschrieben. Die Suchanfrage bedeutet, was auch immer Sie suchen möchten Ich möchte nach den Fotos suchen, die mit der Natur zu tun haben, dann schreibe ich eine Anfrage, die der Natur entspricht, und dann erhalte ich naturbezogene Fotos Wenn ich nach Fotos suchen möchte, die mit dem Meer zu tun suche ich oder ich gebe ein, Anfrage entspricht Meer und ich erhalte Fotos zum Meer Sie können diese Ernennung einfach kopieren oder Sie können diese Ernennung kopieren In dieser Beispielanfrage. In dieser Beispielanfrage Appoint ist es bereits eine geschriebene Abfrage, Sie müssen sie also nicht selbst schreiben, Sie können diesen Apenpoint einfach kopieren, einfach einfügen und jetzt möchte ich eine Abrufanforderung an diesen APA-Endpunkt einfügen und jetzt möchte ich eine Abrufanforderung an stellen Um eine Abrufanforderung zu stellen, müssen Sie In dieser Abruf-Methode müssen Sie den APA-Endpunkt oder die URL der API angeben Dies ist die URL der API, die wir zum Abrufen der Daten verwenden werden Ich kopiere das einfach, entferne es von hier und füge es in diese Abruf-Methode ein. Ich klicke auf Control that, weil ich es in den CTIX einfügen Ich erstelle ctixs und füge in dieses Vectix meine URL meine Und wenn Sie diese Pexels APA-Dokumentation lesen, werden Sie das erfahren Wir müssen unseren Autorisierungsschlüssel angeben , um auf Daten vom API-Endpunkt oder auf Daten über die API-URL zuzugreifen Also klicke ich auf diese Autorisierung, um sie dir zu zeigen. Sie können also sehen , dass für Pexels APA eine Autorisierung erforderlich ist Jeder mit einem PxS-Konto kann einen APAKey anfordern, was Wir haben unseren APAKey und mit diesem APAKey können wir diese Autorisierung durchführen Wie man diese Autorisierung durchführt, vielleicht steht es in dieser Dokumentation oder ich zeige Ihnen, wie Ja, ich glaube, es steht hier. Sie müssen nur die Autorisierung schreiben und Ihren APA-Schlüssel angeben. Geben Sie nach dieser Abrufanforderung einfach ein Komma ein , was bedeutet, dass Sie nach dieser URL dieses Komma angeben müssen Hier werden wir den Autorisierungsschlüssel bereitstellen . Um den Autorisierungsschlüssel bereitzustellen, müssen Sie eine geschweifte Klammer und innerhalb der geschweiften Klammern erstellen und innerhalb der Ich verwende eine Header-Eigenschaft, Header innerhalb dieser Header-Eigenschaft, erstelle eine weitere geschweifte Klammer und innerhalb dieser geschweiften Klammer und innerhalb dieser geschweiften Klammer gebe ich Authorization ein und gebe den Schlüsseltyp Authorization Header innerhalb dieser Header-Eigenschaft, erstelle eine weitere geschweifte Klammer und innerhalb dieser geschweiften Klammer gebe ich Authorization ein und gebe den Schlüsseltyp Authorization an. Sie können sehen, dass Sie Authorizer wie folgt eingeben müssen. Ich kopiere dieses Ding und füge es hier ein. Ja, also füge ich es hier ein. Also habe ich die Autorisierung geschrieben und hier müssen wir unseren APAKey angeben So können Sie die APK einfügen, die Sie bereits kopiert haben. Die APK, die wir kopieren, ist hier. Wenn Sie Ihre APK nicht haben, klicken Sie einfach auf diese Übersicht und in dieser Übersicht müssen Sie auf Ihre APAKey-Schaltfläche klicken und Sie erhalten Ihren APAKey . Kopiere dieses APG. Ich kopiere das richtig. Also habe ich diesen APAKey kopiert und erstelle eine Variable. Der Variablenname wird also der Schlüssel sein. Ich werde eine Zeichenfolge erstellen. In diese Zeichenfolge füge ich meine APK ein. Das ist mein APK. Und jetzt werde ich diese APK in dieser Autorisierung bereitstellen. Um dieses APK bereitzustellen, kann ich einfach den Variablennamen eingeben , in dem ich mein APK wiederhergestellt habe. Der Variablenname ist Schlüssel, also gebe ich hier Schlüssel ein. Um die Daten von diesem ApiENPN zu erhalten , müssen wir die Methode dann verwenden, dann Methode IL verwenden, Punkt und dann innerhalb dieser Then-Methode eingeben dann innerhalb dieser Wir werden diese Methode zuerst verwenden, um die Antwort von diesem APA-Endpunkt zu erhalten , und wir werden eine weitere Methode erstellen, um die Daten abzurufen In dieser Then-Methode gebe ich Antwort ein, weil wir Antwort von diesem APA-Punkt innerhalb dieser Then-Methode erhalten werden, also gebe ich Antwort und verwende die Pfeilfunktion. Die Antwort und die Antwort werden im Zeichenkettenformat sein, und wir müssen dieses Zeichenkettenformat in jsnfMat konvertieren Um diese Antwort in jcnfMat umzuwandeln, können Sie den Antwortpunkt JSN können Sie Jetzt wird unsere Antwort in jsnfMat umgewandelt und jetzt erstelle ich eine weitere Then-Methode, also innerhalb dieser Then-Methode übergebe ich hier Daten, dann erstelle ich eine Pfeilfunktion und innerhalb dieser Pfeilfunktion erstelle ich eine geschweifte Klammer also innerhalb dieser Then-Methode übergebe ich hier Daten, dann erstelle ich eine Pfeilfunktion und innerhalb dieser Pfeilfunktion erstelle ich eine geschweifte Klammer. In dieser geschweiften Klammer gebe ich Console log ein, damit wir die Daten in unserem Console type so console dot log abrufen können die Daten in unserem Console type so console dot Was ich in diesem Konsolenprotokoll tun werde, ist, ich diese Daten einfach in der Konsole protokollieren werde Wenn wir das jetzt speichern und unseren Browser öffnen, speichere ich jede Kacheldatei ebenfalls und klicke auf Mit Live-Server öffnen. Und ich werde auf Valve klicken , um die Daten abzurufen. Unser Konsolen-Tab ist geöffnet und in diesem Consultme können Sie sehen, dass wir ein Objekt erhalten und innerhalb dieses Objekts, wenn ich das innerhalb dieses Objekts erweitere, erhalten wir einige Daten, die sich auf die Natur-Suchanfrage beziehen die Natur-Suchanfrage , weil in dieser Abfrage die Natur geschrieben wurde Wir bekommen die Bilder oder wir bekommen die Daten entsprechend unserer Suchabfrage Wo sind unsere Bilder? Bilder befinden sich in diesem Fotoarray. Erweitern Sie dieses Fotoarray und innerhalb dieses Fotos-Arrays müssen Sie dieses Objekt innerhalb dieses Objekts erweitern, es gibt den Titel dieses Bildes und dann gibt es die Höhe dieses Bildes. Und der Name des Bilds des Fotografen ist da und dann ist die URL des Fotografen da, und dann die Bilder in diesem SRC Und in diesem SRC gibt es eine Menge Bildgrößen Wenn Sie die Nscape-Größe des Bildes ermitteln möchten, können Sie den Datenpunkt Landscape eingeben, und Sie erhalten ein Bild in Querformat Und wenn Sie ein großes Bild erhalten möchten, können Sie ein großes Bild erhalten Sie können Bilder in beliebiger Größe erhalten. Wenn Sie also etwa zehn Fotos zu diesem Suchbegriff erhalten möchten. Ich möchte zehn Fotos zu diesem Natursuchstrum Ich kann also einfach zehn pro Seite eingeben oder jetzt gebe ich fünf ein, weil ich fünf Fotos haben möchte, und jetzt erhalte ich fünf Fotos, die mit der Natur zu tun Wenn ich das speichere und mein Konsolenband öffne und Sie sehen, dass wir ein Objekt haben und in diesem Objekt befinden sich Fotos, und in diesen Fotos befinden sich fünf Elemente, was bedeutet, dass es fünf Fotos gibt. Erweitern Sie das Fotos-Array. Dies ist das erste Bild. Das ist das zweite Bild. Dies ist das dritte, vierte und fünfte. Laut unserer Suche haben wir fünf Fotos bekommen. Im nächsten Video werden wir diese Bilder in unserem Projekt anzeigen diese Bilder in unserem Projekt 6. Daten anzeigen: Jetzt werden wir die Fetch-Fotos in unserem Projekt anzeigen die Fetch-Fotos in unserem Projekt Um diese Fotos anzuzeigen, öffne ich mein JavaScript und in diesem Java-Skript gehe ich dann in diese Methode hinein, dann muss ich das Fotos-Array auswählen Von welchem Foto-Array spreche ich? Ich spreche von diesem Fotoarray. Um dieses Fotoarray auszuwählen, können wir Data Dot Photos eingeben. Warum Daten eingeben? Weil wir Daten innerhalb dieser Methode übergeben haben. Deshalb müssen wir hier Daten eingeben. In diesem Datenobjekt wählen wir das Fotoarray aus, geben Punkt ein und geben Fotos ein. Jetzt ist unser Fotoarray ausgewählt, sodass wir dieses Fotoarray erweitern und überprüfen können , was wir tun möchten. In dieser Fotoreihe befinden sich fünf Elemente. Und in jedem Element befinden sich viele Informationen zu diesem Foto. Wenn ich zum Beispiel dieses erste Foto erweitere, siehst du den Titel des Fotos und dann haben wir den Namen des Fotografen, die Fotografen-ID und die Fotografen-URL. Und dann haben wir das Bild in diesem SRC und das Bild in verschiedenen Größen wie Querformat, Größe, Großformat, Mittelformat In diesem Projekt werden wir also großformatige Bilder verwenden Also was werde ich jetzt tun, jetzt möchte ich auf dieses große Bild zugreifen. Um auf dieses großformatige Bild zuzugreifen, erstelle ich zunächst eines für jede Schleife und was Futterschleife macht , wird diese Futterschleife über dieses Fotoarray iterieren, und ich möchte für jedes Element in diesem Fotoarray eine Dif-Technologie erstellen für jedes Element in Um für jedes Element in diesem Fotoarray eine Diff-Technologie zu erstellen , kann ich Geben Sie also einfach für jedes Foto Dot Forage ein. Entferne dieses Array von hier. In diesem Parameter übergebe ich image, also gebe ich image ein. Die Bedeutung dieses Bildes sind nun die Elemente in diesem Fotoarray. Bezieht sich auf dieses Bild. Wenn Sie Bilder eingeben, handelt es sich bei dem Element innerhalb des Fotos-Arrays um Bilder. Jetzt gebe ich nur Bild ein. Jetzt bezieht sich dieses Bild auf die Elemente in diesem Fotoarray. Das sind die Elemente. In dieser Fotoreihe können Sie diese fünf Elemente sehen. Diese fünf Elemente sind jetzt Bild , weil ich Bild in diese Cavey-Funktion Jetzt möchte ich für jedes Bild ein Dif-Tech erstellen. Um Diftech für jedes Bild zu erstellen, ich eine Variable und der Variablenname lautet image dif IMG und DIV In dieser Variablen erstelle ich eine DeftEGT, erstelle eine Diff-Technologie und wir erhalten eine Methode Der Methodenname lautet document dot create element. Ich gebe document dot create element ein. In welchem Element wir erstellen werden, wir werden den Typ DFElement differere erstellen, also haben wir jetzt eine Dif-Technologie für jedes Element in diesem Fotoarray erstellt für jedes Element in Jetzt füge ich einen Klassennamen in diese Diff-Technologie ein, um einen Klassennamen in diesem Diftek hinzuzufügen. Ich kann den Variablennamen schreiben Ich Der Variablenname ist also image Dip, also gebe ich einfach Punkt Clalis Punkt Punkt ClassList Punkt AD Und mit dieser Methode können wir diesem Difteg einen Klassennamen hinzufügen . Während wir also einen Klassennamen innerhalb dieser Diff-Technologie hinzufügen, fügen wir einen Klassennamen in diesem DFtekt hinzu. CSS hinzufügen , das bedeutet, dieser Diff-Technologie Stil hinzuzufügen, wir fügen diesen Klassennamen hinzu Der Klassenname wird „Fotos“ lauten. Alle Arten von Fotos, FOTOS. Aber wir haben schon Photos IS geschrieben, also füge ich diesen Fotos noch eins hinzu. Also diese Fotos werden der Klassenname dieses Deftchs sein und jetzt gehe ich in diese Diff Tech rein , das heißt, ich wähle das innere Tamil dieser Technik aus und erstelle eine weitere Df Tech Um das innerHTML dieser Dif-Technologie auszuwählen, gebe ich imgDif dot ich In dieser Diff-Technologie werde ich eine weitere DFTech erstellen. Um ein weiteres Diff-Tag zu erstellen, musst du Bactix verwenden, einen Bactex erstellen und in diesen Bactex kannst du H Tamil Tech schreiben Während ich eine Diff-Technologie erstelle, kann ich einfach DV eingeben und ich gebe diesem Div auch einen Klassennamen Der Klassenname wird Js Photos sein. Und dann werde ich in dieser Def-Tech einen Paragraphen-Tech erstellen Also, warum ich diese Absatztechnologie erstelle, ich erstelle diese Absatztechnologie, um Namen des Fotografen anzuzeigen Also, wie kann man den Namen dieses Fotografen anzeigen? Um den Namen des Fotografen anzuzeigen, können Sie dieses Fotoarray auswählen und erweitern, und innerhalb dieses Fotoarrays können Sie dieses erste Element erweitern. Erweitern Sie also einfach dieses erste Element, und in diesem ersten Element können Sie den Fotografen sehen. Fotograf ist der Name des Fotografen. Um auf den Namen dieses Fotografen zuzugreifen, kann ich jetzt eingeben, was ich eingeben kann, ich kann Image Dot Photographer eingeben. Ich erstelle einen Vorlagenverweis innerhalb dieses Absatztextes. Um ein Template-Teral zu erstellen, verwende ich dieses Tool-Symbol und dann die geschweifte In diese geschweifte Klammer kann ich Bild eingeben. Warum ich Bild eintippe, ich tippe Bild, weil ich Bild in dieses Feld eingegeben habe. Geben Sie also einfach Bild und dann Punkt Fotograf ein, Geben Sie also einfach Bild und um den Namen des Fotografen zu erhalten Also werde ich die Schreibweise überprüfen. Ich kann das einfach kopieren und hier einfügen. In diesem Absatz bekommen wir nun den Namen des Fotografen des Bildes, bekommen wir nun den Namen des Fotografen das angezeigt wird, und jetzt werde ich diesen Absatz schließen und jetzt werde ich das Bild anzeigen. Um das Bild anzuzeigen, erstelle ich eine Bildtechnologie. Um Image Tech zu erstellen, gebe ich IMG ein und muss dann einen SRC angeben Was wird das SRC sein? Bildpunkt Bogenpunkt Groß. Wie bilde ich HRC Dot Large ab? Wie Sie sehen können, müssen wir diese SRC auswählen und innerhalb dieser SRC müssen wir diese Größe auswählen Die Größe ist also groß, was bedeutet, dass wir ein großes Bild verwenden werden Also werde ich diese Vorlage reters erstellen und in dieser Vorlage Eaters kann ich Bild ARC und die Bildgröße eingeben Die Bildgröße wird groß sein, also gebe ich groß ein. Und ich werde diese Technologie schließen Um diese Technologie zu schließen, gebe ich einfach SLS und dann Jetzt werden wir also einen Download-Button erstellen. Um die Download-Schaltfläche zu erstellen, verwende ich Anchor Tech und HRF in dieser HRF gebe die Bildgröße Ich möchte geben, ich kopiere das und füge es und jetzt haben die heruntergeladenen Bilder die Originalgröße Ich entferne das große Bild und tippe Original ein. Jetzt schließe ich diesen DefText, schließe diese Diff-Technologie, ich kann einfach DF eingeben, jetzt füge ich dieses Bild an. DIF mit diesem DIF die Diff-Technologie gemeint, die wir in diesem HTML erstellt haben , dieses Photo-Dif Jetzt muss ich dieses Fotos-Div in meinem Java-Skript auswählen , um diese Fotos auszuwählen, wenn ich eine Variable erstellen Und der Variablenname lautet Fotos oder ich kann Foto eingeben. Um dies auszuwählen, verwende ich Document Dot Query Selector und dann den Klassennamen Wie lautet der Klassenname? Ich muss meinen Klassennamen überprüfen. Der Klassenname ist Fotos, also gib einfach Fotos ein. Was ich jetzt tun werde, ich werde diese Dinge anhängen , ich werde dieses Dif in diesem DFTech anhängen Um dieses Div in dieses Difteg einzufügen, kann ich einfach photo dot apenhilPhoto dot Apenhild eingeben photo dot apenhilPhoto dot Apenhild , was ich anhängen möchte, ich möchte dieses Bild di anhängen, also gebe ich DIF einfach image DIF ein. Ich speichere das und lass uns in unserem Browser nachschauen . Alles funktioniert oder nicht. Ich werde das neu laden, also öffne ich meinen Live-Server erneut, HTML-Datei, und ich klicke auf Mit Live-Server öffnen Und jetzt, wie Sie sehen können, bekommen wir den Namen des Fotografen, wir bekommen das Bild und wir bekommen den Download-Link Aber ich kann keinen Download-Link sehen. Warum kann ich keinen Download-Link sehen? Ich kann keinen Download-Link sehen, weil ich nichts in diese HRF-Maschine geschrieben habe , also muss ich in diesen Anker-Tap Download eingeben, also gib einfach Download Und schließe jetzt diesen ycretc , sagen wir, lass uns einen Blick in Wie Sie sehen können, bekommen wir jetzt auch den Download-Button Das ist es für dieses Video. Im nächsten Video werden wir nun die Funktionalität erstellen. Welche Art von Funktionalität? Funktion wird immer dann zur Verfügung stehen, wenn wir nach Fotos suchen , die sich auf diesen Suchbegriff beziehen. Wir werden diese Suchfunktion im nächsten Video erstellen . 7. Suchfunktionalität: Jetzt werden wir Suchfunktionen für dieses Projekt erstellen . Und nachdem wir diese Suchfunktion erstellt haben, können wir einfach nach den Fotos suchen, nach denen wir suchen möchten , wie ich nach Naturfotos suchen möchte, dann kann ich einfach Nature ear eingeben und auf diese Schaltfläche klicken, dann erhalte ich Fotos, die mit der Natur zu tun haben. Um diese Art von Funktionalität zu erstellen, öffne ich meinen Codator und in diesem Codator öffne ich Und in dieser Java-Sri-Datei müssen wir einige ihrer tamilischen Elemente auswählen Welches tamilische Element ich auswählen möchte, ich möchte diese Sucheingabe auswählen, und dann möchte ich diese Button-Technologie auswählen, und dann möchte ich diese weitere Button-Technologie auswählen Lassen Sie uns diese drei Elemente auswählen, um die Sucheingabe Ich erstelle eine Variable Der Variablenname lautet Sucheingabe, Suche und dann Eingabe, und dann schreibe ich Document Dot Query Selector Was ich in diesen dokumentierten Abfrageselektor eingeben werde, ist der Klassenname Der Klassenname ist Suchen, dann kopiere einfach diese Suche und gib dann Punkt und Strg V ein, wodurch diese Suche eingefügt wird Jetzt kopiere ich diese Sucheingabe und füge sie hier ein. Was ich nun auswählen möchte, ich möchte diese Button-Technologie auswählen. Der Variablenname dieses Button-Tags wird BTN sein, und dann wird der Klassenname BTN One sein Lassen Sie uns den Klassennamen überprüfen. Der Klassenname ist BTN. Ich wähle einfach diese Button-Technologie und erstelle jetzt eine weitere Variable, der Variablenname wird mehr sein, also gebe ich mehr ein, weil ich diese Mehr-Schaltfläche auswähle Ich kann das einfach kopieren und hier einfügen und der Klassenname wird mehr sein. Lass uns den Klassennamen überprüfen, es ist mehr oder nicht. Also ja, der Klassenname ist mehr. Also haben wir diese drei Dinge in JavaScript ausgewählt , was ich jetzt tun möchte. Jetzt möchte ich einige Funktionen erstellen. Also die erste Funktion, die ich für diesen Abruf erstellen werde. Bedeutet, dass dieser Abruf-Aufruf diesen Abruf-Aufruf innerhalb einer Also werde ich eine Funktion erstellen. Der Funktionsname lädt Fotos. Ich habe diese Funktion zum Laden von Fotos erstellt , und was ich jetzt tun werde, ich kopiere einfach diese Abruf-Aufrufe, ich kopiere alles, und ich füge es einfach in diese Funktion Und ich übergebe einen Parameter innerhalb dieser Funktion zum Laden von Fotos Der Parametername wird Trum sein. Warum ich hier Trum übergebe, ich übergebe Tru, weil ich die Eingangstrommel erhalten möchte , bedeutet, dass ich den Eingabewert innerhalb dieses Trums haben möchte. Deshalb übergebe ich Trum in diesen Ladefotos Du wirst verstehen, warum ich Trum Now weitergebe , wenn du es nicht verstanden hast, wirst du es nach einiger Zeit verstehen Lassen Sie mich erklären, warum ich diese Funktion erstellt habe. Ich habe diese Funktion erstellt , weil ich möchte immer dann ausgeführt wird, wenn auf eine Schaltfläche geklickt wird Das heißt, wenn auf diese Schaltfläche geklickt wird, möchte ich, dass diese Funktion ausgeführt Also wann immer auf welche Schaltfläche geklickt wird, wenn diese weitere Schaltfläche angeklickt wird, dann führe ich diese Funktion zum Laden Jetzt erstelle ich eine weitere Funktion. Der Name der Funktion lautet „Fotos suchen Erstellen Sie einfach eine Funktion und der Funktionsname lautet „Fotos suchen“, und dann gebe ich in den Suchfotos erneut Tram ein. Straßenbahn und dann eine geschweifte Klammer erstellen und in dieser geschweiften Klammer, was möchte ich tun? Ich möchte diese Funktion zum Laden von Fotos aufrufen. Also schreib einfach Fotos laden. Und gib die Trommel hinein, um Fotos zu laden. Trommel weitergeben. Nun, woher wir diese Trommel haben. Wir werden diese Trommel in eine andere Funktion integrieren. Das heißt, ich erstelle einen Event-Listener innerhalb dieser Button-Technologie, also erstelle ich diesen, oder ich wähle diesen Button aus, das heißt diese Suchschaltfläche Teck, und innerhalb dieser Schaltfläche füge ich einen Event-Listener hinzu und welches Ereignis dieser Button abhört, dieser Button klickt auf Event, also tippe einfach click und dann komma und dann erstelle ich eine Diese Funktion wird immer dann ausgeführt, wenn auf diese Also habe ich eine Pfeilfunktion erstellt und was möchte ich innerhalb dieser Pfeilfunktion tun? Ich möchte diese Funktion für die Suche nach Fotos aufrufen , weil ich immer, wenn diese Suchschaltfläche geklickt wird, auf diese Suchschaltfläche geklickt wird, diese Funktion aufrufen möchte Wenn auf diese Funktion geklickt wird, rufe ich diese Funktion zum Laden von Fotos auf und dann stellen wir eine Abrufanforderung und wir bekommen einige Fotos in unserem Projekt angezeigt Ich möchte welche Funktion aufrufen, ich möchte die Funktion zum Suchen von Fotos in diesem Evet-Listener aufrufen , also geben Sie einfach search photos ein und jetzt übergeben wir den Wert von Trum in den Suchfotos. Was wird der Wert von Trum sein, der Wert von wird der Eingabewert sein Um den Eingabewert zu erhalten, können Sie einfach eine Sucheingabe eingeben. Warum ich hier Sucheingabe eintippe, ich tippe Sucheingabe, weil der Variablenname , in dem wir das Eingabefeld ausgewählt haben, Sucheingabe ist. Das ist der Grund. Also wollen wir den Eingabewert bekommen. Geben Sie also einfach den Variablennamen ein, der Sucheingabe ist , und dann den Punktwert. Jetzt haben Sie den Eingabewert in den Suchfotos und wir haben Eingabewert in dieser Trommel übergeben. Jetzt hat diese Trommel den Überschuss dieses Eingabewerts, und dann haben wir diesen Eingabewert innerhalb dieser Funktion zum Laden von Fotos erneut als Trum übergeben . Nun, wo ich diesen Rum verwenden möchte, möchte ich diese Trommel in dieser Abfrage verwenden. Was auch immer der Benutzer in das Eingabefeld eingibt, diese Trommel wird durchsucht. Ich erstelle hier ein Template uteral und innerhalb dieser Schablone lateral, um das Template-Datum zu erstellen . Ich muss das Dollarsymbol auch in dieses Dollarsymbol schreiben auch in dieses Dollarsymbol Was ich übergebe, gebe ich die Trommel hinein Vorlagenliterale bedeuten, dass ich dieser Abfrage übergebe. Was ist der Wert dieses Strums? Der Wert dieses Strums ist der Eingabewert. Unabhängig davon, welchen Eingabewert der Benutzer eingibt, ist dieser Eingabewert Strum So wie der Benutzer Auto eingegeben hat. Wir werden das Auto in diese Abfrage einbeziehen. Die Abfrage entspricht Auto und dann suchen wir nach Fotos, die sich auf das Auto beziehen, wenn der Benutzer Tiger eingegeben hat Der Wert dieses Strums wird Tiger sein und dann geben wir Tiger in diese Abfrage ein und wir erhalten Fotos, die sich auf Tiger beziehen Ich hoffe, du hast verstanden, warum wir Trum hier geschrieben haben und wie wir Werte in diesem Trum herausholen. Jetzt füge ich noch einen Listener zu dieser Mehr-Schaltfläche hinzu, also kann ich das einfach kopieren und anstelle von BTN hier einfügen, ich gebe mehr ein. Also wann immer ein Benutzer auf diese Mehr-Schaltfläche klickt, was wir tun wollen, wollen wir diese Funktion „Fotos laden“ aufrufen Kopieren Sie diese Funktion zum Laden von Fotos und fügen Sie sie hier Übergeben Sie dann diesen Sucheingabewert in die Funktion „ Fotos laden Übergeben Sie also einfach diesen Sucheingabewert. Und wann immer der Benutzer auf diese Schaltfläche „Mehr“ klickt, was wir tun wollen, wollen wir auch diese Seite vergrößern. Für die Seite erhalten wir also einen weiteren Parameter, der Parameter ist Seite. Also werde ich diese Pexels-API-Dokumentation öffnen. In dieser Dokumentation werde ich also zuerst diese Dokumentation öffnen Wenn ich also auf die Suchfotos in dieser Dokumentation klicke , erhalte ich diesen API-Endpunkt und Sie können die Parameter sehen. Und innerhalb dieses Parameters können wir auch die Seite übergeben. Also wo ist die Seite Wie Sie sehen können, haben wir hier eine Seite und die Standardseite ist eine, aber wir wollen sie haben. Wir wollen die Seite vergrößern, wenn der Benutzer auf die Schaltfläche Ich klickt, also fügen wir diesen Seitenparameter in unseren Link ein. Kopieren Sie diese Seite und öffnen Sie dann Ihren VS-Code. In diesem API-Endpunkt können Sie einfach dieses Endsymbol eingeben und dann den Parameter eingeben. Der Parameter ist Seite. Was ich jetzt tun möchte: Ich möchte diese Seite vergrößern, wann immer der Benutzer auf diese Schaltfläche „Mehr“ klickt. Um das zu tun, verwende ich einfach Template-Datumsangaben und innerhalb dieser Template-Daten übergebe ich Von wo wir den Wert von page bekommen, bekommen wir den Wert von page from, ich muss eine Seitenvariable erstellen, also erstelle ich einfach eine Seitenvariable und der Standardwert von page wird create this variable sein und der Bdefault-Wert dieser Seite wird eins sein , wenn der Benutzer auf diese Schaltfläche klickt, wir werden den Wert dieser Seite erhöhen. Um den Wert dieser Seite zu erhöhen, geben wir einfach Seite geben wir einfach Jedes Mal, wenn der Benutzer auf diese Schaltfläche „Mehr“ klickt, erhöht sich der Seitenwert, und dieser Seitenwert wird ebenfalls erhöht, und wir erhalten eine weitere Seite, eine weitere Seite. Das heißt, jedes Mal, wenn ein Benutzer auf die Schaltfläche „Weitere Seite“ klickt, wird diese Seite vergrößert und wir erhalten eine neue Seite. Das ist also die einfache Logik dahinter. Jetzt können wir das speichern und schauen wir uns das in unserem Browser an. Also lass uns das auch speichern und deinen Browser öffnen und darauf klicken, dieses Ding öffnen, das neu laden und wir suchen nach Autos und klicken auf diese Suchschaltfläche Ja, wie Sie sehen können, bekommen wir jetzt Fotos, die sich auf Autos beziehen Also das war's für dieses Video im nächsten Video, wir werden auch diese zufälligen Fotos hinzufügen. 8. Abschnitt mit trendigen Fotos erstellen: Jetzt werden wir diesen empfohlenen Foto-Sexion erstellen oder wir können sagen, zufälliger Foto-Sexon Um diese Fotos zu bekommen, werden wir also einen anderen Appoint verwenden und um einen anderen Appoint zu bekommen, öffne ich diese Pexels-Dokumentation, und in der Pexels-Dokumentation müssen Sie auf UTDPhotos klicken öffne ich diese Pexels-Dokumentation, und in der Pexels-Dokumentation müssen Sie auf UTDPhotos klicken. Also klicken Sie auf cutdPhotos und nachdem Sie auf td photos geklickt haben, erhalten Sie diesen API-Endpunkt und mit diesem AP-Endpunkt und mit diesem AP-Endpunkt können wir td photos abrufen. Das heißt, wir bekommen ein paar zufällige Fotos oder du kannst hier nachlesen, was dieser AP-Endpunkt macht diesen Endpunkt können Sie Fotos in Echtzeit empfangen , die vom Pixelstream kuratiert wurden. Wir fügen unserer kuratierten Liste mindestens ein neues Foto pro Stunde hinzu , sodass Sie immer eine wechselnde Auswahl an Trendfotos erhalten Jetzt verstehst du, was uns dieser APA-Endpunkt bieten wird. Über diesen API-Endpunkt erhalten wir Trendfotos, die vom PixelTeam kuratiert werden, und eines dieser Trendfotos wird Damit wir eine wechselnde Auswahl an Trendfotos erhalten. Kopieren wir also diesen AP-Endpunkt. Um diesen AP und diesen Punkt zu kopieren, können Sie diesen Namen direkt kopieren oder Sie können diesen AP und diesen Punkt kopieren. Warum ich dieses Beispiel kopiere, fordert AP und Point an. Ich kopiere diesen AP und diesen Punkt, weil sie den Parameter pro Seite bereits implementiert haben. Sie erhalten einige Parameter hier, Seite und dann pro Seite. Wir werden beide Parameter verwenden. Einer der Parameter wird bereits in diesem AP und Punkt verwendet, also kopiere ich diesen AP-Punkt. Ich füge ihn in meine Java-Skriptdatei ein. Wo ich einfügen werde, füge ich einfach hier ein. Steuerung V. Jetzt habe ich diesen QtdPhotos-API-Endpunkt eingefügt. Also, was werden wir jetzt tun? Jetzt werden wir überprüfen, ob diese Trommel wahr ist, dann werden wir sie AP und Point nennen , und wenn diese Trommel falsch ist, dann werden wir sie ernennen. Warum überprüfen wir, ob diese Trommel wahr oder falsch ist? Wir überprüfen, ob diese Trommel entweder wahr oder falsch ist , denn wenn diese Trommel wahr ist, wird diese Trommel wahr wenn der Benutzer etwas in dieses Eingabefeld eingibt. Wenn der Benutzer also etwas in dieses Eingabefeld eingibt, die Trommel wahr und wir nennen die Suchfotos ap und point. Und wenn der Benutzer nichts in dieses Eingabefeld eingibt, dann ist dieser Trum falsch, und dann nennen wir das Q td photos Ap Endpoint. Um eine IS-Anweisung innerhalb dieser beiden AP-Endpunkte hinzuzufügen, können wir einfach diesen AP-Endpunkt entfernen und ich erstelle eine Variable Ich kopiere das einfach und entferne es und gebe hier URL ein, und dann erstelle ich diese URL-Variable Also werde ich einfach die URL-Variable const URL erstellen. Und in diese URL-Variable füge ich diesen API-Endpunkt Also einfach Control V und ich habe diesen AP-Punkt für Suchfotos eingefügt Bedeutet, dass dieser Termin für die Suche nach Fotos und dieser API-Punkt für Qtd-Fotos bestimmt ist Was wir nun überprüfen werden, wir werden prüfen, ob dieser Trum wahr ist, dann nennen wir ihn Apenpoint, wenn dieser Trum falsch ist, dann nennen wir diesen Trum ap Ich gehe einfach weiter unten und gebe hier Trum ein. Und jetzt verwende ich den ternären Operator. Sie können auch die reguläre ES-Anweisung verwenden, aber ich möchte Ihnen zeigen, wie man den ternären Operator verwendet da ternäre Operatoren sehr nützlich sind Wenn Sie nicht wissen, wie man den ternären Operator benutzt, werde ich es Ihnen jetzt beibringen ternäre Operator ist ein eindeutiges Fragezeichen und dann und dann Wenn dieser Rum wahr ist, bedeutet dieses Fragezeichen, dass, wenn dieser Trum wahr ist, wir den Codeblock darin ausführen , und wenn der Trum falsch ist, werden wir den Codeblock in dieser Spalte ausführen Ich hoffe, du hast diese Syntax verstanden. Diese Syntax ist sehr einfach. Wenn Sie diese Syntax nicht verstehen, können Sie die normale EFLC-Anweisung verwenden Aber ich hoffe, Sie kennen diese ternären Operatoren. Deshalb benutze ich dieses Ding. Was wir überprüfen, überprüfen wir. Ich werde diese Spalte einfach von hier entfernen. Ja, was wir jetzt überprüfen, wir überprüfen, ob dieser Trum wahr ist oder nicht. Dieses Fragezeichen definiert , ob diese Trommel wahr ist oder nicht. Wenn diese Trommel also wahr ist, werden wir den Code innerhalb dieses Fragezeichens ausführen. Welchen Code wollen wir also innerhalb dieses Fragezeichens ausführen? Wenn diese Trommel wahr ist, wollen wir diesen Codeblock ausführen. Und wenn diese Trommel falsch ist, wollen wir diesen Codeblock ausführen. Für False müssen Sie also diese Spalte verwenden, und wenn diese Trommel nun falsch ist, verwenden wir diese AppOin oder wir nennen sie, also entfernen Sie einfach diesen AP-Endpunkt von hier und erstellen Sie eine Batix und Control V. Wenn das wahr ist, nennen wir das AP und Point, und wenn dieser Begriff falsch ist, wir Pro Seite möchte ich zehn Fotos, und dann bekommen wir einen weiteren Parameter, ein anderer Parametername ist Seite Ils U. Das ist ein weiterer Parameter , den wir verwenden werden, dieser Seitenparameter, geben Sie einfach Seite ein. Symbol und dann Seite. Und Page wird dieses Ding machen. Kopiere das einfach und füge es hier ein. Warum habe ich diese Seite hier kopiert und eingefügt? Denn wenn jemand auf diese Schaltfläche „Mehr“ klickt, wollen wir neue Fotos generieren Das ist es. Ich speichere das und lass es uns in unserem Browser anzeigen. Speichern Sie dies ebenfalls und klicken Sie auf Mit Live-Server öffnen. Wie Sie also im Moment sehen können, bekommen wir nichts, warum bekommen wir nichts? Wir müssen das überprüfen. Es gibt also keinen Fehler in diesem Konsolen-Tab. Wir müssen unsere Syntax überprüfen. Möglicherweise liegt ein Fehler in unserer Syntax vor. Der Fehler könnte also auf die Kosten zurückzuführen sein , die hier geschrieben wurden. Also statt const müssen wir let eingeben. Also speichern wir das und so steuern wir S und schauen wir mal in unseren Browser Laden wir das neu und fügen hier eine Seitenvariable hinzu, sodass Seite und Seite gleich Und jetzt können wir sagen, dass wir uns in unserem Browser weiterentwickeln können. Also lass uns das laden. Also das funktioniert jetzt nicht. Also lass uns das im nächsten beheben 9. Fehlerkorrektur: Der Fehler ist also, dass wir vergessen haben , diese Funktion aufzurufen. Wir müssen diese Funktion aufrufen. Ich nenne diese Funktion zum Laden von Fotos hier. Kopieren Sie einfach diesen Funktionsnamen und dann können wir ihn hier einfügen und ihn einfach aufrufen. Speichere das und lass uns einen Blick in unseren Browser werfen. Wie Sie sehen können, erhalten wir jetzt die bewerteten Fotos. Bedeutet, dass wir alle empfohlenen Fotos erhalten oder dass wir Trendfotos sehen können Und wenn wir auf diese Schaltfläche „Mehr“ klicken, wo ist diese Schaltfläche „Mehr“? Ja. Wenn du auf die Schaltfläche „Mehr“ klickst, zoome ich sie so , dass du sie sehen kannst. Wenn wir auf die Schaltfläche „Mehr“ klicken, erhalten wir mehr Fotos. Wie Sie sehen können, haben wir mehr Fotos. Also das ist es. Im nächsten Video fügen wir CSS-Stile hinzu und lassen unsere App so aussehen. Treffen wir uns im nächsten Video. 10. Styling der App: Jetzt werden wir CSS zu unserem Projekt hinzufügen und kein CSS schreiben. Warum werden wir kein CSS schreiben? Wir werden kein CSS schreiben, weil es zeitaufwändig sein wird. Und ich denke, wenn Sie JavaScript lernen, kennen Sie CSS bereits. Deshalb habe ich das Gefühl, dass das Schreiben CSS-Code nur Zeitverschwendung ist. Und das ist der Grund, warum ich einfach meinen CSS-Code kopiere und einfüge und Ihnen diese CSS-Codedatei zur Verfügung stelle. Also öffne ich einfach meine CSS-Datei. Sie erhalten diesen Code unten im Abschnitt Ressourcen. Also kopiere einfach diesen Code. Nachdem Sie diesen Code kopiert haben, fügen Sie ihn einfach in Ihre CSS-Datei ein. Dies ist unsere CSS-Datei , an der wir gerade arbeiten. Ich füge es einfach ein. Ich werde diese Eingabe entfernen und richtig einfügen. Ich habe meinen CSS-Code richtig eingefügt. Wir haben einen Universal-Selektor ausgewählt und Margin Null und Pading Null hinzugefügt Ich schätze, ihr wisst, warum wir im Universal-Selektor Margin Zero und Pading Zero hinzufügen und Pading Zero Wir fügen Margin Null und Padding Null hinzu, weil unsere Webseite standardmäßig Margin und Padding hat und wir diese Ränder und Padding entfernen wollen Deshalb habe ich Rand Null und Abstand Null angegeben. Ich habe diesen Hauptunterschied ausgewählt, welcher ist der Hauptunterschied? Dies ist der Hauptunterschied, warum ich diesen Hauptunterschied ausgewählt habe. Ich habe diesen Hauptunterschied ausgewählt, um unseren Hintergrund zu erstellen. In diesem Hintergrund habe ich mein Bild hinzugefügt, mein Bildname ist One In der URL habe ich ein Punkt-JPG geschrieben. Das ist es, ich zeige dir nur den Code. Ich denke, ihr wisst, wie man CSS-Code schreibt , und ihr könnt diesen CSS-Code richtig verstehen. Und wenn ihr diesen CSS-Code nicht verstehen könnt und Schwierigkeiten habt, den CSS-Code zu schreiben, dann könnt ihr mich einfach in der Diskussion informieren und ich werde so schnell wie möglich ein Video zu diesem Thema erstellen Informiere mich in der Diskussion Exon oder Q&A Exon. Das ist unser CSS-Code. Und was ist das für ein Medium und was für eine Mischung daraus? Diese Medien Wir nutzen diese Medieneigenschaft, um unsere Website responsiv zu gestalten. Wenn Sie also mit responsivem Design vertraut sind und wissen, wie man diese Medieneigenschaft verwendet, haben wir einen Mix mit 780 Pixeln hinzugefügt. Unser Design wird also responsiv, unsere Webseite kleiner als 768 Pixel wird. Wenn unsere Webseite kleiner als 768 Pixel wird, fügen wir diesen CSS-Code in unser Projekt ein. Ich zeige Ihnen diesen Code richtig und langsam, wenn Sie keine CSS-Dateien erhalten , wenn Sie diese CSS-Datei nicht finden können. Um dir zu helfen, scrolle ich das einfach langsam. Sie können Bildschirme einfach texten, wenn Sie die CSS-Datei nicht gefunden haben. Wenn Sie eine CSS-Datei gefunden haben, können Sie diesen Code einfach kopieren und einfügen. Das ist unser CSS-Code. Lassen Sie uns nun sehen, ob wir etwas in unserem JavaScript korrigieren müssen. Vorher speichere ich das einfach und ich speichere meinen Index oder meine HTML-Datei. Ich entferne diese CSS-Datei und öffne sie jetzt einfach auf unserem Live-Server. Wie Sie sehen können, bekommen wir diese Art von Schnittstelle. Aber es gibt keine Hintergrundfarbe. Warum gibt es keine Hintergrundfarbe? Es gibt keine Hintergrundfarbe, weil in dem Ordner, an dem wir arbeiten, kein Bild vorhanden ist, also kopiere ich dieses Bild einfach und füge es hier ein. Jetzt haben wir unsere Bilder. Jetzt haben wir unser Bild und wir werden dieses Bild in unserem Hintergrund haben. Speichere das einfach und lass uns in unserem Browser nachschauen. Wie Sie sehen können, haben wir ein Hintergrundbild im Hintergrund. Jetzt haben wir erfolgreich CSS-Code in diesem Projekt. Nun, was ich tun möchte, jetzt möchte ich nach etwas suchen wie Ich suche nach einem Auto, klicken Sie auf Enter oder klicken Sie auf diese Schaltfläche. Wir haben Fotos zum Thema Auto. Jetzt möchte ich nach Fotos suchen, die mit der Natur zu tun haben, also gebe ich Natur ein. Ich klicke auf diese Suchschaltfläche. Jetzt können Sie sehen, dass wir Fotos mit Bezug zur Natur bekommen, aber wir bekommen nur fünf Fotos. Wenn du diese Fotos vergrößern möchtest, kannst du einfach tippen, du kannst deine JavaScript-Datei öffnen und du kannst einfach der Fotos innerhalb der URL vergrößern. Du willst zehn Fotos pro Seite haben, dann entferne einfach diese fünf von dieser pro Seite und zehn hier. Jetzt bekommen wir zehn Fotos. Schauen wir uns das mal in unserem Browser an. Ich suche nach Tiger, TIG Tiger und klicke auf diese Suchschaltfläche. Wie Sie sehen können, haben wir Fotos zum Thema Tiger. Wenn ich auf die Schaltfläche „Mehr“ klicke , erhalte ich weitere Fotos zum Thema Tiger. Das ist in diesem Video und wir haben dieses Fotoprojekt komplett erstellt Ich hoffe, Sie haben verstanden, wie man dieses Projekt mit JavaScript erstellt und wie wir Pexels AP verwenden können Wenn Sie wissen, wie man die Pexels-API verwendet, können Sie leicht verstehen, wie Sie auch ein anderes APH verwenden Das ist es für diese Klasse.