4
respostas

nao sei o que fazer

nao sei o q fazer para tirar esse erro

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Olá, Gabriel!

Analisando esse curto trecho de código não estou conseguindo visualizar a origem do erro que é de sintaxe, se possível compartilhe o código completo com as outras linhas não visíveis na imagem, acredito que vai ajudar muito, mas caso tenha passado despercebido aos nossos olhos deixo o código da aula que está sem esse possível erro de sintaxe, sendo assim caso o erro persista peço que compartilhe o código completo, pois na programação é comum o console aponta um erro em determinada linha quando, na verdade, era em outra rsrs, segue o código da aula:

async function buscaVideos(termoDeBusca) {
    const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`);
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

export const conectaAPI = {
    listaVideos,
    criaVideos,
    buscaVideos
}

Tem algumas pequenas diferenças na declaração em relação ao seu código, mas altere caso necessário e como dito no caso de persistência de erro retorne com código do arquivo completo conectaAPI, agradeço desde já, abraços!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

o mesmo erro continua, aqui esta o resto do código

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Gabriel!

Você poderia compartilhar em formato de código, pois analisando o seu código, não consegui visualizar algum erro, deste modo não tem chance de criar um erro a partir da digitação, basta você copiar seu código e colocar dentro de crases, apertando o botão no cabeçalho do campo de digitação do tópico, o botão tem essa aparência </>, ou se possível fazer o upload do projeto por completo seja ele via github ou drive.

Fico no aguardo e a disposição!

conectaAPI.js

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

async function criaVideos(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çoes`,
            url: url,
            imagem: imagem
        })
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

async function buscaVideos(termoDeBusca) {
    const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`);
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

export const conectaAPI = {
    listaVideos,
    criaVideos,
    buscaVideos
}

buscarVideo.js

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

async function buscarVideo(evento) {
    evento.preventDefault();
    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaAPI.buscaVideos(dadosDePesquisa);

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

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

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

botaoDePesquisa.addEventListener("click", evento => buscarVideo(evento))

mostrarVideo.js

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

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

export default 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="${titulo}" 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();

criarVideo.js

import { conectaAPI } from "./conectaAPI.js";
const formulario = document.querySelector("[data-formulario]");

async function criarVideo(evento) {
    evento.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 conectaAPI.criaVideos(titulo, descricao, url, imagem);

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

formulario.addEventListener("submit", evento => criarVideo(evento));