BARRA de PESQUISA fácil em 9 MINUTOS com HTML, CSS e JAVASCRIPT

[@LTViniciusAlmeida]

Alguns detalhezinhos para serem explicados, mas, pela idade, vontade e até o conteúdo, nota 1000! Raridade de adolescentes nesse nível hoje em dia. Imagine esse menino daqui 10 anos. Sucesso!

[@devpedroribeiro]

Fico feliz que tenha gostado! Estou sempre buscando melhorar. Obrigado pelo seu feedback!

[@jcseutoca]

Caraii... Muleke é uma criança. Como ficou triste, os jovens de hoje já tem tudo na mão ...., mas fico muito orgulhoso também ....

[@leonardomachado669]

vai morar na rua ou no mato então aproveitando q é desempregado para falar isso

[@HebertB]

@@leonardomachado669 calma favelado, não é porque você tem que dividir sua escova com seus 3 irmãos que você pode descontar suas frustrações nos outros

[@jottagta5522]

@@HebertB falo o mlk que mora as custas dos pais, vivendo a base de bolsa familia e se sentido no direito de julgar os outros na internet, Cresce imbecil

[@thiagodesousasantos1960]

Tech Lead Sênior aos 18 anos KKKKKK continua assim cara, tu é brabo!!!

[@devpedroribeiro]

Valeu! Também espero conseguir isso KKKKKKKK

[@flavio-suportedechat3475]

Massa seu video man... Direto ao ponto do que promete o video. Continua e posta mais, ganhou um inscrito!

[@devpedroribeiro]

Obrigado pela ajuda! Vou continuar sim.

[@sandersonalves4918]

Boa noite estou começando a programar agora e você é muito fera explica muito bem Obrigado pela dica!!

[@devpedroribeiro]

Que bom que gostou! Fico feliz em ter te ajudado!

[@Artorias3211]

simples e brabo, vídeo 10/10 autoexplicativo, vc vai ser um bom professor pratico garoto.

[@devpedroribeiro]

Obrigado! Que bom que gostou do vídeo😀

[@kaualves_]

boa garoto, continua nesse caminho, cê tem futuro!

[@devpedroribeiro]

Muito obrigado! Que bom que gostou.

[@torresj0]

Parabéns meu mano. Você é o que chamamos de senior de 2 anos. Quando estiver no mercado, rapidinho vai estar liderando times.

[@devpedroribeiro]

Muito obrigado! Ainda nao estou nesse nível não kkkkkk Espero que um dia chegue nesse patamar...

[@caiosnom]

Absolutamente incrível, com sua idade já está assim, imagina daqui 3 anos, e lembre-se nessa sua profissão não tem como não aprender Inglês. Você vai mais longe do que imagina, muito sucesso guri.

[@devpedroribeiro]

Que bom que gostou! Já estou estudando inglês sim. Muito obrigado!

[@srbolinha3788]

brabooooooooo, era só isso que eu precisava, vlw mlk, mt fera

[@devpedroribeiro]

Que bom que te ajudou! Espero que tenha gostado.

[@gilbertosouza5884]

Excelente didática. Parabéns pela dedicação.

[@devpedroribeiro]

Muito obrigado! Que bom que gostou!

[@vitaobrabo]

Parabéns pelo vídeo, continue que vc vai longe!

[@devpedroribeiro]

Obrigado! Espero ter te ajudado.

[@zpatatiz]

daora mano, tenho uma dica que pode deixar isso mais preciso ainda, creio que de pra colocar um startsWith no input dai caso tu comece a escrever um G ira apenas mostrar os itens que começam com a letra G

[@devpedroribeiro]

Muito boa ideia! Posso publicar um vídeo a respeito disso mais pra frente.

[@thomasthemazzerrunner3615]

É recomendado sempre trabalhar com classes em vez de id's, só usem id's se forem elementos únicos que vocês tem certeza que não vão se repetir.

[@gian99h]

obg

[@Gostosolucas]

boa mano me ajudou muito, continua com os vídeos que este está magnífico!

[@devpedroribeiro]

Que bom que ajudou! Vou continuar sim 😉.

[@mundonimes]

video muito bom eu o começando agora e esse video vai ajudar demais

[@devpedroribeiro]

Que bom que o conteúdo te ajudou!

[@JosenitoTutoriais]

Parabéns pelo projeto a barra de Pesquisa! Aqui é Josenito Tutoriais jovem.

[@devpedroribeiro]

Obrigado! Que bom que gostou do projeto.

[@kixzinh]

Obrigado! Ajudou muito (y)

[@devpedroribeiro]

Que bom saber!

[@nivaldomonteiro3694]

Massa demais Pedrão. Ensina a baixa esse editor de código aí, tô passando uns perrengues no VSCode...

[@devpedroribeiro]

Oi! Que bom que gostou! Esse editor é o codepen.io ele é online e gratuito. Não precisa instalar não😀

[@henri5k]

Valeu

[@natan133]

Oi meu nome e natan eu sou aluno de eeep ai eu faço informatica e o ensino medio la na escola eu vou começar a estudar javascript mais a fundo pra mim poder fazer um bom estagio ano que vem teu video me ajudou muito vou me inscrever

[@devpedroribeiro]

Fico feliz em ter te ajudado! Espero que consiga o estágio que você deseja! Obrigado pela inscrição.

[@ifenixinformaticaesolucoes]

Parabéns Garoto.

[@devpedroribeiro]

Que bom que gostou do conteúdo!

[@tcholadark]

faz umas duas semanas que comecei a aprender.. tô começando por html e css... espero que dê certo... tem que dar certo... daqui uns anos volto e digo (-_-

[@devpedroribeiro]

Que legal que decidiu estudar programação! Vai dar certo sim, se você continuar aprendendo e praticando. Bons estudos!

[@cycro]

vai por ai msm q eu fui aprender js e ts de começo só sei isso "só". Tenho dificuldade com css mas consigo dar meus pulo.

[@jonaslimah2802]

Parabéns pelo video.

[@devpedroribeiro]

Obrigado 😃! Que bom que gostou.

[@planob9201]

Muito bom continua !!!

[@devpedroribeiro]

Que bom que gostou! Muito obrigado.

[@edmundombr]

gostei da sua dica. valeu

[@devpedroribeiro]

Que bom que gostou! Espero que tenha te ajudado.

[@annymilly8478]

cara me tira uma dúvida, tipo daria pra criar essa listagem só que usando uma API em vez de ter que fazer toda ela(a listagem)?

[@devpedroribeiro]

Acredito que sim. Seria algo mais complexo, mas que dá pra fazer, dá.

[@renatosalamoni]

Genial.

[@devpedroribeiro]

Valeu! Espero que o vídeo tenha te ajudado.

[@danielplayerytbr1061]

ai sim , tu manja muito de html

[@devpedroribeiro]

Valeu cara! Eu já tinha feito esse projeto algumas vezes, então fica mais fácil..

[@rafael.amaral1664]

Se puder, disponibiliza o codepen pra gente comparar o nosso código e estudar o seu! ^^

[@devpedroribeiro]

Claro! Meu codepen é esse aqui: codepen.io/devpedroribeiro

[@1972vieira]

Camarada esperto. Vou te dar uma ideia para vc ganhar seguidores. .... Dificilmente temos o mesmo conceito. Porem... Tudo parte de um unico início. A base. Site para loja fisica . Exemplo: De loja: Nome da loja Lista de produtos dessa loja e barra de pesquisa deste.

[@devpedroribeiro]

Muito boa a sua ideia, vai virar vídeo com certeza!

[@iagobelmonte4213]

Jóia Mano

[@devpedroribeiro]

Que bom que gostou!

[@_leticia_porto]

ajudou bastante. obg :)

[@devpedroribeiro]

Que bom que ajudou! Não esquece de se inscrever no canal que tá vindo vídeo novo essa semana...

[@JuaryGarciaTebús]

Boa noite, como voçê esta? Parabens pelo teu desempenho. Eu sou um estudante de programação e estou precizando de ajuda na minha formação. Será que podes ajudar-me?

[@devpedroribeiro]

Oi! Obrigado pelos parabéns! Fico feliz que tenha gostado do meu desempenho. Como posso te ajudar com sua formação em programação?

[@danilonascimento8347]

Canal top

[@devpedroribeiro]

Fico feliz que o vídeo tenha te ajudado!

[@MatheusHenrique-bs3sx]

