1
resposta

Não esta adicionando

Quando carrego a Aluraplay aparecem vários erros repetidos e não consigo adicionar vídeos, segue o código e os erros:

mostrarVideos.js

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

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

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="YouTube video player" 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
}

async function listaVideos() {
    const listaApi = await conectaAPI.listaVideos()
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
}

listaVideos()

criaVideo.js

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

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

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

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

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

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

formulario.addEventListener("submit", evento => criaVideo(evento))

conectaAPI.js

async function listaVideos() {
    const conexao = await fetch("http://localhost:3000/videos")
    const conexaoConvertida = await conexao.json()

    return conexaoConvertida
}

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 vizualizações`,
            url : url,
            imagem : imagem
        })
    })
    const conexaoConvertida = await conexao.json()

    return conexaoConvertida
}

export const conectaAPI = {
    listaVideos,
    criaVideo
}

Erros:

1 resposta

Oi João, tudo bem?

Você está com a extensão do adblock ativada? Esse erro costuma acontecer porque no curso estamos usando o embed do youtube junto com o adblock ativo.

Fazendo um teste aqui, ao desativar a extensão o erro some. Não sendo erro no código e sim somente um conflito da extensão com o youtube.

Um abraço e bons estudos.