Projet API Javascript : appli de recherche d'images

1. Introduction: Bonjour à tous les participants de ce cours, nous allons intégrer l'application Photosearch en utilisant JavaScript Voici à quoi ressemblera notre application Photosearch, et vous pouvez rechercher n'importe quelle photo dans cette application Je souhaite rechercher des photos liées à la voiture Je peux simplement taper voiture dans ce champ de saisie et je peux cliquer sur le bouton de recherche et j'obtiendrai des photos relatives à la voiture. Comme vous pouvez le voir, nous avons obtenu des photos relatives à la voiture. Si vous souhaitez générer plus de photos liées au strum de recherche, vous pouvez cliquer sur ce bouton Plus et comme vous pouvez voir, nous avons obtenu plus de photos liées au strum de recherche D'où nous obtenons ces photos, nous les obtenons de l' API Pexels Pour construire ce projet, nous allons utiliser l'API Pexels. Je vais maintenant rechercher des photos liées à la nature. Pour rechercher des photos liées à la nature, vous devez taper nature puis cliquer sur ce bouton de recherche et maintenant, comme vous pouvez le voir, nous avons des photos liées à la nature. Si vous cliquez sur ce bouton plus, vous obtiendrez plus de photos liées à la nature. Vous avez donc plus de photos liées à la nature. Et nous avons également des tendances en matière de photosexon dans ce projet. Il suffit donc de recharger ce projet. Il s'agit du sexon photo tendance de ce projet, et ce sexon photo tendance est généré par l'équipe des pixels, ce qui signifie que ce sexon photo tendance sera mis à jour toutes les heures Donc, si vous voulez savoir comment créer ce type de projet, vous pouvez rejoindre ce cours et commençons à construire ce projet à partir de la vidéo suivante. 2. Configuration du projet: Faisons cette configuration pour notre projet dans cette vidéo. Pour écrire du code, nous allons utiliser l' éditeur de code Visual Studio et nous devons créer un dossier dans l'éditeur de code Visual Studio. J'ai déjà créé un dossier. Le nom du dossier est image search project, et vous devez créer trois fichiers, fichier HTML, un fichier JavaScript et un fichier CSS. J'ai déjà créé un fichier HTML. Le nom du fichier HTM est indexé au format HTML. Et puis stylez CSS et un point js. Écrivons maintenant un modèle HTML. Pour écrire du HTML Bilerlt, je vais ouvrir mon fichier HTML J'ai donc déjà ouvert mon fichier extremal. Dans ce fichier HTML, me suffit de taper exclaim dans Mark et de cliquer sur Entrée pour que le code VS écrive automatiquement le code écrive automatiquement Je vais passer en dessous de ce jeu de titre et je vais lier ce fichier de style CSS. Pour créer un fichier CSS de style lien, vous devez simplement taper Lien et cliquer sur cette colonne de liens CSS. Dans cette HRF, vous devez taper le nom du fichier. Mon nom de fichier est Styloid CSS et dans cette HRF, il est écrit en Cela signifie que mon fichier CSS est lié à mon fichier HTML. Je vais maintenant lier mon fichier JavaScript à ce fichier HTM. Pour lier un fichier JavaScript, je dois créer un Scriptex. Je vais donc taper script, puis je vais cliquer sur Script Column SRC, puis je vais taper le nom de fichier de mon fichier JavaScript Le nom final de mon fichier JavaScript est donc app point js sol type app point js. Comme nous allons utiliser l'icône dans notre projet, je vais donc montrer l'icône que nous allons utiliser. C'est l'icône que nous allons utiliser signifie cette icône de recherche dans notre projet pour obtenir cette icône de recherche, nous allons utiliser ce site Web, pas ce site Web, nous allons utiliser Font Awesome. Donc, pour obtenir le lien CDN de Font Awesome, il vous suffit de rechercher CDN Js dans votre navigateur et de cliquer sur ce site Web ou d'ouvrir ce site Web Et dans cette entrée de recherche, recherchez simplement font awesome, donc je vais taper font awesome et cliquer sur ce premier lien. Et à partir de là, vous devez cliquer sur ce bouton, copier le bouton Link Tech, cliquer sur ce bouton et votre lien sera copié. Je vais maintenant ouvrir mon code Visual Studio et coller ici en dessous de cette technologie de lien Control V et ma technologie Link seront collés avec le lien CDN. Il s'agit du lien CDN, et voici la technologie Link Il s'agit du lien CDN, et voici la technologie Link Voyons maintenant ce que nous voulons faire d' autre. Comme nous allons utiliser un robot pour faire des polices sur ce site Web, c'est-à-dire pour créer ce projet, nous allons utiliser la police Roboto Donc, pour obtenir cette police, nous allons utiliser ce site Web, Google Phones. Recherchez simplement Google Fonts dans votre navigateur et vous obtiendrez ce site Web. Le lien du site Web est phons.google.com. Dans ce bouton de recherche de polices, vous pouvez rechercher Roboto, ou vous obtiendrez Roboto ici même La première famille de polices elle-même est famille de polices Roboto, il suffit de cliquer dessus Si vous trouvez Roboto ici, vous pouvez cliquer dessus ou rechercher la police Roboto Je vais cliquer sur ce robot et à partir de là, je vais cliquer sur le bouton « Rechercher » Et je vais cliquer sur ce bouton pour obtenir le code intégré puis je vais cliquer sur cette entrée et copier cette partie Seulement celle-ci, vous devez copier, cette URL d'entrée, vous devez copier. Copiez-le, ouvrez votre code Visual Studio et ouvrez votre fichier CSS. Dans ce fichier CSS, je vais coller ce lien que nous copions. J'ai collé cette URL d'entrée dans mon fichier CSS. C'est tout pour notre vidéo de configuration. Commençons maintenant à écrire le code ETL à partir de la vidéo suivante. 3. générer une clé API: Nous allons maintenant générer une clé APA à partir de l'API Pexels. Pourquoi nous utilisons Pexels APA, nous utilisons Pexels APA Comme j'ai cherché Nature ici sur ce site Web et après avoir cherché Nature, j'ai obtenu des photos liées à la nature. D'où j'ai obtenu ces photos, je les ai obtenues grâce à l'API Pexels Pour obtenir des photos, nous allons utiliser l'API Pexels et pour utiliser l'API Pexels, vous devez générer APakey et pour générer APakey devez créer nous allons utiliser l'API Pexels et pour utiliser l'API Pexels, vous devez générer APakey et pour générer APakey, vous devez créer un compte avec Pexels. Il est très facile de créer un compte avec Pixels. Recherchez simplement l'API Pexels dans votre navigateur et cliquez sur ce premier lien ou ouvrez ce premier Ou comme vous pouvez taper cette URL, l'URL est px.com slash APSASF ici, vous pouvez cliquer sur ce bouton Démarrer ou sur ce bouton Rejoindre Je vais cliquer sur ce bouton Rejoindre. Je ne cliquerai pas sur ce bouton Rejoindre. Le bouton Rejoindre fait autre chose. Je vais cliquer sur ce bouton Getted lui-même, et à partir de là, je vais cliquer sur ce bouton de connexion Si vous avez déjà un compte chez Pexels, vous obtiendrez ce bouton de connexion et si vous n' avez pas de compte, vous devez cliquer sur le bouton Je veux télécharger, puis vous pouvez créer votre compte J'ai déjà un compte, je vais donc cliquer sur le bouton de connexion. Une fois connecté à Pexels, vous verrez ce type d'interface Il ne vous reste plus qu'à cliquer sur ce bouton Retour. Vous pouvez également cliquer sur cette icône Pexels. Et vous pouvez taper API dans cette URL, ou bien vous pouvez ouvrir à nouveau ce site Web. Mais maintenant, je veux cliquer sur cette API de barre oblique et maintenant, à partir de là, vous pouvez cliquer sur votre APK Au lieu du bouton de démarrage, nous obtenons maintenant votre APK après avoir créé notre compte et cliquez simplement sur ce bouton, votre bouton APAC Nous avons donc généré avec succès notre APakey. Maintenant, ne perdez pas cet APK. Vous pouvez simplement enregistrer cet APK dans le dossier de votre projet. Je vais donc simplement enregistrer cet APK dans mon dossier de projet et vous devrez créer votre propre APK. N'utilisez pas mon APK car je vais le supprimer et vous ne pourrez pas utiliser cet APA Pexels Vous devez créer votre propre APakey et créer ce projet C'est tout pour cette vidéo. Écrivons maintenant notre code HTML dans le suivant. 4. Construire la structure: Nous allons donc maintenant écrire code TML pour notre projet ou nous pouvons dire que nous allons créer la structure de notre projet en utilisant ITML Nous avons donc déjà créé ce modèle HTML dans notre ensemble Si vous n'avez pas regardé cette série de vidéos, allez simplement regarder cette série de vidéos, sinon vous ne comprendrez pas d'où nous avons obtenu ce type de liens et d'où nous avons obtenu ces URL d'entrée Donc, si vous voulez comprendre d'où nous avons obtenu ces URL d'entrée et d' où nous avons obtenu ce lien génial pour les polices, vous devez regarder cette série de vidéos Dans cette série de vidéos, nous avons écrit une telle quantité de code HTML, ce signifie que nous avons déjà créé notre modèle HTML, qui signifie que nous avons déjà créé notre modèle HTML, puis nous avons lié notre police à notre code HTML, puis nous avons lié notre fichier CSS à notre code HTML, puis nous avons lié notre fichier Ja voice Script Maintenant, nous pouvons écrire notre code HTML et pour écrire notre code HTML, je vais entrer dans cette balise body et dans cette technologie corporelle, je vais créer une balise. Quel type de tag je vais créer pour vérifier que je vais ouvrir mon site Web. Je vais donc simplement ouvrir mon site Web et à l'intérieur de ce site Web, comme vous pouvez le voir, notre image de fond est manquante. Nous allons corriger cette image d'arrière-plan manquante dans ce cours. Cela signifie que plus tard dans ce cours, nous corrigerons ce problème d'image d'arrière-plan. Il ne nous reste plus qu'à créer cette structure. Donc, tout d'abord, je vais créer cet en-tête, puis je vais créer ce champ de saisie, et je vais créer ce bouton avec une icône de recherche. Ensuite, je vais créer cette section photo. Faisons-le. Tout d'abord, je vais créer ces en-têtes. Pour créer cela, je vais étudier cette technologie corporelle et créer un Diff te. Et le nom de classe de la technologie Diff sera Min. Pourquoi j'ai créé cette technologie dif J'ai créé cette technologie diff pour y ajouter CSS et pour créer une balise dif avec le nom de classe Min, vous pouvez simplement taper deep Ce n'est pas en utilisant MD, nous pouvons simplement taper Didot men et nous obtiendrons un tag Diff avec le nom de classe des Je vais entrer dans cette technologie Diff et créer une autre technologie Dif et le nom de classe de cette technologie Diff sera header, type header Et cliquez sur Enter. Nous allons maintenant obtenir une balise Diff avec le nom de classe de l'en-tête Maintenant, dans le cadre de cette technologie différente, je vais créer une technologie Hone Dans cette technologie H one, ce que je vais taper, c'est ce texte d'en-tête. Je vais juste taper, trouver les meilleures photos. Je peux le copier-coller dans cette technologie H one et maintenant je vais créer un champ de saisie. Pour créer un champ de saisie, je vais passer sous ce deck H one et ici je vais créer une autre technologie Diff À l'intérieur de cette balise Diff, je vais créer une technologie de saisie, et le type de cette technologie de saisie, je vais simplement cliquer sur Control jet et le type de cette balise de saisie sera rechercher Tapez search, puis nous donnerons un espace réservé dans cette technologie de saisie. Pourquoi donnons-nous espace réservé ? Qu'est-ce qu'un espace réservé Vous pouvez voir les photos de recherche écrites dans ce champ de saisie. Il s'agit d'un espace réservé. Donc, pour créer un espace réservé, vous obtenez un attribut, le nom de l'attribut est placeholder, tapez simplement Dans cet espace réservé, vous pouvez taper n'importe quoi ou écrire n'importe quoi et cet élément sera affiché dans ce champ de saisie Maintenant, nous voulons afficher les photos de recherche, je vais donc simplement taper search et ces photos. Je vais donner un nom de classe à ce champ de saisie. Le nom de la classe sera recherché. Je vais maintenant créer un jeu de boutons en dessous de ce champ de saisie. Pour créer un jeu de boutons, je vais simplement taper button et je dois également donner un nom de classe à l'intérieur de ce jeu de boutons. Le nom de classe de cette balise de bouton sera BTN one. Et maintenant, nous devons créer l'icône de recherche à l'intérieur de cette technologie de boutons. Quelle icône de recherche, cette recherche, nous devons créer. façon dont nous allons créer cette icône de recherche créera cette icône de recherche en utilisant cette police géniale. Si vous visitez Font Awesome et que vous tapez simplement rechercher dans cette entrée de recherche, vous obtiendrez une icône de recherche. L'icône de recherche comportera un Itech et dans ce Tech, il y aura un nom de classe. Et quel sera le nom de la classe, le nom de la classe sera bien plus solide que celui d'une loupe Juste une sorte de Dash Solid. Et puis tapez un tiret à la loupe, puis une loupe. Il s'agit du nom de classe pour cette icône de recherche. Si vous souhaitez trouver les noms de classe, vous pouvez simplement visiter ce site Web, rechercher l'icône et cliquer sur ces icônes pour obtenir le nom de classe de ces icônes. L'icône que nous utilisons signifie l'icône de recherche que nous utilisons. Le nom de classe de cette icône de recherche est far des solid, far as magnifying, des glass Maintenant, si je l'enregistre, jetons un coup d'œil dans notre navigateur, je clique sur le bouton droit de la souris ou je l'ai déjà ouvert sur notre serveur en direct. Voici notre serveur live et voici à quoi ressemble notre projet actuellement. Nous avons créé une technologie d'en-tête qui signifie une technologie H, puis nous avons créé un champ de saisie et dans ce champ de saisie, nous avons écrit un espace réservé et ce qui est écrit à l'intérieur de l'espace réservé, ce sont des photos de recherche écrites Ensuite, nous avons créé une technologie à un bouton avec l'icône de recherche. Voyons maintenant ce que nous devons créer. Nous devons créer une section photo et ces photos ne seront affichées qu'après avoir récupéré les données de l'APA et que nous les aurons récupérées depuis l' API Dans le script Java Script, la vidéo signifie dans la vidéo suivante ou à côté de la vidéo suivante. Maintenant, nous ne faisons que créer la structure. Cela signifie que nous ne faisons que construire cette structure. Je vais créer cette photosexon et après avoir créé cette photosexon, je créerai ce Je dois créer une seconde différente pour créer un sexon différent, je vais passer en dessous de cette balise diff et je vais créer une balise sexon Tapez simplement sexon dans ce sexe et cette technologie, je vais en créer un Defteg Le nom de classe de ce Diff sera name, tapez div point name puis Nous obtenons maintenant un Difteg avec le nom de classe Name. Dans cette technologie Diff, j'écrirai ou je créerai une balise H deux à l'intérieur de cette balise H deux, ce que je vais écrire, j'écrirai des photos, je copierai ceci Et collez-le ici. Maintenant, je vais passer en dessous de cette technologie dif ou en dessous de cette secantg. Je ne vais pas aller en dessous de ce sexe et de cette technologie parce que ce que je veux faire, c'est créer une technologie dif où nous afficherons Maintenant, nous n'avons plus trop de photos, mais nous devons créer une technologie Diff pour afficher ces photos Après avoir récupéré les images de l'APA, nous les afficherons à l'intérieur de ce fichier PDF Nous devons créer la technologie Diff. Je vais passer en dessous de cette technologie dif et créer une autre technologie Diff et le nom de classe de cette balise if sera photos Cliquez sur Enter, puis nous avons obtenu une balise Diff avec le nom de classe des photos Nous devons maintenant créer un autre bouton. Pour créer ce bouton plus, je vais passer en dessous du sexe et du t et je vais créer un autre Difteg et dans ce Diftek, je vais lui donner un nom, les noms un nom Le nom de la classe puis le nom de la classe seront des mores. Je vais créer une technologie à un bouton, créer simplement un bouton ou simplement taper bouton et le nom de classe de ce bouton sera plus important. Tapez plus puis tapez plus à l'intérieur ce bouton car nous créons un bouton plus, donc plus. Cela signifie que parce que c'est écrit davantage dans ce bouton, c'est pourquoi j'en ai écrit plus dans cette balise de bouton. Je vais enregistrer ceci et jeter un coup d'œil dans notre navigateur pour contrôler et ouvrir ce navigateur. Comme vous pouvez le constater, nous avons créé avec succès notre structure en HTML. Dans les prochaines vidéos, nous allons récupérer les données de l' API et nous allons afficher ces données, ce qui signifie que nous allons afficher ces images dans les prochaines vidéos, Dans la vidéo suivante, récupérons les données de l'API. 5. récupérer des données à partir d'api: Nous allons maintenant faire la demande de récupération à partir de l'API Pexels. Pour faire une demande de récupération, vous devez obtenir le point de terminaison APA Pour obtenir le point de terminaison APA, vous pouvez rechercher l'API Pexs dans votre navigateur et ouvrir ce site Web Et c'est le même site Web que nous utilisons pour générer notre ApiKey Vous devez donc ouvrir le même site Web, et dans le même site Web, vous devez cliquer sur la documentation. Et si vous avez oublié votre APK, vous pouvez simplement cliquer sur ce bouton pour obtenir votre APakey et vous obtiendrez votre APAK si vous avez oublié Donc, téléchargez simplement cet APake si vous ne cliquez pas sur ce bouton et vous obtiendrez cet APK, copiez-le et laissez-le maintenant, copiez-le et partez puis cliquez sur ce bouton de documentation Et à l'intérieur de ce bouton de documentation, nous aurons beaucoup d'options car Pexels APA nous offre de nombreuses fonctionnalités et de nombreuses options à implémenter sur notre site Web, mais nous voulons simplement implémenter la fonction de recherche et la fonction td photos Alors, quelle est cette fonctionnalité de TD Photos ? À l'aide du point de terminaison APA td photos, nous pouvons afficher des images aléatoires sur notre site Web. Cela signifie que le projet que nous créons dans ce projet, nous pouvons afficher des images aléatoires à l'aide ces photos td et en utilisant l'annexe de recherche de photos , nous pouvons rechercher des photos Je vais maintenant faire une demande de récupération dans ce point de terminaison AP Et après avoir fait une demande de récupération, j'obtiendrai une image liée au strum de recherche Cela signifie que peu importe ce que je rechercherai, j' obtiendrai les images ou les données relatives à ce rhum de recherche. C'est le point APA que nous allons utiliser pour faire une demande de recherche APA, et ce point de terminaison APA nécessite certains paramètres Des paramètres tels que la requête sont obligatoires, signifie que vous devez donner ce paramètre de requête dans ce point APA , sinon cet AP ne fonctionnera pas . Quelle est la signification de la requête ? Dans la requête, nous pouvons rechercher la requête. C'est écrit ici. La requête de recherche signifie ce que vous voulez rechercher, je veux rechercher les photos liées à la nature, puis j'écrirai une requête égale à la nature, puis j'obtiendrai des photos liées à la nature. Si je souhaite rechercher des photos liées à l'océan, je vais rechercher ou taper, requête est égale à l'océan et j' obtiendrai des photos liées à l'océan. Vous pouvez simplement copier ce rendez-vous ou vous pouvez copier ce rendez-vous. Dans cet exemple de demande. Dans cet exemple de demande, Appoint, requête est déjà écrite, vous n'avez donc pas à l' écrire vous-même, vous pouvez simplement copier cet Apenpoin, il suffit de le coller et maintenant je veux faire une demande de récupération à ce point de terminaison APA il suffit de le coller et maintenant je veux faire une demande de récupération à ce point de terminaison Pour effectuer une demande de récupération, vous devez créer une méthode de récupération. Dans cette méthode de récupération, vous devez indiquer le point de terminaison APA ou l'URL de l'API Il s'agit de l'URL de l'API , que nous allons utiliser pour récupérer les données Je vais simplement le copier, le supprimer d'ici et le coller dans cette méthode de récupération Je vais cliquer sur Contrôler cela parce que je dois le coller dans le ctix Je vais créer un ctixs et dans ce vectix, je vais coller Et si vous lisez cette documentation Pexels APA, vous apprendrez cela. Nous devons fournir notre clé d'autorisation pour accéder aux données depuis le point de terminaison de l'API ou pour accéder aux données depuis l'URL de l'API. Je vais donc cliquer sur cette autorisation pour vous la montrer. Vous pouvez donc voir qu'une autorisation est requise pour Pexels Toute personne possédant un compte PxS peut demander un APakey, ce que nous avons déjà fait Nous avons notre APakey et en utilisant cette clé APakey, nous pouvons effectuer Alors, comment faire cette autorisation, cela peut être écrit dans cette documentation ou je vais vous montrer comment procéder. Oui, c'est écrit ici, je suppose. vous suffit d'écrire une autorisation et fournir votre clé APA. Il suffit de donner une virgule après cette requête de récupération, cela signifie qu'après cette URL, vous devez donner cette Ici, nous allons fournir la clé d'autorisation. Pour fournir une clé d'autorisation, vous devez créer un crochet bouclé et à l'intérieur des crochets bouclés. J'utiliserai une propriété d'en-tête, des en-têtes à l'intérieur de cette propriété d'en-tête, je créerai un autre crochet bouclé et à l'intérieur de ce crochet, je vais taper authorization et je fournirai l'autorisation de type de clé je vais taper authorization et je fournirai l'autorisation de type l' Vous pouvez voir que vous devez taper un autorisateur comme celui-ci. Je vais copier ce truc et le coller ici. Oui, donc je vais le coller ici. J'ai donc écrit l'autorisation, et ici nous devons fournir notre APakey Vous pouvez donc coller l'APK que vous avez déjà copié. L'APK que nous copions est ici. Si vous n'avez pas votre APK, cliquez simplement sur cet aperçu et dans cet aperçu, vous devez cliquer sur votre bouton APakey et vous obtiendrez votre APakey. Copiez cet APG. Je vais le copier correctement. J'ai donc copié cette clé APakey et je vais créer une variable. Le nom de la variable sera donc essentiel. Je vais créer une chaîne. Dans cette chaîne, je vais coller mon fichier APK. C'est mon APK. Et maintenant, je vais fournir cet APK dans le cadre de cette autorisation. Comment fournir cet APK, je peux simplement taper le nom de la variable dans laquelle j'ai restauré mon APK. Le nom de la variable est key, je vais donc taper key ici. Maintenant, pour obtenir les données de cet APIENPN, nous devons utiliser la méthode, pour utiliser la méthode IL tapez point puis dans cette Nous utiliserons cette méthode first then pour obtenir la réponse de ce point de terminaison APA et nous créerons une autre méthode then pour obtenir les données. Dans cette méthode, il tape une réponse parce que nous allons obtenir une réponse à partir de ce point APA dans cette méthode, donc je vais taper response, et j'utiliserai la fonction flèche. La réponse et la réponse seront au format chaîne, et nous devons convertir ce format de chaîne en JSNFMat Pour convertir cette réponse en JCNFmat, vous pouvez taper le point de réponse Maintenant, notre réponse est convertie en JSNFMat et maintenant je vais créer une autre méthode then, donc dans cette méthode then, je vais transmettre des données ici, puis je vais créer une fonction flèche et à l'intérieur de cette fonction flèche, je vais créer un À l'intérieur de ce crochet, je vais taper Console log afin que nous puissions obtenir les données contenues dans notre type de console, c'est-à-dire console point log Dans ce journal de console, ce que je vais faire, c'est simplement enregistrer ces données sur la console. Maintenant, si nous l'enregistrons et ouvrons notre navigateur, je vais également enregistrer chaque fichier de vignette et cliquer sur Ouvrir avec le serveur Live. Et je vais cliquer sur Valve pour obtenir les données. onglet de notre console est ouvert et dans ce fichier de consultation, vous pouvez voir que nous obtenons un objet et qu'à l'intérieur de cet objet, si je le développe dans cet objet, nous obtenons des données relatives à la requête de recherche dans la nature car dans cette requête, il s'agissait de nature écrite Nous obtenons les images ou les données en fonction de notre requête de recherche. Où sont nos images ? Les images se trouvent dans ce tableau de photos. Développez ce tableau de photos et à l'intérieur de ce tableau de photos, vous devez agrandir cet objet à l'intérieur de cet objet, il y a le titre de cette image , puis il y a la hauteur de cette image. Et le nom de l'image du photographe est là , puis l'URL du photographe est là, puis les images contenues dans ce SRC Et à l'intérieur de ce SRC, l'image est très grande Si vous souhaitez obtenir la taille nscape de l'image, vous pouvez taper le point de données Landscape, et vous obtiendrez une image au format paysage Et si vous voulez obtenir une image de grande taille, vous pouvez obtenir une image de grande taille. Vous pouvez obtenir des images de n'importe quelle taille. Donc, si vous souhaitez obtenir une dizaine de photos liées à ce strum de recherche Je souhaite obtenir dix photos liées à ce strum de recherche sur la nature Je peux donc simplement taper dix par page ou maintenant je vais en taper cinq parce que je veux cinq photos, et maintenant je vais obtenir cinq photos liées à la nature. Donc, si je sauvegarde ceci et si j'ouvre cassette de ma console et que vous pouvez voir que nous avons un objet et qu' à l'intérieur de cet objet, il y a des photos et qu' à l'intérieur de ces photos, il y a cinq éléments , il y a cinq photos. Développez le tableau de photos. Il s'agit de la première image. Il s'agit de la deuxième image. Il s'agit des troisième, quatrième et cinquième. Nous avons obtenu cinq photos d' après notre recherche. Dans la prochaine vidéo, nous allons afficher ces images dans notre projet. 6. afficher des données: Nous allons maintenant afficher les photos à récupérer dans notre projet Pour afficher ces photos, je vais ouvrir mon JavaScript et dans ce script Java, je vais entrer dans cette méthode puis dans cette méthode, je dois sélectionner ce tableau de photos. De quelle série de photos je parle ? Je parle de cette série de photos. Pour sélectionner ce tableau de photos, nous pouvons taper des photos par points de données. Pourquoi saisir des données ? Parce que nous avons transmis des données dans cette méthode. C'est pourquoi nous devons saisir des données ici. Dans cet objet de données, nous allons sélectionner ce tableau de photos, taper un point et taper des photos. Maintenant que notre tableau de photos est sélectionné, nous pouvons étendre ce tableau de photos et vérifier ce que nous voulons faire. À l'intérieur de cette série de photos, il y a cinq éléments. Et à l'intérieur de chaque élément, il y a beaucoup d' informations sur cette photo. si je développe cette première photo, vous pouvez voir le titre de la photo, puis nous avons le nom du photographe, son identifiant, son URL. Ensuite, nous avons obtenu l'image ce SRC et les images dans ce SRC et les images sont de différentes tailles, comme le paysage, la taille, la grande taille, la taille moyenne Dans ce projet, nous allons donc utiliser des images de grande taille. Alors maintenant, ce que je vais faire, je veux accéder à cette image de grande taille. Donc, pour accéder à cette image de grande taille, je vais d'abord en créer une pour chaque boucle et ce que fera cette boucle de forage, cette boucle de fourrage itérera sur ce tableau de photos, et je souhaite créer une technologie de différenciation pour chaque élément de ce tableau de photos Pour créer une technologie Diff pour chaque élément de ce tableau de photos, je peux utiliser la méthode du forage Il suffit donc de taper des photos par points pour chacune. Supprimez ce tableau d'ici. Dans ce paramètre, je vais passer une image, donc je vais taper image. Maintenant, la signification de cette image correspond aux éléments contenus dans ce tableau de photos. Fait référence à cette image. Si vous tapez des images, les éléments contenus dans le tableau de photos seront des images. Maintenant, je ne vais taper que l'image. Maintenant, cette image fait référence aux éléments contenus dans ce tableau de photos. Ce sont les éléments. Dans ce tableau de photos, vous pouvez voir ces cinq éléments. Ces cinq éléments sont maintenant des images parce que je tape une image dans cette fonction Cavey. Maintenant, je veux créer une technologie dif pour chaque image, créer Diftech pour chaque image, je vais créer une variable et le nom de la variable sera image dif IMG et DIV Dans cette variable, je vais créer une DefteGT, créer une technologie Diff, nous obtenons Le nom de la méthode est document point create element. Je vais taper document point create element. Dans quel élément nous allons créer, nous allons créer un type de DFelement différent. Nous avons donc maintenant créé une technologie dif pour chaque élément de ce tableau de photos. Maintenant, je vais ajouter un nom de classe dans cette technologie de différenciation. Pour ajouter un nom de classe dans ce Diftek, je peux écrire le nom de la variable Le nom de la variable est image Dip, je vais donc simplement taper point clalis point classList point AD Et en utilisant cette méthode, nous pouvons ajouter un nom de classe dans ce Difteg Donc, pendant que nous ajoutons un nom de classe dans cette technologie Diff, nous ajoutons un nom de classe dans ce DFTekt. Ajouter du CSS signifie ajouter du style à cette technologie Diff, nous ajoutons Le nom de la classe sera photos. Tous les types de photos, PHOTOS, photos. Mais nous avons déjà écrit photos IS, donc je vais en ajouter une de plus à l'intérieur de ces photos. Ces photos seront donc le nom de classe de ce Deftch et maintenant je vais entrer dans cette technologie de différence, ce qui signifie que je vais sélectionner le tamoul intérieur de cette technologie if et je vais créer une autre technologie Df cette technologie if et je vais créer une autre technologie Pour sélectionner l'innerHTML de cette technologie dif, je vais taper ImgDif point Dans cette technologie Diff, je vais créer une autre dftech. Pour créer un autre tag Diff, vous devez utiliser Bactix, créer un Bactex et à l'intérieur de ce Bactex , vous pouvez Lorsque je crée une technologie de différenciation, je peux simplement taper DV et je donnerai également un nom de classe à ce div Le nom de la classe sera Js Photos. Ensuite, dans cette technologie de définition, je vais créer une technologie de paragraphe. Donc, pourquoi je crée cette technologie de paragraphe, je crée cette technologie de paragraphe pour afficher le nom du photographe. Alors, comment afficher le nom de ce photographe. Pour afficher le nom du photographe, vous pouvez sélectionner développer ce tableau de photos, et à l'intérieur de ce tableau de photos, vous pouvez développer ce premier élément. Il suffit donc de développer ce premier élément, et à l'intérieur de ce premier élément, vous pouvez voir le photographe. Photographe est le nom du photographe. Donc, pour accéder au nom de ce photographe, je peux maintenant taper ce que je peux taper, je peux taper image point photographer. Je vais créer un modèle de renvoi dans le texte de ce paragraphe. Pour créer un modèle de texte, j'utiliserai ce symbole d'outil, puis j'utiliserai À l'intérieur de ce crochet bouclé, je peux taper une image. Pourquoi je tape une image, je tape une image parce que j'ai passé une image dans ce fourrage Il suffit donc de taper une image puis un point photographe pour obtenir le nom du photographe. Je vais donc vérifier l'orthographe. Je peux simplement le copier et le coller ici. Maintenant, dans ce paragraphe te, nous allons obtenir le nom du photographe de l'image qui sera affichée, et maintenant je vais fermer ce paragraphe technique et maintenant je vais afficher l'image. Pour afficher l'image, je vais créer une technologie d'image. Pour créer une technologie d'image, je vais taper IMG, puis je dois donner un SRC Quel sera le SRC SRC ? Point de l'image, point arc, grand. Comment agrandir l'image HRC ? Comme vous pouvez le voir, nous devons sélectionner ce SRC et à l'intérieur de ce SRC, nous devons sélectionner cette taille La taille est donc grande, ce qui signifie que nous allons utiliser une image de grande taille. Je vais donc créer ce modèle reters et à l'intérieur de ce modèle Eaters, je peux taper l'image ARC et la taille de l'image La taille de l'image sera grande, je vais donc taper en grand. Et je vais fermer cette technologie, donc pour fermer cette technologie, je vais juste taper SLS, puis Nous allons donc maintenant créer un bouton de téléchargement. Donc, pour créer le bouton de téléchargement, je vais utiliser Anchor Tech et HRF dans ce HRF, je vais taper la taille de l'image Je tiens à préciser que je vais simplement le copier-coller et maintenant les images téléchargées seront de leur taille d'origine. Je vais supprimer ce gros et je vais taper l'original. Maintenant, je vais fermer ce DefText fermer cette technologie Diff, je peux simplement taper DF. Maintenant, je vais ajouter cette image dif. Avec ce DIF, cela signifie que la technologie Diff que nous avons créée dans ce code HTML, ce dif signifie que la technologie Diff que nous avons créée dans ce code HTML, ce dif dans ce code HTML, ce Maintenant, je dois sélectionner cette photo div dans mon script Java pour sélectionner cette photo si je vais créer une variable Et le nom de la variable sera photos ou je peux taper une photo. Pour sélectionner cette option, je vais utiliser le sélecteur de requête par point de document, puis le nom de la classe Quel est le nom de la classe ? Je dois vérifier le nom de ma classe. Le nom de la classe est photos, il suffit donc de taper des photos. Maintenant, ce que je vais faire, je vais ajouter ces éléments, je vais ajouter ce dif dans ce DFTech Pour ajouter ce div dans ce Difteg, je peux simplement taper photo point ApenhilPhoto point ApenhilPhoto point ApenhilD ce que je veux ajouter, je veux ajouter cette image di, donc je vais simplement taper image DIF photo point ApenhilPhoto point ApenhilPhoto point ApenhilD ce que je veux ajouter, je veux ajouter cette image di, donc je vais simplement taper image DIF. Je vais enregistrer ceci et jeter un coup d'œil dans notre navigateur. Tout fonctionne ou pas. Je vais le recharger. Je vais donc ouvrir à nouveau mon serveur live, fichier HTML, et cliquer sur Ouvrir avec Live Server Et maintenant, comme vous pouvez le voir, nous obtenons le nom du photographe, nous obtenons l'image et le lien de téléchargement. Mais je ne vois aucun lien de téléchargement. Pourquoi je ne vois aucun lien de téléchargement ? Je ne vois aucun lien de téléchargement car je n'ai rien écrit dans cette machine HRF à l'intérieur de ce robinet d'ancrage Je dois donc taper télécharger dans ce robinet d'ancrage, donc tapez simplement télécharger Et fermez ce ycretc maintenant, disons que nous allons jeter un œil dans notre navigateur Maintenant, comme vous pouvez le voir, nous obtenons également le bouton de téléchargement. C'est tout pour cette vidéo. Maintenant, dans la vidéo suivante, nous allons créer la fonctionnalité. Quel type de fonctionnalité ? La fonctionnalité sera la suivante : chaque fois que nous rechercherons des photos, nous obtiendrons les photos associées à ce terme de recherche. Nous allons créer cette fonctionnalité de recherche dans la prochaine vidéo. 7. fonctionnalité de recherche: Nous allons donc maintenant créer une fonctionnalité de recherche pour ce projet. Et après avoir créé cette fonctionnalité de recherche, nous pouvons simplement rechercher les photos que nous voulons rechercher comme je veux rechercher des photos de nature, puis je peux simplement taper Nature ear et cliquer sur ce bouton, puis j'obtiendrai des photos liées à la nature. Donc, pour créer ce type de fonctionnalité, je vais ouvrir mon codateur et dans ce codateur, je vais ouvrir Et dans ce fichier Java Sri, nous devons sélectionner certains de ses éléments tamouls Quel élément tamoul je veux sélectionner, je veux sélectionner cette entrée de recherche, puis je veux sélectionner cette technologie de bouton, puis je veux sélectionner cette autre technologie de bouton Sélectionnons ces trois éléments pour sélectionner l'entrée de recherche, je vais créer une variable. Le nom de la variable sera saisie de recherche, recherche puis saisie, puis j'écrirai le sélecteur de requête par points du document Ce que je vais taper dans ce sélecteur de requête documenté, c'est le nom de la classe Le nom de la classe est search, il suffit de copier cette recherche , puis de taper point et Control V, qui collent cette recherche. Je vais maintenant copier cette entrée de recherche et la coller ici. Maintenant, ce que je veux sélectionner, sélectionner cette technologie de bouton. Le nom de variable de cette balise de bouton sera BTN, puis le nom de classe sera BTN one. Vérifie le nom de la classe. Le nom de la classe est BTN. Je vais simplement sélectionner cette technologie de bouton et maintenant je vais créer une autre variable, le nom de la variable sera plus élevé Je vais donc en taper davantage parce que je sélectionne ce bouton plus. Je peux simplement le copier et le coller ici et le nom de la classe sera plus important. Vérifie le nom de la classe, c'est plus ou pas. Donc oui, le nom de la classe est plus important. Nous avons donc sélectionné ces trois éléments en JavaScript, maintenant ce que je veux faire. Maintenant, je veux créer quelques fonctions. Donc, première fonction, je vais créer pour ce fetch. Cela signifie que cet appel de récupération effectuera cet appel de récupération dans une Je vais donc créer une fonction. Le nom de la fonction chargera les photos. J'ai créé cette fonction de chargement de photos , et maintenant je vais simplement copier ces appels de récupération, je vais tout copier, et je vais simplement le coller dans cette fonction Et je vais passer un paramètre dans cette fonction de chargement de photos. Le nom du paramètre sera Trum. Pourquoi je passe Trum ici, je passe Tru parce que je veux obtenir un tambour d'entrée signifie que je veux obtenir la valeur d'entrée dans ce trum. C'est pourquoi je passe Trum dans ce chargement de photos Tu comprendras pourquoi je passe Trum. Maintenant, si tu n'as pas compris, tu comprendras après un certain temps. Je vais vous expliquer pourquoi j'ai créé cette fonction. J'ai créé cette fonction parce que je veux s'exécute chaque fois qu' un bouton est cliqué Cela signifie que chaque fois que vous cliquez sur ce bouton, je veux que cette fonction s'exécute Donc, chaque fois que l'on cliquera sur le bouton « Plus » , alors j'exécuterai cette fonction de chargement de photos Je vais maintenant créer une autre fonction. Le nom de la fonction sera Rechercher des photos, il suffit de créer une fonction et le nom de la fonction sera Rechercher des photos, puis je repasserai Tram dans les photos de recherche. Tramez puis créez un support bouclé et à l'intérieur ce support bouclé, qu'est-ce que je veux faire ? Je veux appeler cette fonction de chargement de photos. Il suffit donc d'écrire des photos de chargement. Et passez le tambour à l'intérieur de ce chargement de photos. Passez le tambour. Maintenant, d'où vient ce tambour. Nous allons intégrer ce tambour à une autre fonction. Cela signifie que je vais créer un écouteur d' événements dans cette technologie de boutons, donc je vais créer celui-ci ou je vais sélectionner ce bouton qui signifie ce bouton de recherche Teck, et à l'intérieur de ce bouton, j'ajouterai un écouteur d'événements et quel événement ce bouton écoutera. Ce bouton cliquera sur événement, donc tapez simplement clic puis virgule, puis je créerai une Cette fonction sera exécutée chaque fois que cliquerez sur ce bouton J'ai donc créé une fonction de flèche et dans cette fonction de flèche, qu'est-ce que je veux faire ? Je veux appeler cette fonction de recherche de photos parce que chaque fois que on clique sur ce bouton de recherche, je veux appeler cette fonction et chaque fois que l'on clique sur cette fonction , j'appelle cette fonction de chargement de photos, puis nous ferons une demande de récupération et certaines photos seront affichées dans notre certaines photos seront affichées dans Je veux appeler quelle fonction, je veux appeler la fonction de recherche de photos dans cet écouteur Evet Il suffit donc de taper « rechercher des photos » et nous allons maintenant transmettre la valeur de Trum dans les photos de recherche Quelle sera la valeur de Trum ? La valeur de Trum sera la valeur d'entrée ? Donc, pour obtenir la valeur d'entrée, vous pouvez simplement taper une entrée de recherche. Pourquoi je tape une entrée de recherche ici, je tape une entrée de recherche parce que le nom de la variable dans laquelle nous avons sélectionné le champ de saisie est une entrée de recherche. C'est pourquoi. Nous voulons donc obtenir la valeur d'entrée. Il suffit donc de taper le nom de la variable qui est entrée de recherche, puis la valeur du point. Vous avez maintenant la valeur d'entrée dans les photos de recherche et nous avons transmis la valeur d'entrée dans ce tambour. Maintenant, ce tambour a l' excédent de cette valeur d'entrée, puis nous avons retransmis cette valeur d'entrée dans cette fonction de chargement de photos sous le nom de trum. Maintenant, là où je veux utiliser ce rhum, je veux utiliser ce tambour dans cette requête. Quel que soit le lien que l'utilisateur attachera dans le champ de saisie, ce tambour sera recherché. Je crée un modèle utéral ici et à l'intérieur ce modèle latéral pour créer un modèle de datation, je dois écrire le symbole du dollar également à l'intérieur de ce symbole du dollar, ce que je vais transmettre, je vais passer le tambour dedans Les littéraux du modèle signifient que je transmets trum dans cette requête Quelle est la valeur de ce strum ? La valeur de ce strum est la valeur d'entrée. Quelle que soit la valeur d'entrée saisie par l'utilisateur, cette valeur d'entrée est strum Comme la voiture saisie par l'utilisateur. Nous allons entrer dans cette requête. La requête sera égale à voiture, puis nous rechercherons photos liées à la voiture si l'utilisateur a tapé tigre La valeur de cette strum sera tiger, puis nous passerons tiger dans cette requête et nous obtiendrons des photos liées au tigre J'espère que vous avez compris pourquoi nous avons écrit Trum ici et comment nous obtenons des valeurs dans ce trum. Maintenant, je vais ajouter un écouteur à ce bouton plus, donc je peux simplement le copier et le coller ici au lieu de BTN, je vais en taper plus. Ainsi chaque fois qu'un utilisateur clique sur ce bouton plus, ce que nous voulons faire, nous voulons appeler cette fonction Charger des photos Copiez cette fonction de chargement de photos et collez-la ici, puis transmettez cette valeur d'entrée de recherche dans cette fonction de chargement de photos. Il suffit donc de transmettre cette valeur d'entrée de recherche. Et chaque fois que l'utilisateur clique sur ce bouton plus , nous voulons également agrandir cette page. Donc, pour la page, nous obtenons un autre paramètre, le paramètre est page. Je vais donc ouvrir cette documentation de l' API Pexels. Donc, dans cette documentation, je vais d'abord ouvrir cette documentation. Donc, si je clique sur les photos de recherche dans cette documentation, j'obtiendrai ce point de terminaison d'API, et vous pourrez voir les paramètres. Et à l'intérieur de ce paramètre, nous pouvons également passer la page. Alors, où est la page Comme vous pouvez le voir, nous avons une page ici et la page par défaut est une, mais nous voulons l'obtenir. Nous voulons agrandir la page chaque fois que l'utilisateur clique sur le bouton Moi Nous ajouterons donc ce paramètre de page dans notre lien. Copiez cette page, puis ouvrez votre code VS. Dans ce point de terminaison d'API, vous pouvez simplement taper ce symbole de fin, puis saisir le paramètre. Le paramètre est page. Maintenant, ce que je veux faire c'est agrandir cette page chaque fois que l'utilisateur clique sur ce bouton plus. Pour ce faire, je vais simplement utiliser données du modèle et, à l'intérieur ce modèle, je vais transmettre D'où nous allons obtenir la valeur de la page, nous allons obtenir la valeur de la page Je dois créer une variable de page, donc je vais simplement créer une variable de page et la valeur Bddefault de la page sera créée cette variable et la valeur Bddefault de cette page sera de un chaque fois que l'utilisateur clique sur ce bouton, nous augmenterons la valeur de cette Pour augmenter la valeur de cette page, nous allons simplement taper page plus plus. Ainsi, chaque fois que l'utilisateur clique sur ce bouton Plus, la valeur de la page augmente, et cette valeur de page augmente également, et nous obtenons une autre page, une autre page. Cela signifie que chaque fois qu'un utilisateur clique sur le bouton « Plus » de cette page, cette page sera agrandie et nous en aurons une nouvelle. C'est donc la simple logique qui sous-tend tout cela. Alors maintenant, nous pouvons l'enregistrer et jetons un coup d'œil dans notre navigateur. Alors enregistrons cela également et ouvrons votre navigateur, cliquez dessus pour ouvrir ce truc, rechargez-le, nous rechercherons des voitures et cliquerons sur ce bouton de recherche Oui, alors maintenant, comme vous pouvez le voir, nous recevons des photos liées à des voitures. C'est donc tout pour cette vidéo dans la vidéo suivante, nous ajouterons également ces photos aléatoires. 8. créer une section de photos tendance: Nous allons maintenant créer cette sexion photo recommandée ou nous pouvons dire sexon photo aléatoire Donc, pour obtenir ces photos, nous allons utiliser un autre Appoint et pour obtenir un autre Appoint, je vais ouvrir cette documentation de Pexels, et à partir de la documentation de Pexels , vous devez Cliquez donc sur CutdPhotos et après avoir cliqué sur td photos, vous obtiendrez ce point de terminaison d'API et en utilisant ce point de terminaison AP, nous pouvons obtenir des photos td Cela signifie que nous obtiendrons des photos aléatoires sinon vous pouvez lire ici ce que fait ce point de terminaison AP. Ce point de terminaison vous permet de recevoir des photos en temps réel sélectionnées par le Pixel Steam Nous ajoutons au moins une nouvelle photo par heure à notre liste organisée afin que vous obteniez toujours une sélection changeante de photos tendance Vous comprenez maintenant ce que ce point de terminaison APA nous apportera. À l'aide de ce point de terminaison API, nous obtiendrons des photos tendance, qui sont sélectionnées par la PixelTeam et une de ces photos tendance sera Pour que nous obtenions une sélection changeante de photos tendance. Copions donc ce point de terminaison d'application. Pour copier cet AP et ce point, vous pouvez directement copier ce rendez-vous ou vous pouvez copier cet AP et ce point. La raison pour laquelle je copie cet exemple demande AP et point. Je copie cet AP et ce point car ils ont déjà implémenté le paramètre par page. Vous obtenez certains paramètres ici, page, puis par page. Nous allons utiliser les deux paramètres. L'un des paramètres est déjà utilisé à l'intérieur de ce point d'accès et je vais donc copier ce point d'accès. Je vais le coller dans mon fichier de script Java. Où je vais coller, je vais juste coller ici. Control V. Maintenant, j'ai collé ce point de terminaison de l' API QTDPhotos. Alors, qu'allons-nous faire ? Nous allons maintenant vérifier si ce tambour est vrai, puis nous l' appellerons ap and point, et si ce tambour est faux, nous appellerons ce rendez-vous. Pourquoi vérifions-nous que ce tambour est vrai ou faux ? Nous vérifions que ce tambour est vrai ou faux, car lorsque ce tambour sera vrai, ce trum deviendra vrai chaque fois que l'utilisateur tape quelque chose dans ce champ de saisie. Donc, si l'utilisateur tape quelque chose dans ce champ de saisie, le tambour sera vrai et nous appellerons les photos de recherche ap and point. Et si l'utilisateur ne tape rien dans ce champ de saisie, alors ce trum sera faux, puis nous appellerons ce point de terminaison Q td photos Ap. Pour ajouter une instruction IS dans ces deux points de terminaison AP, nous pouvons simplement supprimer ce point de terminaison AP et je vais créer une variable Je vais simplement le copier et le supprimer puis je vais taper l'URL ici, puis je vais créer cette variable d'URL. Je vais donc simplement créer la variable URL const URL. Et dans cette variable d'URL, je vais coller ce point de terminaison d'API. Donc, il suffit de Control V, et j'ai collé ce point AP pour rechercher des photos Cela signifie que ce rendez-vous est pour les photos de recherche et que ce point d'API est pour les photos Qtd Maintenant, nous allons vérifier si ce trum est vrai, puis nous l'appellerons Apenpoint si ce trum est faux, puis nous l' appellerons ap and Je vais juste aller ci-dessous et je vais taper Trum ici. Et maintenant je vais utiliser l'opérateur ternaire. Vous pouvez également utiliser une instruction ES normale, mais je veux vous montrer comment utiliser l' opérateur ternaire car les opérateurs ternaires sont très utiles Si vous ne savez pas comment utiliser l'opérateur ternaire, je vais vous apprendre maintenant L'opérateur ternaire est un point d'interrogation distinct, puis une colonne Si ce rhum est vrai, ce point d'interrogation signifie que si ce trum est vrai, alors nous exécuterons le bloc de code contient et si le trum est faux, nous exécuterons le bloc de code à l'intérieur de cette colonne. J'espère que vous avez compris cette syntaxe. Cette syntaxe est très basique. Si vous ne comprenez pas cette syntaxe, vous pouvez utiliser une instruction EFLC normale Mais j'espère que vous connaissez ces opérateurs ternaires. C'est pourquoi j'utilise ce truc. Ce que nous vérifions, nous le vérifions. Je vais simplement supprimer cette colonne d'ici. Oui, maintenant ce que nous sommes en train de vérifier, ce truc est vrai ou non. Ce point d'interrogation indique si ce tambour est vrai ou non. Donc, si ce tambour est vrai, nous exécuterons le code à l'intérieur de ce point d'interrogation. Alors, quel code voulons-nous exécuter à l'intérieur de ce point d'interrogation ? Si ce tambour est vrai, nous voulons exécuter ce bloc de code. Et si ce tambour est faux, nous voulons exécuter ce bloc de code. Donc, pour faux, vous devez utiliser cette colonne, et maintenant si ce tambour est faux, nous utiliserons ou nous appellerons cet AppPoin . Supprimez simplement ce point de terminaison AP ici et créez un Batix et contrôle V. Donc, si c'est vrai, nous appellerons cet ap and point et si ce terme est faux, nous appellerons Par page, je veux dix photos, puis nous obtenons un autre paramètre, autre nom de paramètre est la page Ils U. C'est un autre paramètre que nous allons utiliser, ce paramètre de page, il suffit de taper page Symbole puis page. Et Page s'en chargera. Il suffit de le copier et de le coller ici. Pourquoi j'ai copié et collé cette page ici ? Parce que si quelqu'un clique sur ce bouton Plus, nous voulons générer de nouvelles photos. C'est ça. Je vais l'enregistrer et nous allons le voir dans notre navigateur. Enregistrez-le également et cliquez sur Ouvrir avec Live Server. Donc, comme vous pouvez le constater pour l'instant, nous n'obtenons rien, pourquoi n'obtenons-nous rien ? Nous devons vérifier. Il n' y a donc aucune erreur dans cet onglet de console. Nous devons vérifier notre syntaxe. Il se peut qu'il y ait une erreur dans notre syntaxe. L'erreur peut donc être une vague de coûts ici. Donc, au lieu de const, nous devons taper let. Sauvegardons donc ceci , contrôlons S et jetons un coup d'œil dans notre navigateur. Rechargeons-le et ajouterons une variable de page ici, sorte que page et page soient égales à une Et maintenant, nous pouvons dire que nous pouvons évoluer dans notre navigateur. Alors chargeons ceci. Cela ne fonctionne donc pas pour le moment. Alors réglons ce problème dans le prochain 9. corriger les erreurs: L'erreur est donc que nous avons oublié d'appeler cette fonction. Nous devons appeler cette fonction. J'appellerai cette fonction de chargement de photos ici. Copiez simplement le nom de cette fonction, puis nous pouvons le coller ici et l'appeler. Enregistrez ceci et jetons un coup d'œil dans notre navigateur. Maintenant, comme vous pouvez le voir, nous obtenons les photos les mieux notées. Cela signifie que nous obtenons toutes les photos recommandées ou que nous pouvons voir des photos tendance Et si nous cliquons sur ce bouton « Plus », où est ce bouton « Plus » ? Ouais Si vous cliquez sur le bouton Plus, je le zoomerai pour que vous puissiez voir. Si nous cliquons sur ce bouton « Plus », nous aurons plus de photos. Comme vous pouvez le voir, nous avons d'autres photos. Donc ça y est. Dans la vidéo suivante, ajoutons un style CSS et donnons à notre application l'apparence suivante. Rencontrons-nous dans la vidéo suivante. 10. styliser l'application: Nous allons donc maintenant ajouter du CSS dans notre projet, et nous n'allons pas écrire de CSS. Pourquoi n'écrirons-nous pas de CSS ? Nous n'écrirons pas de CSS car cela prendrait beaucoup de temps. Et je suppose que si vous apprenez le JavaScript, vous connaissez déjà le CSS. C'est pourquoi j'ai l'impression qu'écrire du code CSS n'est qu' une perte de temps. C'est la raison pour laquelle je vais simplement copier-coller mon code CSS, et je vous fournirai ce fichier de code CSS. Je vais donc simplement ouvrir mon fichier CSS. Vous trouverez ce code ci-dessous dans la section des ressources. Il suffit donc de copier ce code. Après avoir copié ce code, il vous suffit de le coller dans votre fichier CSS. Il s'agit de notre fichier CSS sur lequel nous travaillons actuellement. Je vais juste le coller. Je vais supprimer cette entrée et la coller correctement. J'ai correctement collé mon code CSS. Nous avons sélectionné un sélecteur universel et nous avons ajouté la marge zéro, le rembourrage zéro. Je suppose que vous savez pourquoi nous ajoutons la marge zéro et le rembourrage zéro dans le sélecteur universel Nous ajoutons la marge zéro et le rembourrage zéro car notre page Web contient par défaut une marge et rembourrage et nous voulons supprimer ces marges et ces marges C'est pourquoi j'ai donné zéro à la marge et zéro au rembourrage. J'ai sélectionné ce dif principal, lequel est le dif principal ? C'est le dif principal pour lequel j'ai sélectionné ce dif principal J'ai sélectionné ce dif principal pour créer Dans cet arrière-plan, j'ai ajouté mon image, nom de mon image est JPG à un point. Dans l'URL, j'ai écrit un point JPG. Ça y est, je vais juste vous montrer le code. Je suppose que vous savez comment écrire du code CSS et que vous pouvez bien comprendre ce code CSS. Et si vous ne comprenez pas ce code CSS et que vous rencontrez des difficultés pour écrire le code CSS, vous pouvez simplement m'en informer dans le sexon de discussion et je créerai une vidéo sur ce sujet dès que possible Informez-moi dans l'exon de discussion ou dans l'exon de questions-réponses. Il s'agit de notre code CSS. Et qu'est-ce que ce média et ce mix ? Ce média Nous utilisons cette propriété multimédia pour rendre notre site Web réactif. Donc, si vous connaissez le responsive design, vous savez comment utiliser cette propriété multimédia, nous avons ajouté un mix avec 780 pixels. Notre conception deviendra donc réactive une fois notre page Web sera inférieure à 768 pixels. Si notre page Web devient inférieure à 768 pixels, nous ajouterons ce code CSS dans notre projet. Je vais vous montrer ce code correctement et lentement si vous n'obtenez aucun fichier CSS si vous ne trouvez pas ce fichier CSS. Pour vous aider, je vais simplement le faire défiler lentement. Vous pouvez simplement utiliser des écrans de texte si vous n'avez pas trouvé le fichier CSS. Si vous avez trouvé un fichier CSS, vous pouvez simplement copier et rythmer ce code. Il s'agit de notre code CSS. Voyons maintenant si nous devons corriger quelque chose dans notre JavaScript. Avant cela, je vais simplement enregistrer ceci et enregistrer mon index ou mon fichier HTML. Je supprime ce fichier CSS et maintenant je l'ouvre sur notre serveur live. Comme vous pouvez le constater, nous obtenons ce type d'interface. Mais il n'y a pas de couleur de fond. Pourquoi n'y a-t-il pas de couleur de fond ? n'y a pas de couleur de fond car dans le dossier sur lequel nous travaillons, il n'y a pas d'image. Je vais donc simplement copier cette image et la coller ici. Maintenant, nous avons nos images. Nous avons maintenant notre image et nous allons avoir cette image en arrière-plan. Enregistrez simplement ceci et regardons dans notre navigateur. Comme vous pouvez le voir, nous avons une image de fond en arrière-plan. Nous avons donc maintenant un code CSS réussi dans ce projet. Maintenant, ce que je veux faire, je veux rechercher quelque chose comme je vais rechercher une voiture, cliquer sur Entrée ou cliquer sur ce bouton. Nous avons des photos liées à la voiture. Maintenant, je veux rechercher des photos liées à la nature Je vais donc taper nature. Je vais cliquer sur ce bouton de recherche. Maintenant, vous pouvez voir que nous recevons des photos liées à la nature, mais nous n' en avons que cinq. Si vous souhaitez augmenter le nombre de ces photos, vous pouvez simplement taper, ouvrir votre fichier JavaScript et augmenter le nombre de photos dans l'URL. Vous voulez obtenir dix photos par page, puis supprimez simplement ces cinq par page et dix ici. Nous allons maintenant obtenir dix photos. Jetons un coup d'œil dans notre navigateur. Je vais rechercher Tiger, TIG Tiger et cliquer sur ce bouton de recherche. Maintenant, comme vous pouvez le voir, nous avons des photos liées à Tiger et si je clique sur ce bouton Plus, j'aurai plus de photos liées au tigre. C'est dans cette vidéo et nous avons complètement créé ce projet de photos J'espère que vous avez compris comment créer ce projet en utilisant JavaScript et comment nous pouvons utiliser Pexels AP Si vous savez comment utiliser l'API Pexels, vous pouvez facilement comprendre comment utiliser également un autre APH C'est tout pour ce cours.