Filtrando elementos na DOM com JavaScript PURO!
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 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
![ทางเดินชีวิต - ธีเดช ทองอภิชาติ x อ.ไข่ มาลีฮวนน่า [Official MV]](http://i.ytimg.com/vi/1f3wcG16dd4/mqdefault.jpg)
Perfeito em didática, e muito bem planejado e explicado.
Parabéns!
Muito obrigado!
Me ajudou muito! Obrigadaaa! 😃😃😃😃
Em 20 minutos de aula me ajudou a concluir o que eu queria a mais de 2 dias tentando. Muito obrigado!
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.
Excelente conteúdo. E disso que precisamos, pequenos projetos. Obrigado. Um dia apareço por aí na Rocktseat para fazer um curso.
Em menos de 10 minutos, adiantou um curso de 2 semanas.
😍👏🏽
Essa aula do Maykão ficou simplesmente sensacional. 👏
esse cara é monstro !!
Seus vídeos são únicos um domínio digno do seu tempo é experiência parabéns.
Sebastião de Goiânia Goiás 🎉
Cara, muito bom este "has".
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!!
Acabei de aplicar no projeto aqui da empresa. Excelente explicação.
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 . . .
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!!!
mt interessante essa questão do font-size 62.5% pra facilitar trabalhar com rem!!
Nossa, funcionou muito bem pro projeto que eu estava desenvolvendo!! muito obrigado!
Olha o has de novo hahah
8:27 gostei disso, acabei de usar em um projeto meu :D
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.
Rapaz tava pensando hoje em fazer isso pra dar uma incrementada no projeto da copa e vcs postam isso kkkkk vlw
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 TH-cam 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.
Muito bom! Parabéns Rocketseat e Maicao .. fera demais
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Ótimo conteúdo, um pequeno componente que faz toda a diferença, adorei!
Mayk é brabo demais!
Muito bom! Além de ajudar a melhorar a lógica, é algo que pode ser utilizado no dia a dia! Valeu Maykão!
Me ajudou muito. Fiquei feliz de conseguir aplicar ao meu código. Obrigado Mayk. Excelente conteúdo.
S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Projetinho top demais
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
Muito Massa...
rocketset tem forma de pagamento mensal ?
Consegui fazer só com as orientações, o código não ficou tão profissional quanto o do mayk, mas funcionou kkkkk
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';
}
}
});
Esse Maykão eh tooop demais.
Esquece copa do mundo....kkk
Mano, top demais. Vou fazer. Obrigado demais aí.
grande Mayk valeu
Maneiro demais!!!
Maykão god dms
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.
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
Me amarro em ver esses minis projetos simples e úteis 🤓
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.
Muito bom!!
para fazer um loop qual seria a melhor opção? forEach? for of? tem diferença?
Salve
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
O link não tá funcionando, leva para arquivos em branco ;-;
Cadê o link do projeto?
Coloquei na descrição agora 😍
kd o código inicial kkk
Kkkk faltou eu enviar. Coloquei agora na descrição
@@maykbrito muito obrigado! to aprendendo bastante no canal!
show
Lá ele
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'
}
}
}
tava assistindo a copa e parei kakaka
Prioridades rsrs
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";
})
}
}
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)
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';
}
});
});