Projeto JavaScript: crie um aplicativo de busca de GIF

1. Apresentação: Todos nesta classe, vamos criar a pesquisa GF usando JavaScript. É assim que nossa busca por JF será. Neste A, você pode pesquisar qualquer tipo de JF. Eu quero pesquisar JF relacionado ao riso, então vou digitar aqui Vou remover esse HP e digitar rindo aqui. E clique neste botão de pesquisa. Como você pode ver, nós rimos relacionados ao GFS. Agora eu quero pesquisar por GF relacionada à culinária. Vou digitar aqui Cooking CWKING Cooking e clicar neste botão de pesquisa Então eu vou pegar o GFS relacionado à culinária. Agora eu quero pesquisar o JF em execução, então vou digitar running aqui e clicar neste botão de pesquisa Então eu vou começar a rodar o GF relacionado. Vamos aprender como criar esse tipo de pesquisa GF usando JavaScript na próxima 2. Configuração: Neste vídeo, vamos fazer a configuração do nosso projeto. Para escrever código, vou usar o Visual Studio Code Editor. Se você não tiver o Visual Studio code iter, basta instalá-lo Para instalar, basta visitar o Google e pesquisar código Vs e clicar neste primeiro link ou abrir este primeiro site. Se você tiver o Windows, você pode clicar neste botão de download para Windows e, se tiver, você obterá o botão de download do Make aqui. Após o download, vamos criar uma pasta. Aqui eu criei uma pasta. O nome da pasta é gerador F. Você também pode criar uma pasta. O nome da pasta pode ser qualquer coisa. Mas eu escrevi o gerador JF aqui dentro desta pasta, existem três arquivos O primeiro arquivo é HTML com pontos de índice. Seu nome de arquivo pode ser qualquer coisa, mas as extensões seriam H dot js e depois Basta criar esses três arquivos, indexar script html dot js e estilizar CSS. Flames pode ser qualquer coisa, mas as extensões seriam HTML, CSS e JavaScript. E abra esse índice com o arquivo HTML. Eu abri esse índice com um arquivo HTML, e agora vamos criar um padrão HTML Para escrever HTML Bilerbd, precisamos digitar muito código. Mas se você estiver usando o Visual Studio Code, não precisará escrever muito código. Você pode usar apenas um truque ou um atalho. O atalho é simplesmente digitar um ponto de exclamação e Dentro deste HTML Voilerb, podemos escrever qualquer código HTML. Primeiro de tudo, vou vincular esse CSS ao nosso HTML. Para vincular CSS ao nosso HTML, vou usar a tecnologia Link, então vou digitar Link aqui e clicar neste Link CSS, e o Hf deve ser o nome do arquivo Nosso nome de arquivo tem o estilo CSS e, dentro desse HRF, escrevemos Eu cometi alguns erros. Vou digitar Control jet e ele será corrigido. Então, agora vamos conectar nosso script Java com nosso HTT, conectar JavaScript com cada tâmil, basta entrar nessa tecnologia corporal e, dentro dessa tecnologia corporal, você precisa criar um Scripte para que eu E assim que escrevi SC, recebi algumas sugestões e, a partir dessa sugestão, tenho que clicar em Script SRC Dentro desse SRC, vou digitar meu filme em JavaScript. Meu filme em JavaScript é script dot js, então vou digitar aqui script dot js. O ponto do script é. Vamos criar algum espaço aqui. É isso mesmo. Fizemos nossa configuração corretamente e, a partir do próximo vídeo, vamos começar a escrever nosso código para esse gerador de JF 3. criando a interface do usuário: Neste vídeo, vamos escrever código HTML para nosso projeto Para escrever código extremo, vou entrar nessa tecnologia corporal e dentro desse corpo te, vou criar um contêiner DIF Para criar o dif do contêiner, basta digitar D e, em seguida, digitar ponto e digitar o contêiner e clicar em Enter O contêiner DV está pronto. Dentro desse Die eu vou criar mais um Diftech para entrada e botão Vou digitar Diffe DIV Div nome da classe desse div será o contêiner de Vou escrever a classe aqui, a classe CLaws e o nome da classe será o contêiner de entrada, o contêiner entrada IN Put e o contêiner TI NR E vamos criar uma tecnologia de entrada. Para criar uma tecnologia de entrada, digitarei a entrada e o tipo dessa entrada será texto e , em seguida, darei uma ID a essa entrada e a ID será a entrada de pesquisa. E precisamos de um botão abaixo dessa tecnologia de entrada. Vou abaixo dessa tag de entrada e criarei uma tag de botão. No nome desse botão estará a pesquisa. Deve estar em letra da cabala, vou escrever em maiúsculas, vamos verificar o que está faltando para verificar. Vou abrir nosso GF searchab. Você pode ver, em primeiro lugar, precisamos de uma tecnologia H onde F searchab está escrito, depois precisamos de um campo de entrada e, em seguida, precisamos de um botão vou escrever em maiúsculas, vamos verificar o que está faltando para verificar. Vou abrir nosso GF searchab. Você pode ver, em primeiro lugar, precisamos de uma tecnologia H onde F searchab está escrito, depois precisamos de um campo de entrada e, em seguida, precisamos de um botão de pesquisa. Deixe-me escrever essa pesquisa F acima desse campo de entrada. Vou superar esse DFTech e, abaixo desse DF contínuo, criarei uma tecnologia H one e, dentro dessa tecnologia H one, escreverei um GIF escreverei Agora vamos salvar isso e dar uma olhada em nosso navegador, como nosso site está agora. Então, como você pode ver, nossa busca F está assim agora. Vamos adicionar um pouco de estilo neste F searchF e torná-lo assim Para adicionar estilo, adicionaremos esse estilo em outro vídeo ou no próximo vídeo, adicionaremos estilo nesta pesquisa F. Vamos terminar nossa tabela H primeiro. O que há para terminar? A última coisa que precisamos fazer é criar uma tecnologia Diff para que nossos GIFs signifiquem para isso, temos que criar uma tecnologia Diff, então vou criar uma Abaixo dessa anternat de entrada, criarei uma tecnologia Diff, e a classe dessa tecnologia de diferença será, deixe-me escrever deixe-me Deixe-me escrever, eu divido a aula. Vamos escrever o IDN, o ID desses GIFs dv. Com essa onda, escrevemos corretamente nosso código HTML. Agora vamos adicionar um pouco de CSS neste projeto. 4. Como estilizar a interface do usuário: Neste vídeo, vamos adicionar estilo ao nosso projeto. Para adicionar estilo, abrirei o arquivo CSS de estilo e, dentro desse arquivo CSS de estilo, posso digitar o código CSS para nosso projeto Então, primeiro de tudo, eu quero adicionar estilo neste contener Vou selecionar esse div de conteúdo em CSS para selecionar esse conteúdo, posso copiar essa classe de contêiner e, nesse arquivo CSS de estilo, vou apenas digitar dot porque estou digitando dot Because continuar Se o contêiner fosse ID , eu estaria escrevendo como. Deixe-me escrever um ponto porque é aula e clique em Taxa de controle. Agora nosso contener dif está selecionado, agora podemos adicionar estilo ao nosso continente Vamos verificar que tipo de estilo queremos adicionar. Nesta continuação, se quisermos acrescentar que isso significa que queremos trazer o centro de defesa do nosso continente Para trazer este continente ao centro divino, usarei o Flexbox. A primeira propriedade ao usar o Flexbox é display flex. Vou digitar display e depois flexionar FLA X flex. Agora vou digitar diretas flexíveis e coluna, direções flexíveis e coluna e, em seguida, justificar o centro de conteúdo Justifique o conteúdo e justifique o conteúdo com o V center. Agora vamos salvar e dar uma olhada no nosso navegador. Salvei esse arquivo e agora vou abrir este navegador e recarregá-lo Como você pode ver, não há mudanças. Vamos verificar por que não há mudanças. Não há alterações porque eu escrevi aqui estilos, mas meu nome de arquivo é estilo. Deixe-me remover isso e clicar neste botão Salvar e, em seguida, vamos dar uma olhada em nosso navegador. Agora vamos recarregá-lo. Agora não está funcionando porque eu também tenho que salvar esse arquivo CSS. Controle S e depois recarregue. As direções flexíveis não seriam colunas, então vou digitar uma linha aqui, remover essa coluna e escrever uma linha Salvar. Agora, como você pode ver, nosso JF pesquisa no centro, mas precisamos adicionar mais estilos a O que vou fazer agora é mudar essa direção para coluna em vez de justificar o centro de conteúdo, vou digitar o centro de itens de linha Centro de linhas. Agora vamos dar uma olhada nos controles e, como você pode ver, agora nossa pesquisa F está alinhada corretamente no centro Agora vamos deixar o estilo entrar nesse campo de entrada e nesse botão de pesquisa. Para o campo de entrada e o botão de pesquisa, tenho que selecionar esse contêiner de entrada de classe. Vamos selecionar esse Controle C. E, em seguida, pontuar Controle V. Agora vamos alinhar essa coisa também no centro Esse botão de pesquisa está no lado direito e o campo de entrada está no lado esquerdo, mas queremos esse botão de pesquisa abaixo desse campo de entrada assim. Para isso, precisamos selecionar esse contêiner de entrada e já selecionamos esse contêiner de entrada. Agora temos que centralizar isso corretamente. Para centralizar isso corretamente, vou usar o Tiegin Display Flex aqui. E o axônio flexível será coluna e o item Aline será Controle C e Controle V. Agora vamos salvar e dar uma olhada em nosso navegador. Agora você pode ver que o campo de entrada é Ab e o botão está abaixo, como o que está aqui. Agora vamos adicionar um pouco de estilo a essa tecnologia de botão. Para adicionar alguma ortografia neste botão Teck, eu tenho que selecionar este Como temos apenas um botão em nosso projeto, posso selecionar diretamente essa tecnologia de botão para selecionar esse botão Tek, vou digitar o botão aqui e depois adicionar algumas vendas neste botão. A primeira coisa será a margem superior porque queremos alguma margem a partir do topo. Como você pode ver, não há margem a partir do topo ou não há margem entre esse campo de entrada e esse botão. Para criar alguma margem entre esses dois, temos que escrever a margem superior. Vou digitar margin top. Serão dez pixels, e então eu coloquei um pouco de preenchimento neste botão, preenchimento será de dez pixels na parte superior e inferior e na esquerda e direita, 20 pixels Dez pixels na parte superior e inferior, depois espaço, depois para a esquerda e para a direita, vou digitar 20 pixels. E então, para fazer nosso botão arredondar, adicionarei um raio de borda a esse botão, raio da borda, e para torná-lo redondo corretamente, preciso digitar 50 pixels Redondo corretamente significa muito redondo, como você pode ver, eu quero fazer esse botão tão redondo. Para isso, vou digitar o raio da borda de 50 pixels. Agora acabei de digitar borda, então vou digitar raio da borda Então, agora nosso botão será redondo. Vamos dar uma olhada em nosso navegador. Como você pode ver, nosso botão agora está redondo. Agora vou aumentar o tamanho da fonte da pesquisa. Em seguida, adicionarei um pouco de cor a esse botão e mudarei a cor desse texto de pesquisa. Significa que vou mudar a cor dessa fonte. Então, para aumentar o tamanho da fonte, o tamanho da fonte aqui e o tamanho da fonte será de 24 pixels, depois para adicionar cor, a cor de fundo do tipo Ile , e a cor de fundo será, digitarei o ato como 05a4 sete A. Agora vou tornar essa fonte branca Para tornar essa fonte branca, eu tenho que digitar a cor e apenas digitar como FFF Isso tornará nossa cor branca e, em seguida, adicionarei um ponteiro do cursor Sempre que passarmos o mouse sobre esse botão, quero remover esse símbolo do cursor e trazer o símbolo de uma mão Para trazer o símbolo de uma mão, digitarei cursor, cursor CR SOR e, em seguida, o cursor será o ponteiro Então, vamos salvar e dar uma olhada em nosso navegador. Agora, sempre que eu passar o mouse sobre esse botão, meu cursor se converterá em ponteiro Perca esse símbolo de mão. Vamos adicionar um efeito de foco neste botão. Sempre que passo o mouse sobre esse botão, quero mudar um pouco a cor desse botão Significa que eu quero deixar essa cor de fundo um pouco mais escura Para isso, selecionarei essa tecnologia de botão e, para adicionar o efeito de foco, tenho que digitar dois pontos e depois escrever hover, HOV hover Dentro desse colchete encaracolado, vou digitar a cor de fundo e, em seguida, essa cor de fundo ficará um pouco mais Controle V e eu selecionarei uma cor de fundo escura. Abaixe o cursor um pouco e nosso botão ficará um pouco mais escuro Vamos salvar isso e dar uma olhada no navegador. Agora, como você pode ver, o efeito Her está funcionando corretamente. Agora eu quero adicionar estilo neste campo de entrada. Para adicionar estilo a esse campo de entrada, selecionarei esse campo de entrada para selecionar o campo de entrada Vou apenas digitar input porque temos apenas uma tag de entrada em cada tabela. É por isso que estou selecionando diretamente esse campo de entrada com tag de entrada, não com nenhuma classe ou ID específica. Então, primeiro de tudo, eu quero aumentar o tamanho desse campo de entrada. Para aumentar o tamanho desse campo de entrada, eu tenho que escrever preenchimento e o preenchimento de cima e de baixo será de dez pixels e esquerdo e direito será de 20 pixels, 20 px Isso salva e tem um navegador de login. Agora você pode ver nossa entrada agora nosso campo de entrada é um pouco maior. Vamos adicionar um pouco mais de estilo nesse campo de entrada. Quero tornar esse campo de entrada redondo para tornar esse raio de borda redondo do tipo Ile e, em seguida, o raio da borda será de 15 pixels E o valor do tamanho da fonte é de 24 pixels. Em seguida, vamos adicionar uma borda neste filme de entrada para adicionar borda do tipo Il e, dentro dessa borda, escreverei um pixel sólido e, em seguida, um nome de cor. Um pixel, sólido. E o nome da cor terá três C significa CCC. Agora vamos salvar o overlook em nosso navegador. Como você pode ver agora, nosso campo de entrada está parecido com este. Agora vou aumentar o tamanho da fonte deste H one te para aumentar o tamanho da fonte deste h1t, eu tenho que escrever H um aqui, significa que vou selecionar este H one tech N, basta escrever a fonte do tamanho F, e o tamanho da fonte será de cerca de 24 pixels Vamos salvar um overlook em nosso navegador. Agora, meu tamanho de fonte é menor para torná-lo maior Aletype, tamanho de fonte maior, como 35 pixels O tamanho seria mais de 45 pixels, agora vamos dar uma olhada em nosso navegador. Agora, nosso tamanho de fonte está adequado. Agora vamos remover essa borda desse botão Para remover essa borda desse botão, vou digitar border nun neste botão Vou entrar nesse botão e depois escrever borda, e então a borda será nenhuma. Vamos salvar e eu procuro no Navegador. Nossa borda preta foi removida desse botão. Agora nosso estilo parece o mesmo. Esse estilo, nesse estilo, é o mesmo. Agora vamos escrever código JavaScript para nosso projeto.