No video
Filtrando elementos na DOM com JavaScript PURO!
Рет қаралды 31,824
Жыл бұрынOfertas imperdíveis da Black Friday Rocketseat: rseat.in/Ofert...
Pra chegar até aqui você provavelmente usou alguns sistemas de pesquisa. Como devs, estamos sempre pensado como as ferramentas do nosso dia a dia são criadas.
Algumas podem ser simples, outras mais complexas. Algumas já foram até pedidas durante o teste técnico de entrevistas de emprego..
No vídeo de hoje, Maykão mostra na prática como é criar um sistema de filtro para elementos DOM usando JavaScript na sua mais pura forma.
Link do projeto inicial
fronteditor.de...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
@henriquepassos3825 Жыл бұрын
Esse foi um dos melhores métodos que vi para ensinar um iniciante em javascript, o passo a passo sem o código é essencial, pois o aluno precisa pensar em como resolver isso
@mikeiastomaz2918 Жыл бұрын
Depende, pelo q ouvi de muitos devs, é sempre bom começar com tudo pronto ("copiar código pronto"), vc vai entendendo os pedacinnhos aos poucos, testando, modificando-os e dominando o básico no processo, depois disso é q é melhor desafiar apenas com instruções, pq, os iniciantes mesmo, eles não fazem nem ideia do q deveria pesquisar, de como começar, ver as instruções/pseudo código e pensar em como "codá-las", não exatamente pra iniciantes.
@caioantunesdeoliveira3249 Ай бұрын
Em 20 minutos de aula me ajudou a concluir o que eu queria a mais de 2 dias tentando. Muito obrigado!
@marcosbarros883 3 ай бұрын
Essa aula do Maykão ficou simplesmente sensacional. 👏
@aasdffut Жыл бұрын
Excelente conteúdo. E disso que precisamos, pequenos projetos. Obrigado. Um dia apareço por aí na Rocktseat para fazer um curso.
@upglobalinternacionalgomes3498 3 ай бұрын
Perfeito em didática, e muito bem planejado e explicado. Parabéns!
@weslleyprado8499 5 ай бұрын
Porra Maicão cê é o cara, sempre tive muuuita dificuldade com JS e lógica, tava perdidinho não fazendo ideia em como estudar ou melhorar meu entendimento. Apliquei isso em um projeto pessoal e deu super certo, essa dica sobre voltar e fazer sozinho é sensacional, muito obrigado cara!!!
@app2028 5 ай бұрын
Seus vídeos são únicos um domínio digno do seu tempo é experiência parabéns. Sebastião de Goiânia Goiás 🎉
@guilhermeviola4477 Жыл бұрын
Obrigado pelo conteudo de qualidade! Fiz primeiro com a sua resolução, depois testei com forEach e ternário. const filterInput = document.querySelector("#filter") const cards = document.querySelectorAll(".cards li") filterInput.addEventListener("input", filterCards) function filterCards() { if(filterInput.value !== "") { cards.forEach(card => { let title = card.querySelector("h2").textContent.toLowerCase() let filterText = filterInput.value.toLowerCase() !title.includes(filterText) ? card.style.display = "none" : card.style.display = "block" }) } else { cards.forEach(card => { card.style.display = "block" }) } }
@thatslifemg 10 ай бұрын
Muito bom, amigo! Sempre bom melhorar o código.
@eulirico0002 23 күн бұрын
Show de bola!!
@cssgabriel Жыл бұрын
Muito bom! Parabéns Rocketseat e Maicao .. fera demais
@branmendes2491 Жыл бұрын
Em menos de 10 minutos, adiantou um curso de 2 semanas.
@maykbrito Жыл бұрын
😍👏🏽
@DCMapas Жыл бұрын
8:27 gostei disso, acabei de usar em um projeto meu :D
@luis.s.daniel Жыл бұрын
Cara, muito bom este "has".
@hudsondelimardrogies Жыл бұрын
Muito obrigado!
@diegopaulino8727 Жыл бұрын
esse cara é monstro !!
@Matt_BB_21 6 ай бұрын
Acabei de aplicar no projeto aqui da empresa. Excelente explicação.
@ericodesenvolvedor9618 Жыл бұрын
Ótimo conteúdo, um pequeno componente que faz toda a diferença, adorei!
@mbs2488 Жыл бұрын
S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
@mbs2488 Жыл бұрын
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
@luuysouza 9 ай бұрын
Nossa, funcionou muito bem pro projeto que eu estava desenvolvendo!! muito obrigado!
@jilherme Жыл бұрын
mt interessante essa questão do font-size 62.5% pra facilitar trabalhar com rem!!
@tagata20 Жыл бұрын
Parece q leu minha mente. Era exatamente isso oq precisava no momento. Obrigada! ❤️
@mikeiastomaz2918 Жыл бұрын
Eu já tinha encontrado alguns videos q ensinavam basicamente a mesma coisa, mas esse é de longe uma das versão mais atualizadas e clean q eu achei.
@samueloliveira4465 Жыл бұрын
Maykão, onde você pega ideias para criar projetos como esse? Você me deu uma ideia, criar uma galeria de fotos onde você salva no banco imagens, aí depois pode apresentar em tela e buscar pela data de criação igual você fez no vídeo, em node e react.
@maykbrito Жыл бұрын
Esse eu vi em algum vídeo do KZfaq mesmo. Mas eu sempre fico vendo canais, artigos no medium e no Dev.to, no git e Twitter tbm… sempre vão aparecendo ideias soltas.. daí a gente mistura um pouco aqui e outro ali e acaba saindo as ideias 💛
@samueloliveira4465 Жыл бұрын
@@maykbrito Muito massa, obrigado por tirar um tempinho para responder.
@devtocruz6698 Жыл бұрын
Me amarro em ver esses minis projetos simples e úteis 🤓
@helenamignogna2499 9 ай бұрын
Me ajudou muito! Obrigadaaa! 😃😃😃😃
@andersonhipocreme822 Жыл бұрын
Rapaz tava pensando hoje em fazer isso pra dar uma incrementada no projeto da copa e vcs postam isso kkkkk vlw
@math-rosa Жыл бұрын
Me ajudou muito. Fiquei feliz de conseguir aplicar ao meu código. Obrigado Mayk. Excelente conteúdo.
@cassianocominetti7784 Жыл бұрын
Muito bom! Além de ajudar a melhorar a lógica, é algo que pode ser utilizado no dia a dia! Valeu Maykão!
@jailtonmendes8965 Жыл бұрын
Muito Massa...
@geraldopcf 10 ай бұрын
Muito show de bola, só queria deixar uma dica para evitar o uso de mais um else para mostrar todos os elementos quando não tem input: No lugar de if(filterElement.value != ' '){...} deixar apenas if(filterElement) {...} nesse caso ele vai aproveitar o else do for of que está dentro da condição if
@joaobraz612 Жыл бұрын
Projetinho top demais
@hwgotv Жыл бұрын
Mayk é brabo demais!
@diegommagno Жыл бұрын
Olha o has de novo hahah
@AdemarMorais-bv4bv 7 күн бұрын
Muito bom seu trabalho Rocketseat! Tenho um site de filmes em html e queria saber se tem como filtrar os vídeos, tenho uns 150 filmes: imagens títulos e links para cada vídeo. Estrutura: section>container>movies-slides> a.movie-item> o poster e título . . .
@osmarbritodasilva6546 Жыл бұрын
Esse Maykão eh tooop demais. Esquece copa do mundo....kkk
@lammad Жыл бұрын
Mano, top demais. Vou fazer. Obrigado demais aí.
@brendonalex4848 Жыл бұрын
Alguém sabe dizer de quanto em quanto tempo abre a turma para o explore? Pretendo fazer próximo ano. No momento estou sem tempo.
@josejunior9577 Жыл бұрын
Maneiro demais!!!
@joedsonferreira19 Жыл бұрын
Consegui fazer só com as orientações, o código não ficou tão profissional quanto o do mayk, mas funcionou kkkkk
@leonardoantoniomaundokabon786 Жыл бұрын
grande Mayk valeu
@gabrielribeiro5520 Жыл бұрын
para fazer um loop qual seria a melhor opção? forEach? for of? tem diferença?
@joaofelipelima7030 Жыл бұрын
Muito bom!!
@lucas5967g Жыл бұрын
Mayk, sou iniciante e tenho dificuldade. Comecei a assistir vídeos de javascript para ver como as pessoas codam as coisas, como por exemplo: uma calculadora, um jogo da velha, um dark mode, um formulário e até mesmo esse sistema de filtro do vídeo, que aliás ficou excelente maykao! Você acha que é uma boa ideia eu primeiro assistir esses vídeos onde as pessoas codam pra que eu veja como é feito, e depois tentar reproduzir oque foi feito sozinho? Sem olhar no vídeo, sem nada?
@maykbrito Жыл бұрын
Fala Lucas! Tô vendo sua mensagem agora. Eu acho excelente você aprender assistindo como os outros fizeram. É uma maneira de você ir entendendo a lógica das coisas. Depois que vc entendeu olhando, é importante você fazer e forçar ao máximo não olhar. Mas, olhe quantas vezes forem necessárias até que você tenha capacidade de fazer sozinho. Isso leva tempo e prática. Assim como eu posso assistir as pessoas tocando alguma música, eu só vou saber tocar aquela música quando eu praticar muito. Ou, vendo um jogador fazendo uma jogada bonita, onde eu posso entender como ele fez, mas eu só vou saber fazer se eu praticar muito. Então, segue assistindo a fim de entender, depois, pratique muito a fim de aprender! Abração
@abraaocarvalho2923 Жыл бұрын
Cara, eu fiquei perdidinho na linha for(let card of cards) { } Tipo, nunca vi um for ser declarado dessa maneira, fui até no MDN pra vê algo semelhante, eu sou muito noob mesmo kkkk
@pedrocarvalho03 Жыл бұрын
Maykão god dms
@guilbervieira 7 ай бұрын
rocketset tem forma de pagamento mensal ?
@foconomeufuturo515 9 ай бұрын
gente, não deu certo pra mim, meu código ta identico mas a parte de Js não funciona :(
@foconomeufuturo515 9 ай бұрын
Meu Js só rodou corretamente dentro do meu arquivo html. Vou sobreviver.
@felipejre Жыл бұрын
Lá ele
@weversonessin2448 Жыл бұрын
show
@joaofelipelima7030 Жыл бұрын
O link não tá funcionando, leva para arquivos em branco ;-;
@own4ge Жыл бұрын
Cadê o link do projeto?
@rocketseat Жыл бұрын
Coloquei na descrição agora 😍
@randomprofile9523 Жыл бұрын
Como ficou minha solução: const cards = document.querySelectorAll('.cards li'); const filterInput = document.getElementById('filter'); function hasWhiteSpace(text) { return /\s/g.test(text); } filterInput.addEventListener('input', () => { const filterText = filterInput.value.toLowerCase(); if (hasWhiteSpace(filterText)) return; for (const card of cards) { let cardTitle = card.querySelector('h2'); cardTitle = cardTitle.textContent.toLowerCase(); if (cardTitle.includes(filterText)) { card.style.display = 'block'; } else { card.style.display = 'none'; } } });
@willianfonseca310 Жыл бұрын
Salve
@samukarbrj Жыл бұрын
kd o código inicial kkk
@maykbrito Жыл бұрын
Kkkk faltou eu enviar. Coloquei agora na descrição
@samukarbrj Жыл бұрын
@@maykbrito muito obrigado! to aprendendo bastante no canal!
@doseemdobro Жыл бұрын
um tanto quanto parecido const input = document.querySelector('#filter'); const cards = document.querySelectorAll('.cards li'); input.addEventListener('input', filter_cards); function filter_cards(e) { const input_text = e.target.value; if(input_text) { cards.forEach((el) => { const title = el.querySelector('h2').innerText; const title_lowcase = title.toLocaleLowerCase(); if(title_lowcase.includes(input_text) === false) { el.style.display = "none"; console.log(el) } else { el.style.display = "block"; } }) } else { cards.forEach((el) => { el.style.display = "block"; }) } }
@dbsdenis81 Жыл бұрын
const filterElement = document.querySelector('header input') const cards = document.querySelectorAll('.cards li') filterElement.addEventListener('input', filterCards) function filterCards(){ if(filterElement.value != ''){ for (let card of cards){ let title = card.querySelector('h2') .innerText .toLowerCase() let filterText = filterElement.value.toLowerCase() if(!title.includes(filterText)){ card.style.display = 'none' } } }else{ for (let card of cards){ card.style.display = 'block' } } }
@nelson.costa.dev2536 Жыл бұрын
tava assistindo a copa e parei kakaka
@joseborgesdonascimentodaco1496 Жыл бұрын
Prioridades rsrs
@klesionascimento9041 Жыл бұрын
Fiz dessa forma antes de ver o vídeo ! let filter = document.querySelector('#filter'); let cards = document.querySelectorAll('.cards li'); addEventListener('keyup', () => { let value = filter.value; cards.forEach((element) => { let titleCards = element.children[0].textContent.trim().toLowerCase(); if (value === '') { element.style.display = 'block'; } else if (titleCards.includes(value)) { element.style.display = 'block'; } else { element.style.display = 'none'; } }); });
@gregollyfelipedefranca1468 Жыл бұрын
Minha solução foi essa window.addEventListener('load', () => { const inputFilter = document?.querySelector('#filter') function handleFilterArticles(type) { const cards = document?.querySelectorAll('.cards li') const arrayCards = Array.from(cards) if(type !== "") { const filterCards = arrayCards.find((card) => card.childNodes[1].childNodes[3].innerHTML.toLowerCase() === type.currentTarget.value.toLowerCase().trim()) if(filterCards) { arrayCards.forEach((card) => card.classList.add('hide')) filterCards.classList.remove('hide') } if(type.currentTarget.value === "") { arrayCards.forEach((card) => card.classList.remove('hide')) } } } inputFilter?.addEventListener('input', handleFilterArticles)