Projeto de API JavaScript: aplicativo de pesquisa de imagens

1. Apresentação: Olá a todos nesta classe, vamos criar o aplicativo Photosearch usando JavaScript. É assim que nosso aplicativo Photosearch ficará, e você pode pesquisar qualquer foto neste aplicativo Quero pesquisar fotos relacionadas a carros Posso simplesmente digitar o carro neste campo de entrada e clicar no botão de pesquisa para obter fotos relacionadas ao carro. Como você pode ver, temos fotos relacionadas a carros. Se você quiser gerar mais fotos relacionadas ao dedilhado de pesquisa, clique neste botão mais e, como você pode ver, temos mais fotos relacionadas ao dedilhado de pesquisa. De onde estamos obtendo essas fotos, estamos obtendo essas fotos da API do Pexels Para construir esse projeto, vamos usar a API Pexels. Agora vou pesquisar fotos relacionadas à natureza. Para pesquisar fotos relacionadas à natureza, você precisa digitar natureza e clicar neste botão de pesquisa e agora, como você pode ver, temos fotos relacionadas à natureza. Se você clicar nesse botão mais, obterá mais fotos relacionadas à natureza. Então você tem mais fotos relacionadas à natureza. E também temos tendências de sexo fotográfico neste projeto. Então, basta recarregar este projeto. Este é o sexon fotográfico mais popular deste projeto, e esse sexon fotográfico popular está sendo gerado pela equipe de pixels, o que significa que esse sexon fotográfico popular será atualizado Então, se você quiser saber como criar esse tipo de projeto, participe dessa classe e vamos começar a criar esse projeto a partir do próximo vídeo. 2. configuração do projeto: Vamos fazer essa configuração para nosso projeto neste vídeo. Para escrever código, vamos usar o editor de código do Visual Studio e precisamos criar uma pasta dentro do editor de código do Visual Studio. Eu já criei uma pasta. O nome da pasta é projeto de pesquisa de imagens e você precisa criar três arquivos, arquivo HTML, arquivo JavaScript e arquivo CSS. Eu já criei um arquivo HTML. O nome do arquivo HTM é indexado em HTML. E então estilize CSS e um ponto js. Agora vamos escrever um clichê em HTML. Para escrever HTML Bilerlt, abrirei meu arquivo HTML, então já abri meu arquivo extremo e, dentro desse arquivo HTML, basta digitar exclaim em Mark e clicar em Enter e o código VS escreverá Enter e o código VS escreverá automaticamente Vou abaixo desse baralho de títulos e vincularei esse arquivo CSS de estilo. Para vincular o arquivo CSS de estilo, basta digitar Link e clicar neste CSS da coluna de link. Dentro desse HRF, você precisa digitar o nome do arquivo. Meu nome de arquivo é Styloid CSS e dentro desse HRF, ele Isso significa que meu arquivo CSS está vinculado ao meu arquivo HTML. Agora vou vincular meu arquivo JavaScript a esse arquivo HTM. Para vincular um arquivo JavaScript, preciso criar um Scriptex para digitar script e clicar em Script Column SRC e digitar o nome do arquivo JavaScript. Portanto, o nome final do meu arquivo JavaScript é app dot js sol type app dot js. Como vamos usar o ícone em nosso projeto , mostrarei o ícone que vamos usar. Este é o ícone que vamos usar significa esse ícone de pesquisa em nosso projeto para obter esse ícone de pesquisa, vamos usar este site, não este site, vamos usar o Font Awesome. Então, para obter o link CDN do Font Awesome, você precisa apenas pesquisar CDN Js no seu navegador e clicar em este site ou abrir este E nessa entrada de pesquisa, basta pesquisar fonte incrível, então vou digitar fonte incrível e clicar neste primeiro link. E a partir daqui, você tem que clicar neste botão, copiar o botão Link Tech, clicar neste botão e seu link será copiado Agora vou abrir meu código do Visual Studio e colá-lo aqui abaixo desta tecnologia de link, Control V e minha tecnologia de link serão colados com o link CDN Esse é o link CDN e essa é a tecnologia Link Esse é o link CDN e essa é a tecnologia Link Agora vamos verificar o que mais queremos fazer. Como vamos usar o robô como fonte neste site, para criar este projeto, vamos usar a fonte Roboto Então, para obter essa fonte, vamos usar este site, o Google Phones. Basta pesquisar o Google Fonts em seu navegador e você obterá este site. O link do site é phons.google.com. Neste botão de pesquisa de fontes, você pode pesquisar Roboto, ou você obterá o Roboto aqui mesmo A primeira família de fontes em si é a família de fontes Roboto, basta clicar neste Se você encontrar Roboto aqui, você pode clicar neste ou então você pode pesquisar a fonte Roboto Vou clicar neste Roboto e, a partir daqui, clicarei neste botão G Find. E eu vou clicar aqui para obter código de incorporação e vou clicar nesta entrada e copiar esta parte Só este, você tem que copiar, esse URL de entrada, você tem que copiar. Copie isso e abra seu código do Visual Studio e abra seu arquivo CSS. Dentro desse arquivo CSS, vou colar esse link para o qual copiamos. Colei esse URL de entrada dentro do meu arquivo CSS. Isso é tudo para o nosso vídeo de configuração. Agora vamos começar a escrever o código ETL a partir do próximo vídeo. 3. gerando chave API: Agora vamos gerar a chave APA a partir da API do Pexels. Por que estamos usando o Pexels APA, estamos usando o Pexels APA Como eu pesquisei a Natureza aqui neste site e depois de pesquisar a Natureza, obtive fotos relacionadas à Natureza. De onde tirei essas fotos, tirei essas fotos da API do Pexels Significa que, para obter fotos, vamos usar a API Pexels e, para usar a API Pexels, você precisa gerar um APaKey e, para gerar um APaKey você precisa criar uma conta precisa É muito fácil criar uma conta com Pixels. Basta pesquisar a API do Pexels em seu navegador e clicar neste primeiro link ou abrir este primeiro Ou, como você pode digitar esse URL, o URL é px.com slash APSASF aqui, você pode clicar neste botão Começar ou clicar neste botão Entrar ou clicar neste botão Entrar Vou clicar neste botão Participar. Não vou clicar nesse botão Entrar. O botão de adesão está fazendo outra coisa. Vou clicar no botão Obter em si e, a partir daqui, clicarei neste botão de login Se você já tem uma conta no Pexels, você receberá este botão de login e, se não tiver nenhuma conta, clique no botão Quero fazer o download e, em seguida, poderá criar sua conta Eu já tenho uma conta, então vou clicar no botão Login. Depois de fazer login no Pexels, você verá esse tipo de interface Agora, você só precisa clicar no botão Voltar. Ou você pode clicar neste ícone do Pexels. E você pode digitar API nesse URL, ou então você pode abrir esse site novamente. Mas agora eu quero clicar nessa API de barra e agora, a partir daqui, você pode clicar no seu APK Em vez do botão começar, agora estamos recebendo seu APK depois de criar nossa conta e basta clicar nesse botão, seu botão APAC Por isso, geramos com sucesso nosso APaKey. Agora não perca esse APK. Você pode simplesmente salvar esse APK na pasta do seu projeto. Então, vou salvar esse APK na pasta do meu projeto e você precisa criar seu próprio APK. Não use meu APK porque eu excluirei esse APK e você não poderá usar este Pexels APA Você precisa criar seu próprio APaKey e criar este projeto Isso é tudo para este vídeo. Agora, vamos escrever nosso código HTML no próximo. 4. Construindo a estrutura: Então, agora vamos escrever o código HTML para o nosso projeto ou podemos dizer que vamos criar a estrutura do nosso projeto usando ITML Então, já criamos esse clichê de HTML em nosso conjunto Se você ainda não assistiu a esse conjunto de vídeos, basta assistir a esse conjunto de vídeos, caso contrário você não entenderá de onde obtivemos esse tipo de link e de onde obtivemos esses URLs de entrada Então, se você quiser entender de onde tiramos esses URLs de entrada e de onde obtivemos esse link incrível de fonte, você precisa assistir a esse conjunto de vídeos Nesse conjunto de vídeos, escrevemos essa quantidade de código HTML, o que significa que já criamos nosso padrão de HTML e, em seguida, vinculamos nossa fonte ao nosso HTML e, em seguida, vinculamos nosso arquivo CSS ao nosso HTML e, em seguida, vinculamos nosso arquivo Ja voice Agora podemos escrever nosso código HTML e, para escrever nosso código HTML, vou entrar nessa tag body e dentro dessa body tech, vou criar uma tag. Que tipo de tag vou criar para verificar se vou abrir meu site. Então, vou abrir meu site e dentro deste site, como você pode ver, nossa imagem de fundo está faltando. Vamos corrigir essa coisa que falta na imagem de fundo neste curso. Significa que, mais tarde neste curso, corrigiremos essa coisa de imagem de fundo. Agora só precisamos criar essa estrutura. Então, a primeira coisa que vou fazer é criar esse cabeçalho e, em seguida, criar esse campo de entrada e criar esse botão com um ícone de pesquisa. Em seguida, criarei essa seção de fotos. Vamos fazer isso. Primeiro de tudo, vou criar esses cabeçalhos. Para criar isso, vou entrar nessa tecnologia corporal e criar um Diff te. E o nome da classe do técnico Diff será Min. Por que criei essa tecnologia dif Eu criei essa tecnologia diff para adicionar CSS a ela e para criar uma tag dif com o nome da classe Min, você pode simplesmente digitar deep Isso não está usando MD, podemos simplesmente digitar homens Didot e obteremos uma etiqueta Diff com o nome da classe dos Vou entrar nessa tecnologia Diff e criar outra tecnologia dif e o nome da classe dessa tecnologia Diff será cabeçalho, cabeçalho de será cabeçalho, cabeçalho E clique em Enter. Agora obteremos uma tag Diff com o nome da classe do cabeçalho Agora, dentro dessa tecnologia de diferença, vou criar uma tecnologia H one Dentro dessa tecnologia H one, o que eu vou digitar, vou digitar esse texto de cabeçalho. Vou apenas digitar, encontrar as melhores fotos. Posso copiá-lo e colá-lo dentro dessa tecnologia H one e agora vou criar um campo de entrada. Para criar um campo de entrada, vou abaixo desse deck H one e aqui vou criar mais uma tecnologia Diff Dentro dessa tag Diff, criarei uma tecnologia de entrada, e o tipo dessa tecnologia de entrada, basta clicar em Control jet e o tipo dessa tag de entrada será pesquisar Digite a pesquisa e, em seguida, forneceremos um espaço reservado dentro dessa tecnologia de entrada. Por que estamos dando espaço reservado? Porque o que é espaço reservado Você pode ver as fotos de pesquisa escritas dentro desse campo de entrada. Isso é espaço reservado Então, para criar um espaço reservado, você obtém um atributo, o nome do atributo é espaço reservado, basta digitar espaço reservado Dentro desse espaço reservado, você pode digitar qualquer coisa ou escrever qualquer coisa e essa coisa será exibida dentro desse campo de entrada Agora, queremos exibir as fotos de pesquisa, então vou digitar a pesquisa e essas fotos. Vou dar um nome de classe a esse campo de entrada. O nome da classe será pesquisado. Agora vou criar um conjunto de botões abaixo desse campo de entrada. Para criar um baralho de botões, basta digitar button e preciso fornecer um nome de classe também preciso fornecer um nome de classe dentro desse baralho de botões. O nome da classe dessa tag de botão será BTN one. E agora temos que criar o ícone de pesquisa dentro dessa tecnologia de botão. Qual ícone de pesquisa, essa pesquisa temos que criar. Como criaremos esse ícone de pesquisa, criaremos esse ícone de pesquisa usando essa fonte incrível. Se você visitar a fonte incrível e apenas digitar a pesquisa nessa entrada de pesquisa, você receberá o ícone de pesquisa. O ícone de pesquisa terá um Itech e, dentro dessa tecnologia, haverá um nome de classe E qual será o nome da classe, o nome da classe será mais nítido do que a lente Apenas um tipo de traço sólido. Em seguida, digite um traço de aumento e, em seguida, adicione um vidro. Esse é o nome da classe desse ícone de pesquisa. Se você quiser encontrar os nomes das classes, basta visitar este site, pesquisar o ícone e clicar nesses ícones para obter o nome da classe desses ícones. O ícone que estamos usando significa o ícone de pesquisa que estamos usando. O nome da classe desse ícone de pesquisa é muito sólido, medida em que é lupa, de vidro. Agora, se eu salvar isso e agora vamos dar uma olhada em nosso navegador, clique com o botão direito do mouse ou já abri em nosso servidor ativo. Este é o nosso servidor ativo e é assim que nosso projeto está se parecendo agora. Criamos uma tecnologia de cabeçalho significa uma tecnologia H one, depois criamos um campo de entrada e, dentro desse campo de entrada, escrevemos um espaço reservado e o que está escrito dentro do espaço reservado fotos de pesquisa Em seguida, criamos uma tecnologia de botão com o ícone de pesquisa. Agora vamos verificar o que temos que criar. Precisamos criar uma seção de fotos e essas fotos serão exibidas somente depois de buscarmos os dados da APA e buscarmos os dados da API No vídeo Java Script significa no próximo vídeo ou próximo ao próximo vídeo. Agora estamos apenas criando a estrutura. Significa que estamos apenas construindo essa estrutura. Vou criar esse photosexon e depois de criar essa foto em segundo lugar, vou criar mais esse botão Eu tenho que criar um segundo diferente para criar um sexon diferente, vou abaixo dessa tag de diferença e vou criar uma tag de e vou criar uma Basta digitar sexon dentro deste sexo e tecnologia, vou criar um Defteg o nome da classe deste Diff t será o nome, digite o nome do ponto div Agora obtemos um Difteg com o nome da classe Name. Dentro dessa tecnologia Diff, escreverei ou criarei uma tag H two dentro dessa tag H two, o que eu escreverei, escreverei fotos, copiarei isso E cole aqui. Agora vou abaixo dessa tecnologia dif ou vou abaixo dessa secantg Não vou abaixo desse sexo e tecnologia porque o que eu quero fazer é criar uma tecnologia dif onde exibiremos Agora, não temos excesso dessas fotos, mas precisamos criar uma tecnologia Diff para exibi-las Depois de buscarmos as imagens da APA, exibiremos essas fotos dentro desse dftch Temos que criar a tecnologia Diff. Vou abaixo dessa tecnologia dif e criar mais uma tecnologia Diff e o nome da classe dessa tag if será photos Clique em Enter e, em seguida, obtemos uma tag Diff com o nome da classe das fotos Agora temos que criar mais um botão. Para criar mais esse botão, vou abaixo do sexo e t e criarei mais um Difteg e dentro desse Diftek, darei um nome aos nomes de uma O nome da classe e, em seguida, o nome da classe serão mais. Vou criar uma tecnologia de botão, basta criar um botão ou apenas digitar o botão e o nome da classe desse botão será maior. Digite mais e depois digite mais dentro desse botão porque estamos criando um botão mais, então mais. Significa que porque está escrito mais dentro desse botão, é por isso que eu escrevi mais dentro dessa tag de botão. Vou salvar isso e vamos dar uma olhada em nosso navegador para controlar e abrir este navegador. Agora, como você pode ver, criamos com sucesso nossa estrutura usando HTML. Agora, nos próximos vídeos, buscaremos os dados da API e exibiremos esses dados, o que significa que exibiremos essas imagens nos próximos vídeos, Is No próximo vídeo, vamos buscar os dados da API. 5. como buscar dados da API: Agora faremos a solicitação de busca a partir da API Pexels. Para fazer uma solicitação de busca, você precisa obter o endpoint APA Para obter o endpoint APA, você pode pesquisar a API Pexs em seu navegador e abrir E esse é o mesmo site que usamos para gerar nossa ApiKey Portanto, você precisa abrir o mesmo site e, no mesmo site, clicar na documentação. E se você esqueceu seu APK, basta clicar neste botão para obter seu APaKey e você receberá seu APAK caso tenha esquecido esse APIK Então, basta pegar este APake se você não clicar neste botão e você obterá este APK, copie-o e deixe-o agora, copie-o e saia e, copie-o e saia e em seguida, clique neste botão de documentação E dentro desse botão de documentação, teremos muitas opções porque o Pexels APA nos oferece muitos recursos e muitas opções para implementar em nosso site, mas queremos apenas implementar o recurso de pesquisa e o recurso td photos Então, o que é esse recurso de fotos td? Usando o endpoint APA td photos, podemos exibir imagens aleatórias em nosso site Significa que, no projeto que estamos criando nesse projeto, podemos exibir imagens aleatórias usando essas fotos td e, usando o Apendpoint de pesquisa de fotos , podemos pesquisar Agora vou fazer uma solicitação de busca neste endpoint do Ap E depois de fazer a solicitação de busca, obterei uma imagem relacionada ao strum de pesquisa Significa que tudo o que eu pesquisar, obterei as imagens ou obterei os dados relacionados ao rum de pesquisa. Este é o ponto APA que vamos usar para fazer a solicitação de pesquisa APA, e esses endpoints APA precisam de alguns parâmetros Parâmetros como consulta são obrigatórios, significam que você precisa fornecer esse parâmetro de consulta neste ponto APA ou então esse AP não será executado. Qual é o significado da consulta? Dentro da consulta, podemos pesquisar a consulta. Está escrito aqui. A consulta de pesquisa significa o que você quiser pesquisar, eu quero pesquisar as fotos relacionadas à natureza, depois escreverei uma consulta igual à natureza e, em seguida, obterei fotos relacionadas à natureza Se eu quiser pesquisar fotos relacionadas ao oceano , pesquisarei ou digitarei, consulta é igual a oceano e obterei fotos relacionadas ao oceano Você pode simplesmente copiar este Appoint ou você pode copiar este Appoint Dentro deste exemplo de solicitação. Dentro deste exemplo de solicitação, Appoint, ela já está escrita, então você não precisa escrevê-la sozinho, basta copiar esse Apenpoin, basta colá-lo e agora eu quero fazer uma solicitação de busca para fazer uma solicitação de busca Para fazer uma solicitação de busca, você precisa criar um método de busca. Dentro desse método de busca, você precisa fornecer o endpoint APA ou o URL da API Essa é a URL da API, que vamos usar para buscar os dados Vou apenas copiar isso, removê-lo daqui e colá-lo dentro desse método de busca Vou clicar em Controlar isso porque preciso colá-lo dentro do ctix Vou criar ctixs e dentro desse vectix, vou E se você ler esta documentação da APA do Pexels, você saberá Precisamos fornecer nossa chave de autorização para acessar dados do endpoint da API ou acessar dados do URL da API Então, vou clicar nessa autorização para mostrar a você. Portanto, você pode ver que a autorização é necessária para o Pexels APA Qualquer pessoa com uma conta PxS pode solicitar um APaKey, o que já fizemos Temos nosso APaKey e usando esse APaKey, podemos fazer essa autorização Então, como fazer essa autorização, ela pode estar escrita dentro desta documentação ou eu vou te mostrar como fazer isso. Sim, está escrito aqui, eu acho. Você precisa apenas escrever a autorização e fornecer sua chave APA. Basta fornecer uma vírgula após essa solicitação de busca, o que significa que após esse RL, você deve fornecer Aqui, forneceremos a chave de autorização. Para fornecer a chave de autorização, você precisa criar um colchete encaracolado e dentro dos colchetes e dentro dos Usarei uma propriedade de cabeçalho, cabeçalhos dentro dessa propriedade de cabeçalhos, criarei mais um colchete e, dentro desse colchete , digitarei a autorização e fornecerei a autorização do tipo de chave digitarei a autorização e fornecerei a autorização do tipo cabeçalhos dentro dessa propriedade de cabeçalhos, criarei mais um colchete e, dentro desse colchete, digitarei a autorização e fornecerei a autorização do tipo de chave. Você pode ver que precisa digitar o autorizador assim. Vou copiar essa coisa e colar aqui. Sim, então vou colar aqui. Então eu escrevi uma autorização, e aqui temos que fornecer nosso APaKey Assim, você pode colar o APK que você já copiou. O APK que copiamos está aqui. Se você não tiver seu APK, basta clicar nesta visão geral e, dentro dessa visão geral, você deve clicar no botão APaKey e obterá seu APaKey. Copie este APG. Vou copiar isso corretamente. Então eu copiei esse APaKey e vou criar uma variável. Portanto, o nome da variável será fundamental. Vou criar uma string. Dentro dessa string, vou colar meu APK. Este é o meu APK. E agora vou fornecer esse APK dentro dessa autorização. Como fornecer esse APK, basta digitar o nome da variável na qual eu restaurei meu APK. O nome da variável é key, então vou digitar key aqui. Agora, para obter os dados desta APIeNPN, temos que usar o método then, para usar o método IL digite dot e dentro desse método then Usaremos esse método first then para obter a resposta desse endpoint APA e criaremos outro método then para obter os dados Dentro desse método then, digitarei a resposta porque obteremos a resposta desse ponto APA dentro desse método then, então digitarei a resposta e usarei a função de seta. A resposta e a resposta estarão no formato de string, e precisamos converter esse formato de string em JSNFMat Para converter essa resposta em JCNFmat, você pode digitar o ponto de resposta Agora nossa resposta está sendo convertida em JSNFMat e agora vou criar outro método then, então dentro desse método then, vou passar dados aqui, depois vou criar a função de seta e dentro dessa função de seta, vou criar um Dentro desse colchete, digitarei Console log para que possamos obter os dados dentro do nosso tipo de console, então console dot Dentro desse log do console, o que eu vou fazer é apenas registrar esses dados do console. Agora, se salvarmos isso e abrirmos nosso navegador, também salvarei cada arquivo de mosaico e clicarei em Abrir com o servidor Live. E vou clicar na válvula para obter os dados. Nossa guia do console está aberta e dentro desse consultme você pode ver que estamos recebendo um objeto e dentro desse objeto, se eu expandir isso dentro desse objeto, estamos obtendo alguns dados relacionados à consulta de pesquisa de natureza porque dentro dessa consulta, estava escrito natureza Estamos obtendo as imagens ou os dados de acordo com nossa consulta de pesquisa. Onde estão nossas imagens? As imagens estão dentro dessa matriz de fotos. Expanda essa matriz de fotos e dentro dessa matriz de fotos, você tem que expandir esse objeto dentro desse objeto, há o título dessa imagem e depois a altura dessa imagem. E o nome da imagem do fotógrafo está lá e , em seguida, o URL do fotógrafo está lá, e então as imagens dentro desse SRC E dentro desse SRC, há muito tamanho da imagem Se você quiser obter o tamanho do nscape da imagem, você pode digitar o ponto de dados Paisagem e obterá a imagem em tamanho Paisagem E se você quiser obter uma imagem em tamanho grande, você pode obter uma imagem em tamanho grande. Você pode obter imagens de qualquer tamanho. Então, se você quiser obter cerca de dez fotos relacionadas a essa pesquisa, dedique. Quero obter dez fotos relacionadas a esse dedilhado de busca pela natureza. Então, posso digitar por página dez ou agora vou digitar cinco porque quero cinco fotos, e agora vou obter cinco fotos relacionadas à natureza. Então, se eu salvar isso e abrir minha fita do console e você puder ver que temos um objeto e dentro desse objeto, há fotos e dentro dessas fotos, há cinco elementos, significa que há cinco fotos. Expanda a matriz de fotos. Essa é a primeira imagem. Essa é a segunda imagem. Este é o terceiro, quarto e quinto. Recebemos cinco fotos de acordo com nossa pesquisa. No próximo vídeo, exibiremos essas imagens em nosso projeto. 6. exibindo dados: Agora vamos exibir as fotos buscadas dentro do nosso projeto Para exibir essas fotos, abro meu JavaScript e, dentro desse script Java, vou entrar nesse método then, dentro desse método then, tenho que selecionar essa matriz de fotos. De qual conjunto de fotos estou falando? Estou falando sobre esse conjunto de fotos. Para selecionar essa matriz de fotos, podemos digitar fotos com pontos de dados. Por que digitar dados? Porque passamos dados dentro desse método then. É por isso que temos que digitar dados aqui. Dentro desse objeto de dados, vamos selecionar essa matriz de fotos, digitar ponto e digitar fotos. Agora nossa matriz de fotos está selecionada, para que possamos expandir essa matriz de fotos e verificar o que queremos fazer. Dentro dessa matriz de fotos, há cinco elementos. E dentro de cada elemento, há muitas informações sobre essa foto. se eu expandir essa primeira foto, você pode ver o título da foto e, em seguida, obtemos o nome do fotógrafo, o ID do fotógrafo, o URL do fotógrafo. E então temos a imagem dentro desse SRC e a imagem está em tamanhos diferentes, como paisagem, tamanho, tamanho grande, tamanho médio Então, neste projeto, vamos usar imagens em tamanho grande. Então, agora o que vou fazer, agora quero acessar essa imagem em tamanho grande. Então, para acessar essa imagem em tamanho grande, primeiro criarei uma para cada loop e o que esse loop de forragem fará, esse loop de forragem iterará sobre essa matriz de fotos, e eu quero criar uma tecnologia diferente para cada elemento dentro dessa matriz de para cada elemento dentro Para criar uma tecnologia Diff para cada elemento dentro dessa matriz de fotos, posso usar o método de forragem Então, basta digitar fotos com pontos para cada uma. Remova essa matriz daqui. Dentro desse parâmetro, vou passar a imagem, então vou digitar imagem. Agora, o significado dessa imagem são os elementos dentro dessa matriz de fotos. Refere-se a essa imagem. Se você digitar imagens , o elemento dentro da matriz de fotos será imagens. Agora vou digitar somente a imagem. Agora, esta imagem se refere aos elementos dentro dessa matriz de fotos. Esses são os elementos. Dentro dessa matriz de fotos, você pode ver esses cinco elementos. Esses cinco elementos são imagem agora porque eu digito imagem dentro dessa função Cavey Agora eu quero criar uma dif tech para cada imagem, para criar Diftech para cada imagem, vou criar uma variável e o nome da variável será image dif IMG e DIV Dentro dessa variável, criarei um DeftEgt, criarei uma tecnologia Diff, obteremos O nome do método é document dot create element. Vou digitar o elemento de criação de pontos do documento. Em qual elemento vamos criar, vamos criar um tipo de DFelement differe, então agora criamos uma tecnologia diferente para cada elemento dentro dessa matriz de para cada elemento dentro Agora vou adicionar um nome de classe dentro dessa tecnologia de comparação. Para adicionar um nome de classe dentro dessa Diftek, posso escrever o nome da variável Então, o nome da variável é image Dip, então vou digitar dot clalis dot dot classList dot AD E usando esse método, podemos adicionar um nome de classe dentro desse Difteg Então, enquanto estamos adicionando um nome de classe dentro dessa tecnologia Diff, estamos adicionando o nome da classe dentro desse DFTekt. Adicionar CSS significa adicionar estilo a essa tecnologia Diff, estamos adicionando esse estamos O nome da turma será fotos. Todos os tipos de fotos, FOTOS, fotos. Mas já escrevemos fotos IS, então vou adicionar mais uma dentro dessas fotos. Então, essas fotos serão o nome da classe dessa tecnologia Deftch e agora vou entrar nessa tecnologia de diferença, o que significa que selecionarei o tâmil interno dessa tecnologia if e criarei outra tecnologia de Df dessa tecnologia if e criarei outra tecnologia Para selecionar o innerHTML dessa tecnologia dif, vou digitar ImgDif Dentro dessa tecnologia Diff, criarei outra dftech. Para criar outra tag Diff, você precisa usar o Bactix, criar um Bactex e dentro desse Bactex você pode Como estou criando uma tecnologia de comparação, posso simplesmente digitar DV e darei um nome de classe a essa div O nome da classe será Js Photos. E então, dentro dessa tecnologia de definição, criarei uma tecnologia de um parágrafo Então, por que estou criando essa tecnologia de parágrafo, estou criando essa tecnologia de parágrafo para exibir o nome do fotógrafo. Então, como exibir o nome desse fotógrafo. Para exibir o nome do fotógrafo, você pode selecionar, expandir essa matriz de fotos e, dentro dessa matriz de fotos, expandir esse primeiro elemento. Então, basta expandir esse primeiro elemento, e dentro desse primeiro elemento, você pode ver o fotógrafo. Fotógrafo é o nome do fotógrafo. Então, para acessar o nome desse fotógrafo, agora eu posso digitar o que eu posso digitar, eu posso digitar fotógrafo de pontos de imagem. Vou criar uma referência de modelo dentro do texto deste parágrafo. Para criar uma referência de modelo , usarei esse símbolo de ferramenta e, em seguida, usarei esse símbolo de ferramenta e, em seguida, usarei Dentro desse colchete encaracolado, eu posso digitar a imagem. Por que estou digitando a imagem, estou digitando a imagem porque passei a imagem dentro dessa forragem, então basta digitar a imagem e depois pontuar o fotógrafo para obter o nome do fotógrafo Então, vou verificar essa ortografia. Eu posso simplesmente copiar isso e colar aqui. Agora, dentro deste parágrafo te, obteremos o nome do fotógrafo da imagem que será exibida, e agora vou fechar esta tecnologia de parágrafo e agora vou exibir a imagem. Para exibir a imagem, criarei uma tecnologia de imagem. Para criar tecnologia de imagem, vou digitar IMG e depois tenho que fornecer um SRC Qual será o SRC SRC? Ponto da imagem, arco, ponto, grande. Qual é a imagem hrc dot Large? Como você pode ver, temos que selecionar esse SRC e dentro desse SRC, temos que selecionar esse tamanho Portanto, o tamanho é grande significa que vamos usar uma imagem em tamanho grande. Então, vou criar esse modelo reters e, dentro desses comedores de modelos, posso digitar a imagem ARC e o tamanho da imagem O tamanho da imagem será grande, então vou digitar grande. E vou fechar essa tecnologia, então, para fechar essa tecnologia, vou digitar SLS e depois Então, agora vamos criar um botão de download. Então, para criar o botão Download, vou usar Anchor Tech e HRF dentro desse HRF, vou digitar o tamanho da imagem Quero dizer, vou copiar e colar isso e agora as imagens baixadas terão o tamanho original. Vou remover esse tamanho grande e vou digitar o original. Agora vou fechar esse DefText fechar essa tecnologia Diff, posso simplesmente digitar DF agora vou acrescentar esta imagem dif com esse DIF significa a tecnologia Diff que criamos dentro desse HTML, esse dif posso simplesmente digitar DF agora vou acrescentar esta imagem dif com esse DIF significa a tecnologia Diff que criamos dentro desse HTML, esse dif de fotos. Agora eu tenho que selecionar essa div de fotos no meu script Java para selecionar essas fotos se eu criar uma variável E o nome da variável será fotos ou eu posso digitar foto. Para selecionar isso, usarei seletor de consulta de pontos do documento e, em seguida, o nome da classe Qual é o nome da classe? Tenho que verificar o nome da minha turma. O nome da classe é fotos, então basta digitar fotos. Agora, o que vou fazer é acrescentar essas coisas. Vou acrescentar esse dif dentro dessa DFTech Para acrescentar esta div dentro deste Difteg, posso simplesmente digitar photo dot ApenhilPhoto dot Apenhild o que eu quero acrescentar, eu quero acrescentar esta imagem di, então vou digitar a imagem DIF vou digitar a . Vou salvar isso e vamos dar uma olhada em nosso navegador. Tudo está funcionando ou não. Vou recarregar isso. Então, abrirei meu servidor ativo novamente, arquivo HTML, e clicarei em Abrir com o Live Server E agora, como você pode ver, estamos recebendo o nome do fotógrafo, estamos obtendo a imagem e o link para download. Mas não consigo ver nenhum link para download. Por que não consigo ver nenhum link de download? Não consigo ver nenhum link de download porque não escrevi nada dentro desta máquina HRF dentro dessa torneira âncora, então eu tenho que digitar download dentro dessa torneira âncora, então basta E feche esse ycretc agora, digamos que vamos dar uma olhada em Agora, como você pode ver, também estamos recebendo o botão de download. É isso para este vídeo. Agora, no próximo vídeo, vamos criar a funcionalidade. Que tipo de funcionalidade? A funcionalidade será que, sempre que pesquisarmos fotos, obteremos as fotos relacionadas a esse termo de pesquisa. Vamos criar essa funcionalidade de pesquisa no próximo vídeo. 7. funcionalidade de pesquisa: Então, agora vamos criar a funcionalidade de pesquisa para este projeto. E depois de criar essa funcionalidade de pesquisa, podemos simplesmente pesquisar as fotos que queremos pesquisar da mesma forma que eu quero pesquisar fotos da natureza, depois posso digitar Nature ear e clicar nesse botão, então obterei fotos relacionadas à natureza. Então, para criar esse tipo de funcionalidade, abrirei meu codator e dentro desse codator, abrirei E dentro desse arquivo Java Sri, temos que selecionar alguns de seus elementos tâmil Qual elemento tâmil eu quero selecionar, quero selecionar essa entrada de pesquisa e, em seguida, quero selecionar essa tecnologia de botão e, em seguida, quero selecionar mais essa tecnologia de botão Vamos selecionar esses três elementos para selecionar a entrada de pesquisa, vou criar uma variável. O nome da variável será entrada de pesquisa, pesquisa e, em seguida, entrada, e então escreverei o seletor de consulta por pontos do documento O que vou digitar dentro desse seletor de consultas documentado, vou digitar o nome da classe O nome da classe é pesquisar, então basta copiar essa pesquisa e digitar ponto e Control V, que colam essa pesquisa. Agora vou copiar essa entrada de pesquisa e colá-la aqui. Agora, o que eu quero selecionar, eu quero selecionar essa tecnologia de botão. O nome da variável dessa tag de botão será BTN e, em seguida, o nome da classe será BTN um. Vamos verificar o nome da classe. O nome da classe é BTN. Vou selecionar essa tecnologia de botão e agora vou criar outra variável, o nome da variável será maior, então vou digitar mais porque estou selecionando mais esse botão. Eu posso simplesmente copiar isso e colar aqui e o nome da classe será mais. Vamos verificar o nome da classe, é mais ou não. Então, sim, o nome da classe é mais. Então, selecionamos essas três coisas em JavaScript, agora o que eu quero fazer. Agora eu quero criar algumas funções. Então, a primeira função, vou criar para essa busca. Significa que essa chamada de busca fará essa chamada de busca dentro de uma função Então, vou criar uma função. O nome da função carregará fotos. Eu criei essa função de carregar fotos e, agora, vou copiar essas chamadas de busca, copiar tudo e colar dentro dessa função E vou passar um parâmetro dentro dessa função de carregamento de fotos. O nome do parâmetro será Trum. Por que eu passo Trum aqui, eu passo Tru porque eu quero obter o tambor de entrada significa que eu quero obter o valor de entrada dentro desse trum, é por isso que eu passo Trum dentro Você entenderá por que eu passo Trum Now, se você não entendeu, você entenderá depois de algum tempo Deixe-me explicar por que criei essa função. Eu criei essa função porque quero que executada sempre que um botão for clicado Significa que sempre que esse botão for clicado, quero que essa função seja executada Então, sempre que botão for clicado, se mais esse botão for clicado, executarei a função de carregar fotos Agora vou criar mais uma função. O nome da função será pesquisar fotos, basta criar uma função e o nome da função será pesquisar fotos, e então eu passarei o Tram novamente dentro das fotos de pesquisa Bonde e depois crie um suporte encaracolado e, dentro desse suporte encaracolado, o que eu quero Eu quero chamar essa função de carregar fotos. Então, basta escrever fotos carregadas. E passe o tambor dentro dessa carga de fotos. Passe o tambor. Agora, de onde tiramos esse tambor. Vamos colocar esse tambor dentro de outra função. Significa que criarei um ouvinte de eventos dentro dessa tecnologia de botão, então criarei isso ou selecionarei esse que significa esse botão de pesquisa Teck, e dentro desse botão Teck, e dentro desse botão Teck, adicionarei ouvinte de eventos e em qual evento esse botão ouvirá , esse botão clicará em evento, então basta digitar clique e vírgula e, em seguida , criarei uma função Essa função será executada sempre que esse botão for clicado Então eu criei uma função de seta e dentro dessa função de seta, o que eu quero fazer? Quero chamar essa função de pesquisa de fotos porque sempre que esse botão de pesquisa for clicado, quero chamar essa função e sempre que essa função for clicada, chamarei essa função de carregamento de fotos e, em seguida, faremos uma solicitação de busca e exibiremos algumas fotos em Quero chamar qual função, quero chamar a função de pesquisa de fotos dentro deste ouvinte de eventos, então basta digitar fotos de pesquisa e agora passaremos o valor de Trum dentro das Trum dentro das Qual será o valor de Trum? O valor de Trum será o valor de entrada Então, para obter o valor de entrada, basta digitar a entrada de pesquisa. Por que estou digitando a entrada de pesquisa aqui, estou digitando a entrada de pesquisa porque o nome da variável na qual selecionamos o campo de entrada é a entrada de pesquisa É por isso. Então, queremos obter o valor de entrada. Então, basta digitar o nome da variável que é entrada de pesquisa e, em seguida, o valor do ponto. Agora você tem o valor de entrada dentro das fotos de pesquisa e nós passamos o valor de entrada dentro desse tambor. Agora esse tambor tem o excesso desse valor de entrada, e então passamos esse valor de entrada novamente dentro dessa função de carregamento de fotos como tambor Agora, onde eu quero usar esse rum, eu quero usar esse tambor dentro dessa consulta. O que quer que o usuário amarre dentro do campo de entrada, esse tambor será pesquisado. Estou criando um modelo uteral aqui e dentro deste modelo lateral para criar um modelo de datador, eu tenho que escrever o símbolo do dólar também dentro desse símbolo do dólar, o que eu vou passar, vou passar o tambor dentro dele Literais de modelo significam que estou passando trum dentro dessa consulta Qual é o valor desse dedilhado? O valor desse dedilhado é o valor de entrada. Qualquer que seja o valor de entrada digitado pelo usuário, esse valor de entrada é strum. Como se o usuário tivesse digitado carro. Vamos colocar um carro dentro dessa consulta. A consulta será igual a carro e, em seguida, pesquisaremos as fotos relacionadas ao carro se o usuário digitou tigre O valor desse dedilhado será tiger e, em seguida, passaremos tiger dentro dessa consulta e obteremos fotos relacionadas ao tigre Espero que você tenha entendido por que escrevemos Trum aqui e como estamos obtendo valores dentro desse trum Agora vou adicionar até mesmo um ouvinte a esse botão mais, que eu possa simplesmente copiá-lo e colá-lo aqui em vez de BTN, vou digitar mais. Então sempre que um usuário clicar nesse botão de mais, o que queremos fazer chamar essa função Carregar fotos Copie esta função de carregar fotos e cole-a aqui e, em seguida, passe esse valor de entrada de pesquisa dentro desta função Carregar fotos. Então, basta passar esse valor de entrada de pesquisa. E sempre que o usuário clica nesse botão de mais, o que queremos fazer é aumentar essa página também Então, para a página, obtemos mais um parâmetro, o parâmetro é página. Então, vou abrir essa documentação da API Pexels. Então, dentro dessa documentação, abrirei essa documentação primeiro. Então, se eu clicar nas fotos de pesquisa dentro desta documentação, obterei esse endpoint da API e você poderá ver os parâmetros E dentro desse parâmetro, podemos passar a página também. Então, onde está a página Como você pode ver, temos a página aqui e a página padrão é uma, mas queremos obter. Queremos aumentar a página sempre que o usuário clicar no botão Eu, então adicionaremos esse parâmetro de página dentro do nosso link. Copie esta página e abra seu código VS. Dentro desse endpoint da API, você pode simplesmente digitar significa esse símbolo final e, em seguida, digitar o parâmetro O parâmetro é página. Agora, o que eu quero fazer é aumentar esta página sempre que o usuário clicar nesse botão de mais. Para fazer isso, vou usar apenas daterais de modelo e, dentro desses dados de modelo, passarei a página De onde obteremos o valor da página, obteremos o valor da página, eu tenho que criar uma variável de página, então vou apenas criar uma variável de página e o valor Bdfault da página criará essa variável e o valor Bdfault dessa página será um sempre que o usuário clicar nesse botão, aumentaremos o valor dessa Como aumentamos o valor dessa página, basta digitar page plus plus. Então, toda vez que o usuário clicar nesse botão a mais, o valor da página aumentará, e esse valor da página também aumentará, e obteremos outra página, outra página Significa que toda vez que um usuário clicar no botão “Mais” dessa página, essa página será aumentada e teremos uma nova página. Então essa é a lógica simples por trás disso. Agora podemos salvar isso e dar uma olhada em nosso navegador. Então, vamos salvar isso também, abrir seu navegador e clicar em abrir essa coisa, recarregar isso e procuraremos carros e clicaremos neste botão de pesquisa Sim, agora, como você pode ver, estamos recebendo fotos relacionadas a carros. Então, é isso para este vídeo. No próximo vídeo, adicionaremos essas fotos aleatórias também. 8. criar uma seção de fotos de tendência: Agora vamos criar esse sexon fotográfico recomendado ou podemos dizer sexo fotográfico aleatório Então, para obter essas fotos, vamos usar outro Appoint e, para obter outro Appoint , abrirei esta documentação do Pexels e, na documentação do Pexels, você precisa clicar em UTDPhotos vamos usar outro Appoint e, para obter outro Appoint, abrirei esta documentação do Pexels e, na documentação do Pexels, você precisa clicar em UTDPhotos . Então clique em cutdPhotos e depois de clicar em td photos, você obterá esse endpoint de API e, usando esse endpoint de AP, podemos Significa que obteremos algumas fotos aleatórias ou então você pode ler aqui o que esse endpoint AP está fazendo Esse endpoint permite que você receba fotos em tempo real com curadoria do pixel steam Adicionamos pelo menos uma nova foto por hora à nossa lista selecionada para que você sempre tenha uma seleção variável das fotos mais populares Agora você entende o que esse endpoint da APA nos dará. Usando esse endpoint da API, obteremos fotos populares, que são selecionadas pela PixelTeam, e uma dessas fotos populares Para que tenhamos uma seleção variável de fotos populares. Então, vamos copiar esse endpoint Ap. Para copiar esse AP e ponto, você pode copiar diretamente essa indicação ou você pode copiar esse AP e ponto Por que estou copiando este exemplo, solicita AP e point. Estou copiando esse AP e o ponto porque eles já implementaram o parâmetro por página. Você obtém alguns parâmetros aqui, página e depois por página. Vamos usar os dois parâmetros. Um dos parâmetros já é usado dentro desse AP e ponto, então vou copiar esse ponto AP. Vou colá-lo dentro do arquivo M Java script. Onde vou colar, vou colar aqui. Controle V. Agora eu colei esse endpoint da API QtdPhotos. Então, agora o que faremos? Agora verificaremos se esse tambor é verdadeiro, então chamaremos esse ap e point, e se esse tambor for falso, chamaremos esse appoint Por que estamos verificando se esse tambor é verdadeiro ou falso? Estamos verificando se esse tambor é verdadeiro ou falso porque, quando esse tambor for verdadeiro, esse tambor se tornará verdadeiro sempre que o usuário digitar algo dentro desse campo de entrada Portanto, se o usuário digitar algo dentro desse campo de entrada, o tambor será verdadeiro e chamaremos as fotos de pesquisa ap e point. E se o usuário não digitar nada dentro desse campo de entrada, esse trum será falso e, em seguida, chamaremos esse endpoint Q td photos Ap Para adicionar a instrução IS dentro desses dois endpoints AP, podemos simplesmente remover esse endpoint Ap e eu criarei uma variável Vou apenas copiar isso e removê-lo e vou digitar URL aqui e, em seguida, vou criar essa variável de URL. Então, vou apenas criar a variável de URL const URL. E dentro dessa variável de URL, vou colar esse endpoint da API Então, basta o Control V, e colei esse ponto AP para pesquisar fotos Significa que esse ponto é para pesquisar fotos e esse ponto APi é para fotos Qtd Agora, o que vamos verificar, vamos verificar se esse trum é verdadeiro, então vamos chamar esse Apenpoint se esse trum for falso, então vamos chamar isso Vou abaixo e vou digitar Trum aqui. E agora vou usar o operador ternário. Você também pode usar a instrução ES normal, mas eu quero mostrar como usar operador ternário porque operadores ternários Se você não sabe como usar o operador ternário, vou te ensinar operador ternário é um ponto de interrogação distinto e, em seguida, e, em seguida Se esse rum for verdadeiro, esses interrogação significam que, se esse trum for verdadeiro, executaremos o bloco de código dentro dele e, se o trum for falso, executaremos o bloco de código dentro dessa coluna Espero que você tenha entendido essa sintaxe. Essa sintaxe é muito básica. Se você não entender essa sintaxe, poderá usar a instrução EFLC normal Mas espero que você conheça esses operadores ternários. É por isso que estou usando essa coisa. O que estamos verificando, estamos verificando. Vou simplesmente remover essa coluna daqui. Sim, agora o que estamos verificando, estamos verificando se essa bobagem é verdadeira ou não Esse ponto de interrogação define se esse tambor é verdadeiro ou não. Então, se esse tambor for verdadeiro, executaremos o código dentro desse ponto de interrogação. Então, qual código queremos executar dentro desse ponto de interrogação? Se esse tambor for verdadeiro, queremos executar esse bloco de código. E se esse tambor for falso, queremos executar esse bloco de código. Então, para false, você precisa usar essa coluna, e agora, se esse tambor for falso, usaremos ou chamaremos esse AppOin, então remova esse endpoint de AP daqui e crie um Batix and control V. Então, se isso for verdade, chamaremos isso de ap e point e, se esse termo for falso, chamaremos Por página, quero dez fotos, e então obtemos outro parâmetro, outro nome de parâmetro é página Ils U. Este é outro parâmetro que vamos usar, esse parâmetro de página, basta digitar página Símbolo e depois página. E a página fará essa coisa. Basta copiar isso e colar aqui. Por que copiei e colei esta página aqui? Porque se alguém clicar nesse botão de mais, queremos gerar novas fotos É isso mesmo. Vou salvar isso e vamos visualizá-lo em nosso navegador. Salve isso também e clique em abrir com o Live Server. Então, como você pode ver por enquanto, não estamos recebendo nada, por que não estamos recebendo nada? Temos que verificar. Portanto, não há erro nessa guia do console. Temos que verificar nossa sintaxe. Pode haver um erro em nossa sintaxe. Portanto, o erro pode ser uma onda de custos escritos aqui. Então, em vez de const, temos que digitar let. Então, vamos salvar isso e controlar S e dar uma olhada em nosso navegador. Vamos recarregar isso e adicionar uma variável de página aqui, para que página e página sejam iguais E agora podemos dizer que podemos evoluir em nosso navegador. Então, vamos carregar isso. Então isso não está funcionando agora. Então, vamos corrigir isso na próxima 9. corrigir erros: Então, o erro é que esquecemos de chamar essa função. Temos que chamar essa função. Vou chamar essa função de carregar fotos aqui. Basta copiar o nome dessa função e, em seguida, podemos colá-la aqui e chamá-la. Salve isso e vamos dar uma olhada em nosso navegador. Agora, como você pode ver, estamos recebendo as fotos avaliadas. Significa que estamos recebendo todas as fotos recomendadas ou podemos ver as fotos mais populares E se clicarmos nesse botão de mais, onde está esse botão de mais? Sim. Se você clicar nesse botão mais, eu o ampliarei para que você possa ver. Se clicarmos nesse botão de mais, obteremos mais fotos. Como você pode ver, temos mais fotos. Então é isso. No próximo vídeo, vamos adicionar um estilo CSS e fazer com que nosso aplicativo tenha essa aparência Vamos nos encontrar no próximo vídeo. 10. como estilizar o aplicativo: Então, agora vamos adicionar CSS em nosso projeto e não vamos escrever CSS. Por que não vamos escrever CSS? Não escreveremos CSS porque isso consumirá muito tempo. E eu acho que se você está aprendendo JavaScript, você já conhece CSS. É por isso que acho que escrever código CSS é apenas uma perda de tempo. E essa é a razão pela qual vou simplesmente copiar e colar meu código CSS e fornecer esse arquivo de código CSS. Então, vou abrir meu arquivo CSS. Você receberá esse código abaixo na seção de recursos. Então, basta copiar esse código. Depois de copiar esse código, basta colá-lo em seu arquivo CSS. Este é o nosso arquivo CSS no qual estamos trabalhando agora. Vou apenas colar. Vou remover essa entrada e colá-la corretamente. Eu colei meu código CSS corretamente. Selecionamos um seletor universal e adicionamos margem zero, preenchendo Acho que vocês sabem por que adicionamos margem zero e preenchimento zero no seletor universal Adicionamos margem zero e preenchimento zero porque nossa página da web tem, por padrão, margem e preenchimento e queremos remover essa margem e preenchimento É por isso que dei margem zero e preenchimento zero. Eu selecionei esta dif principal, qual é a dif principal? Esta é a principal diferença pela qual selecionei essa Dif principal. Eu selecionei essa diferença principal para criar nosso plano Dentro desse plano de fundo, eu adicionei minha imagem, nome da minha imagem é JPG de um ponto. Dentro do URL, eu escrevi um ponto JPG. É isso, vou te mostrar o código. Acho que vocês sabem como escrever código CSS e podem entender esse código CSS corretamente. E se você não consegue entender esse código CSS e está enfrentando algumas dificuldades para escrevê-lo, basta me informar na discussão sexon e eu criarei um vídeo sobre esse tópico o mais rápido possível Informe-me no exon de discussão ou exon de perguntas e respostas. Esse é o nosso código CSS. E o que é essa mídia e mistura com coisa? Usamos essa propriedade de mídia para tornar nosso site responsivo Então, se você conhece design responsivo, sabe como usar essa propriedade de mídia, adicionamos um mix com 780 pixels Portanto, nosso design se tornará responsivo depois nossa página da web ficar menor que 768 pixels Se nossa página da web ficar menor que 768 pixels, adicionaremos esse código CSS em nosso projeto Mostrarei esse código de forma adequada e lenta se você não obtiver nenhum arquivo CSS, caso não consiga encontrar esse arquivo CSS. Para ajudá-lo, vou rolar isso lentamente. Você pode simplesmente enviar telas de texto se não encontrar o arquivo CSS. Se você encontrou um arquivo CSS, basta copiar e colocar esse código. Esse é o nosso código CSS. Agora vamos ver se precisamos corrigir algo em nosso JavaScript. Antes disso, vou salvar isso e salvar meu índice ou arquivo HTML. Eu removo esse arquivo CSS e agora eu o abro em nosso servidor ativo. Como você pode ver, estamos recebendo esse tipo de interface. Mas não há cor de fundo. Por que não há cor de fundo? Não há cor de fundo porque dentro da pasta em que estamos trabalhando, não há imagem, então vou copiar essa imagem e colar aqui. Agora temos nossas imagens. Agora temos nossa imagem e vamos colocar essa imagem em nosso plano de fundo. Basta salvar isso e vamos dar uma olhada em nosso navegador. Como você pode ver, temos uma imagem de fundo em segundo plano. Então, agora temos código CSS com sucesso neste projeto. Agora o que eu quero fazer, agora eu quero pesquisar algo como eu vou pesquisar um carro, clicar em Enter ou clicar neste botão. Temos fotos relacionadas ao carro. Agora eu quero pesquisar fotos relacionadas à natureza, então vou digitar natureza. Vou clicar neste botão de pesquisa. Agora você pode ver que estamos recebendo fotos relacionadas à natureza, mas estamos recebendo apenas cinco fotos. Se você quiser aumentar essas fotos, basta digitar, abrir seu arquivo JavaScript e aumentar as fotos dentro do URL. Você deseja obter dez fotos por página, depois remova essas cinco por página e dez aqui. Agora vamos receber dez fotos. Vamos dar uma olhada em nosso navegador. Vou pesquisar por Tiger, TIG Tiger e clicar neste botão de pesquisa Agora, como você pode ver, temos fotos relacionadas ao tigre e, se eu clicar nesse botão mais, obterei mais fotos relacionadas ao tigre. Isso está neste vídeo e criamos completamente esse projeto de fotos e espero que você tenha entendido como construir esse projeto usando JavaScript e como podemos usar o Pexels AP Se você sabe como usar a API Pexels, também pode entender facilmente como usar outro APH Isso é tudo para esta classe.