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: