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

[Bug] Erro no console

Esse erro está aparecendo no meu console quando vou fazer a pesquisa dos vídeos.

erro no console

Procurei bastante de como resolver esse erro mas não consigo resolver.

Esse é o código da busca de videos.

import { conectaApi } from './conectaApi';
import constroiCard from './mostrarVideos';

async function buscarVideo(evento) {
  evento.preventDefault();

  const dadosDePesquisa = document.querySelector('[data-pesquisa]').value;
  const busca = await conectaApi.buscaVideo(dadosDePesquisa);

  const lista = document.querySelector('[data-lista]');

  busca.forEach((elemento) =>
    lista.appendChild(
      constroiCard(
        elemento.titulo,
        elemento.descricao,
        elemento.url,
        elemento.imagem
      )
    )
  );
}

const botaoDePesquisa = document.querySelector('[data-botao-pesquisa]');

botaoDePesquisa.addEventListener('click', (evento) => buscarVideo(evento));

*Essa é a função que reutilizei do arquivo mostrarVideos.js *

export default function constroiCard(titulo, descricao, url, imagem) {
  const video = document.createElement('li');
  video.className = 'videos__item';
  video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
    title="${titulo}" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
<div class="descricao-video">
    <img src="${imagem}" alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao}</p>
</div>`;

  return video;
}
1 resposta
solução!

Eu verifiquei que quando usei o autocomplete o import foi colocado de forma errada.

import { conectaApi } from './conectaApi.js';
import constroiCard from './mostrarVideos.js'; 

Ficou faltando o .js nos arquivos, ao colocar de forma correta o erro sumiu e o filtro funcionou.