Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Apensamento não funciona

Referente ao curso JavaScript: criando requisições, no capítulo Buscando elementos e atividade Reutilizar funções

por Estudante
| 105.6k xp | 121 posts

Já tentei várias coisas e enchi o código de console.log() até descobri onde estava problema, renomeei a constante 'lista', mas por algum motivo o appendChild() dentro de busca.forEach não está funcionando.

buscarVideo.js

import { conectaAPI } from "./conectaAPI.js"
import constroiCard from "./mostrarVideos.js"

const inputPesquisa = document.querySelector("#pesquisar")
const botaoPesquisa = document.querySelector("#pesquisar__botao")

async function buscarVideo(evt) {
    evt.preventDefault()
    const dadosPesquisa = inputPesquisa.value
    const busca = await conectaAPI.buscaVideo(dadosPesquisa)
    const listaDeVideos = document.querySelector("[data-lista]")
    busca.forEach(elemento => {
        const resultado = constroiCard(elemento)
        console.log(resultado)
        listaDeVideos.appendChild(resultado)
    })
}

botaoPesquisa.addEventListener('click', evento => buscarVideo(evento))

Alguém saberia me explicar o problema?

2 respostas
por Estudante
| 105.6k xp | 121 posts

mostrarVideo.js

import { conectaAPI } from "./conectaAPI.js"

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

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

    return video
}

async function listaVideos() {
    const listaAPI = await conectaAPI.listaVideos();
    listaAPI.forEach(elemento => lista.appendChild(constroiCard(elemento)))
}

listaVideos()
solução!
por Estudante
| 105.6k xp | 121 posts

Depois vi que estava acontecendo era o mesmo erro que a professora apontou no final da aula, mas no meu caso, como alterei o CSS o último vídeo estava aparecendo no começo da última linha e não no fim dela.

Ocorre que eu alterei o css da lista para flex-flow: row-reverse wrappara inverter a ordem dos itens, o que não aconteceu pois quando se usa row-reverse ou column-reverse junto com wrap, ao invés de ordem ser invertida, os elementos são jogados para o lado oposto.