Filtrando elementos na DOM com JavaScript PURO!
HTML-код
- Опубликовано: 1 окт 2024
- 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
Excelente conteúdo. E disso que precisamos, pequenos projetos. Obrigado. Um dia apareço por aí na Rocktseat para fazer um curso.
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';
}
}
});
Perfeito em didática, e muito bem planejado e explicado.
Parabéns!
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"
})
}
}
Muito bom, amigo! Sempre bom melhorar o código.
Show de bola!!
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.
Esse eu vi em algum vídeo do RUclips 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 💛
@@maykbrito Muito massa, obrigado por tirar um tempinho para responder.
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
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.
Muito obrigado!
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 . . .
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'
}
}
}
mt interessante essa questão do font-size 62.5% pra facilitar trabalhar com rem!!
Em 20 minutos de aula me ajudou a concluir o que eu queria a mais de 2 dias tentando. Muito obrigado!
8:27 gostei disso, acabei de usar em um projeto meu :D
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.
Olha o has de novo hahah
esse cara é monstro !!
Muito bom! Parabéns Rocketseat e Maicao .. fera demais
S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Me ajudou muito! Obrigadaaa! 😃😃😃😃
Ótimo conteúdo, um pequeno componente que faz toda a diferença, adorei!
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
rocketset tem forma de pagamento mensal ?
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)
Rapaz tava pensando hoje em fazer isso pra dar uma incrementada no projeto da copa e vcs postam isso kkkkk vlw
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';
}
});
});
Esse Maykão eh tooop demais.
Esquece copa do mundo....kkk
Cara, muito bom este "has".
Me amarro em ver esses minis projetos simples e úteis 🤓
Em menos de 10 minutos, adiantou um curso de 2 semanas.
😍👏🏽
Muito Massa...
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
gente, não deu certo pra mim, meu código ta identico mas a parte de Js não funciona :(
Meu Js só rodou corretamente dentro do meu arquivo html. Vou sobreviver.
Seus vídeos são únicos um domínio digno do seu tempo é experiência parabéns.
Sebastião de Goiânia Goiás 🎉
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";
})
}
}
Nossa, funcionou muito bem pro projeto que eu estava desenvolvendo!! muito obrigado!
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!!!
Me ajudou muito. Fiquei feliz de conseguir aplicar ao meu código. Obrigado Mayk. Excelente conteúdo.
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
Acabei de aplicar no projeto aqui da empresa. Excelente explicação.
Consegui fazer só com as orientações, o código não ficou tão profissional quanto o do mayk, mas funcionou kkkkk
O link não tá funcionando, leva para arquivos em branco ;-;
Essa aula do Maykão ficou simplesmente sensacional. 👏
Parece q leu minha mente. Era exatamente isso oq precisava no momento. Obrigada! ❤️
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.
Projetinho top demais
Muito bom! Além de ajudar a melhorar a lógica, é algo que pode ser utilizado no dia a dia! Valeu Maykão!
para fazer um loop qual seria a melhor opção? forEach? for of? tem diferença?
Salve
Mano, top demais. Vou fazer. Obrigado demais aí.
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?
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
Mayk é brabo demais!
Cadê o link do projeto?
Coloquei na descrição agora 😍
grande Mayk valeu
Maneiro demais!!!
Maykão god dms
show
Muito bom!!
Lá ele
kd o código inicial kkk
Kkkk faltou eu enviar. Coloquei agora na descrição
@@maykbrito muito obrigado! to aprendendo bastante no canal!
tava assistindo a copa e parei kakaka
Prioridades rsrs