Hola buenas noches
He finalizado hasta la sección "Creando nuevos elementos" hasta aqui todo me funciona bien, inicie y complete la sección "buscando elementos", pero esta ultima no me funciona, no hay conexion al ejecutar los comandos, al hacer el conole.log no me muestra la promise en la que realiza la busqueda de una palabra, la revise varias veces pero esta igual a lo descrito por Jose Rivera, solicito ayuda para validar porque no corre esta sesion "busqueda" en el proyecto.
Codigo conexinAPI
const conexion = await fetch ("http://localhost:3001/videos");
const conexionConvertida = conexion.json();
// console.log(conexionConvertida)
return conexionConvertida
}
async function enviarVideo(titulo,descripcion,url,imagen){
const conexion = await fetch ("http://localhost:3001/videos",{
method:"POST",
headers:{
"Content-type":"application/json",
},
body:JSON.stringify({
titulo:titulo,
descripcion:`${descripcion} mil visualizaciones`,
url:url,
imagen:imagen
})
})
const conexionConvertida = conexion.json();
if(!conexion.ok){
throw new Error("Ha ocurrido un error al enviar el video");
}
return conexionConvertida;
}
async function buscarVideos(palabraClave){
const conexion = await fetch(`http://localhost:3001/videos?q=${palabraClave}`);
const conexionConvertida = conexion.json();
console.log(conexionConvertida)
return conexionConvertida
}
export const conexionAPI={
listarVideos,enviarVideo,buscarVideos
}
//listarVideos()
Codigo crearvideos
import { conexionAPI } from "./conexionAPI.js";
const formulario = document.querySelector("[data-formulario]");
async function crearVideo (evento){
evento.preventDefault();
const titulo = document.querySelector("[data-titulo]").value;
const url = document.querySelector("[data-url]").value;
const imagen = document.querySelector("[data-imagen]").value;
const descripcion = Math.floor(Math.random*10).toString();
try{
await conexionAPI.enviarVideo(titulo,descripcion,url,imagen);
window.location.href="../pages/envio-concluido.html";
}catch(e){
alert(e)
}
}
formulario.addEventListener("submit",evento=> crearVideo(evento));
Codigo flitraVideo
import {conexionAPI} from "./conexionAPI.js";
import crearCard from "./mostrarVideos.js";
async function filtrarVideo(evento){
evento.preventDefault();
const datosDeBusqueda = document.querySelector("[data-busqueda]").value;
const busqueda = await conexionAPI.buscarVideos(datosDeBusqueda);
const lista = document.querySelector("[data-lista]");
while(lista.firstChild){
lista.removeChild(lista.firstChild);
}
busqueda.forEach(video=>lista.appendChild(crearCard(video.titulo,video.descripcion,video.url,video.imagen)));
if(busqueda.length==0){
lista.innerHTML=`<h2 class="mensaje__titulo">No fueron encontrados elementos para ${datosDeBusqueda}</h2>`
}
//console.log(busqueda)
}
const boton = document.querySelector("[data-boton-busqueda]");
boton.addEventListener("clik",evento=>filtrarVideo(evento))
Codigo mostrarVideo
import { conexionAPI } from "./conexionAPI.js";
const lista = document.querySelector("[data-lista]")
export default function crearCard (titulo,descripcion,url,imagen){
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="descripcion-video">
<img src="${imagen}" alt="logo canal alura">
<h3>${titulo}</h3>
<p>${descripcion}</p>
</div>`;
return video;
}
async function listarVideos(){
try{
const listatAPI = await conexionAPI.listarVideos()
listatAPI.forEach(video =>lista.appendChild(crearCard(video.titulo,video.descripcion,video.url,video.imagen)))
}catch{
lista.innerHTML=`<h2 class="mensaje__titulo"> Ha ocurrido un problema con la conexion</h2>`;
}
}
listarVideos()