1
resposta

tela só pisca e nada acontece

Fiz todo código conforme orientado e nada acontece

import { conectaApi } from "./conectaApi.js";
import constroiCard from "./mostraVideos.js";

async function buscarVideo(evento) {/*coloquei o evento como parâmetro para executar */
    evento.preventDefault();
    /*quando clicamos no botão ali, às vezes ele redireciona a página, recarrega no caso. Eu não quero que aconteça nada, 
    então vou botar um evento.preventDefault(); dentro da função. */
     
    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);
    console.log("Dados da busca:", busca);
/* Com esse data-pesquisa, já conseguimos enviar lá para conectaApi.buscarVideo. Então nos parentes da linha cinco, no lado superior 
esquerdo da tela, vamos colocar o dado de pesquisa. O que eu fiz aqui? Eu botei um data attributes no input de pesquisa, aí eu 
selecionei ele, e depois eu enviei para o conectaApi.buscarVideo, para fazer aquela busca dinâmica, que ele vai enviar o valor e depois
vai substituir na URL para retornar só o item que a gente quer.
Só que falando em valor, eu esqueci de determinar que o dado de pesquisa eu quero somente o valor daquele elemento. Então, ao final do
querySelector, eu vou ter que botar um .value. */

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

    while (lista.firstChild) {
        lista.removeChild(lista.firstChild);
    }

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

         if(busca.length==0){
            lista.innerHTML ='<h2 class = "mensagem__ tituto"> Não existem vídeos com esse termo</h2>'
         }
}

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

botaoDePesquisa.addEventListener("click", evento => buscarVideo(evento))
/*O que eu fiz aqui? Eu selecionei o botão, aí no botão, eu botei aquela lá que eu falo que é o fofoqueiro, que é o ouvinte de eventos,
 que ele fica ali só cuidando para quando acontecer alguma coisa, fazer tal coisa. Aqui no caso, ele está esperando um clique no botão.
  Então eu defini qual que é o qual que é o evento que ele está esperando, que é o ckick, eu fiz uma arrow function, em que eu enviei 
  esse evento do click para a função buscarVideo. */
 

nem a mensagem de erro aparece na tela

1 resposta

Olá, Alexandre, como vai?

Seu código está bem estruturado, mas observei que o nome da importação para o arquivo mostraVideos.js pode estar causando o problema. Na sua chamada, você utilizou ./mostraVideos.js, mas o correto, de acordo com o projeto do instrutor, parece ser ./mostrarVideos.js. Sugiro conferir e ,se necessário, ajustar isso e testar novamente.

Caso o problema persista, confira o console do navegador para identificar mensagens de erro. O console pode apontar inconsistências, como caminhos de arquivos incorretos, erros de sintaxe ou outros detalhes importantes.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado