O meu vidFlow não faz a filtragem dos vídeos pelo nome, além de aparecer inúmeras vezes o erro 401 na ferramenta do desenvolvedor. Alguém poderia me ajudar com isso?? Este é o código que fiz durante a aula
const containerVideos = document.querySelector('.videos__container')
async function buscarVideos() {
try {
const busca = await fetch('http://localhost:3000/videos')
const videos = await busca.json()
videos.forEach((element) => {
if (element.categoria == '') {
throw new Error('Vídeo sem categoria!')
}
containerVideos.innerHTML += `
<li class="videos__item">
<iframe src="${element.url}" title="${element.titulo}" frameborder="0" allowfullscreen></iframe>
<div class="descricao-video">
<img class="img-canal" src="${element.imagem}" alt="Logo do Canal">
<h3 class="titulo-video">${element.titulo}</h3>
<p class="titulo-canal">${element.descricao}</p>
</div>
</li>
`
})
} catch (error) {
containerVideos.innerHTML = `<p>Ocorreu um erro ao carregar os vídeos: ${error}</p>`
}
}
buscarVideos()
const barraDePesquisa = document.querySelector('.pesquisar__input')
barraDePesquisa.oninput = filtrarPesquisa()
function filtrarPesquisa() {
const videos = document.querySelectorAll('.videos__item')
const textoPesquisa = barraDePesquisa.value.toLocaleLowerCase()
videos.forEach((video) => {
let titulo = video
.querySelector('.titulo-video')
.textContent.toLocaleLowerCase()
video.style.display = textoPesquisa
? titulo.includes(textoPesquisa)
? 'block'
: 'none'
: 'block'
})
}