Essa foi a minha solução:
const barraPesquisa = document.querySelector('.pesquisar__input')
barraPesquisa.addEventListener('input', filtrarPesquisa)
function filtrarPesquisa() {
const videos = document.querySelectorAll('.videos__item')
const filtro = barraPesquisa.value.toLowerCase()
if (barraPesquisa.value != '') {
videos.forEach(video => {
const nomeVideo = video.querySelector('.titulo-video').textContent.toLowerCase()
video.style.display = nomeVideo.includes(filtro) ? 'block' : 'none'
})
}
}
Percebi que não é necessário validar se o input está vazio ou não, porque se você pegar qualquer string e fizer string.includes('')
o resultado será true
. Mas um problema em relação à lógica original da professora permanece: como o Gabriel Simões apontou em outro tópico, se você apaga o texto no input de pesquisa, os vídeos não retornam todos.
Então resolvi fazer outra pequena refatoração: não usar a condicional if
para verificar se o input está vazio. Assim, a função será executada até quando ele estiver vazio e todos os vídeos irão retornar:
function filtrarPesquisa() {
const videos = document.querySelectorAll('.videos__item')
const filtro = barraPesquisa.value.toLowerCase()
videos.forEach(video => {
const nomeVideo = video.querySelector('.titulo-video').textContent.toLowerCase()
video.style.display = nomeVideo.includes(filtro) ? 'block' : 'none'
})
}