Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Minha solução

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'
    })
}
1 resposta
solução!

Oi, tudo bem?

Parabéns pelo resultado na resolução do desafio, ficou ótimo!

Também agradeço por compartilhar seu código com os demais estudantes, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum.

Abraços e bons estudos!