let videos = [];
const endereco = "http://localhost:3000/videos";
const areaDeVideos = document.querySelector('.videos__container');
const formulario = document.querySelector("[data-formulario]");
const botaoPesquisa = document.querySelector(".pesquisar__botao");
//função async/awit para captar os dados
async function pegaDados(){
const resposta = await fetch(endereco);
videos = await resposta.json();
mostraVideos(videos);
}
pegaDados()
async function buscaDados(evento){
const conexao = await fetch(`http://localhost:3000/videos?q=${evento}`)
const conexaoConvertida = await conexao.json()
return conexaoConvertida
}
async function buscaVideo(evento){
evento.preventDefault()
const botaoPesquisa = document.getElementById("pesquisar").value;
const busca = await buscaDados(botaoPesquisa)
console.log(busca)
}
botaoPesquisa.addEventListener('click', evento => buscaVideo(evento))
//função para adicionar os videos na tela
function mostraVideos(listaDeVideos){
listaDeVideos.forEach(video => {
areaDeVideos.innerHTML +=
`<li class="videos__item">
<iframe width="100%" height="72%" src="${video.url}"
title="${video.titulo}" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="descricao-video">
<img src="${video.imagem}" alt="logo canal alura">
<h3>${video.titulo}</h3>
<p>${video.descricao}</p>
</div>
</li>`
});
}
formulario.addEventListener('submit', adicionaVideo)
async function adicionaVideo(evento){
evento.preventDefault();
const url = document.getElementById('url').value;
const titulo = document.getElementById('titulo').value;
const imagem = document.getElementById('imagem').value;
const novoVideo = {
url: url,
titulo: titulo,
imagem: imagem,
}
try {
const res = await fetch(endereco, {
method: "POST",
headers:{
"Content-type": "application/json"
},
body: JSON.stringify(novoVideo)
})
if (res.ok) {
window.location.href = './envio-concluido.html';
} else {
console.error("Não foi possivel enviar o vídeo");
}
} catch (error) {
console.error("Não foi possivel enviar o vídeo", error);
}
}
link repositório: https://github.com/LeonardoSardagna/aluraPlay/blob/master/js/conectaAPIS.js