Gostei do vídeo! Teria como eu ocultar os itens enquanto não tiver nada escrito no placeholder? Eu queria utilizar com muitas li's, então ocuparia muito espaço

[@MatheusHenrique-bs3sx]

Encontrei seu vídeo ensinando 🤝

[@devpedroribeiro]

Que show cara! Espero que te ajude 😉

[@tulanisouza4867]

Oi, Pedro. No caso de pesquisar produtos vindos de uma API, seriam os mesmos comandos?

[@devpedroribeiro]

Boa noite! Perdão pela demora em responder. Sobre sua pergunta, o fato dos dados serem de uma API, vai alterar somente na listagem dos itens, percebi que algumas pessoas já perguntaram sobre isso, o que acha de um vídeo sobre?

[@tulanisouza4867]

@@devpedroribeiro me ajudaria demais! Perdi uma oferta de trabalho por não saber fazer isso e nem add, sub. e remoção em carrinho de compras usando api

[@kingdoterror]

vlw meu caro!

[@devpedroribeiro]

Bons estudos!

[@SuperDiaristas-ze4jp]

sinistrin, filhote de demonin kkkkkkkkkkkkkkkkk parabens mlk sou seu fã

[@devpedroribeiro]

Valeu amigo! Espero que o vídeo tenha te ajudado.

[@capuchinho3k]

valeu

[@slvbigode]

como eu criaria uma condicional caso valor do input não exista na lista?

[@devpedroribeiro]

Cara, em primeiro lugar, perdão pela demora. Provavelmente você até já descobriu como fazer, mas sua dúvida pode ser a de outros também. Primeiro, você precisa criar uma variável booleana chamada "empty" iniciada com o valor true, e adicionar o bloco de código empty = false; onde o loop encontra um item compatível com o input. Após o loop for, adicione uma condicional para verificar se "empty" é true e pode fazer o que quiser com essa informação. O código completo: function search_animal() { let input = document.getElementById('searchbar').value input=input.toLowerCase(); let x = document.getElementsByClassName('animals'); let empty = true; for (i = 0; i < x.length; i++) { if (!x[i].innerHTML.toLowerCase().includes(input)) { x[i].style.display="none"; } else { x[i].style.display="list-item"; empty = false; } } if(empty){ // nenhum item encontrado let out = document.getElementById("output"); output.innerText = "Nenhum item encontrado."; }else{ output.innerText = ""; } }

[@manoelribeiro8310]

Muito bom vídeo

[@devpedroribeiro]

Obrigado pelo feedback!

[@SouNinguém-z5i]

Incrível

[@devpedroribeiro]

Que bom que gostou!

[@anonimus007_]

Era tão simples

[@devpedroribeiro]

Nesse caso é kkkkk

[@anonimus007_]

@@devpedroribeiro kakaka

[@lordesaytama2194]

Como eu escondo a lista para não fica visível na página?

[@chapahallss]

Fala brother, eu sou iniciante em js, mas essa eu tenho como ajudar. Eu fiz desse jeito, não sei se é o melhor, mas funcionou. Você precisa esconder as linhas com style="display: none;" Daí acho que vc só precisa fazer o if com x[i].style.display = "" para mostrar o conteúdo da busca Só precisa ver o que quer esconder. Se forem dados sigilosos, ainda assim será possível ver esses dados no código fonte

[@devpedroribeiro]

Olá amigo! Essa semana vou publicar um vídeo sobre isso. Sai sexta-feira. Se a dica do @chapahalls não te ajudar, espero que o vídeo te ajude.

[@chapahallss]

@@devpedroribeiro Melhor ele ir no teu vídeo haha mais confiável. Um abraço

[@jairoprates4300]

@@chapahallss "tr"?? é tag de linha de tabela, nesse caso ele tem que esconder a tag que já esconde tudo.

[@wagnerdavi2229]

legal pow

[@devpedroribeiro]

Que legal que gostou!

[@torreto_family]

Quando vou pesquisar escrevo o nome do animal mais n acontece nada

[@devpedroribeiro]

Oi! Me manda seu código pra eu dar uma olhada😉

[@bryancorreia3886]

opa irmao? quantos anos voce tem?

[@devpedroribeiro]

Oi Bryan, atualmente tenho 14 anos.