Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Este erro esta acontecendo

Inserir o vídeo na API funciona perfeitamente, mas ao tentar ler a API pra mostrar o vídeo ele quebra Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

import { conectApi } from "./conectApi.js";

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

async function criaVideo(e) {
    e.preventDefault()

    const imagem = document.querySelector('[data-imagem]').value
    const url = document.querySelector('[data-url]').value
    const titulo = document.querySelector('[data-titulo]').value
    const descricao = Math.floor(Math.random() * 10).toString()

    await conectApi.criaVideo(titulo, descricao, url, imagem)

    window.location.href = "../pages/envio-concluido.html"
}

formulario.addEventListener('submit', e => {
    criaVideo(e)
})
async function videosList () {
    const conexao = await fetch('http://localhost:3000/videos')
    const conexaoConvert = await conexao.json()

    return conexaoConvert
}

async function criaVideo (titulo, descricao, url, imagem) {
    const conexao = await fetch('http://localhost:3000/videos', {
        method: "POST",
        headers: {
            "Content-type" : "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao: `${descricao} mil visualizações`,
            ulr: url,
            imagem: imagem
        })
    })

    const conexaoConvertida = await conexao.json()
    return conexaoConvertida
}

export const conectApi = {
    videosList,
    criaVideo
}
import { conectApi } from "./conectApi.js"

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

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

async function videoList () {
    const list = await conectApi.videosList()
    list.forEach(e => lista.appendChild(criaLi(e)))
}


videoList()
2 respostas
solução!

Eu escrevi "ulr" ao invés de url na função "criaVideo"

Oi Eduardo, tudo bem?

Que bom que conseguiu encontrar o erro. Irei finalizar o tópico por você.

Um abraço e bons estudos.