criaVideo.js
import { conectaApi } from "./conectaApi.js";/*Você está importando a função conectaApi do arquivo conectaApi.js.
Isso é fundamental para que você possa utilizar as funcionalidades que foram definidas nesse arquivo, como a função que envia os dados
para a API. */
const formulario = document.querySelector("[data-formulario]");
async function criarVideo(evento){/*não função recebe o evento ou seja o que acontece quando eu clico*/
evento.preventDefault();/*previne que a ação padrão do envio do formulário aconteça */
const imagem = document.querySelector("[data-imagem]").value;/*value pega o valor do campo que acabamos de selecionar */
const url = document.querySelector("[data-url]").value;
const titulo = document.querySelector("[data-titulo]").value;
const descricao = Math.floor(Math.random() * 10).toString(); /*Agora a questão da descrição, a descrição do nosso vídeo era o número
de visualizações. Eu até já trouxe a problemática de que isso não poderia ser do controle do usuário, e como não temos um contador
a gente precisava definir um número.
Para isso, vamos criar uma variável chamada descrição do tipo const const descricao = Math.floor(Math.random()*10).toString();.
O que eu botei tanta coisa com matemática? Não se assuste, usamos map Math.random e ele traz o número aleatório entre zero e um.
Para transformar em um número inteiro, fizemos vezes dez, e ele retornou um número inteiro. O Math.floor ele tenta pegar o menor
número entre os valores que estiverem dentro do parênteses dele. Nós tendo finalmente um número, transformamos em string para
conseguir depois passar para a nossa requisição, não podia ser um número aqui para transformar na frase, precisávamos de uma string.
*/
console.log(titulo, descricao, url, imagem);
await conectaApi.criaVideos(titulo, descricao, url, imagem);
/* É importante também avisar que a ordem do que eu coloquei dentro do criarVideo faz sentido, porque se formos no conectaApi é nessa
ordem que ele está esperando receber, é título, descrição, URL e imagem. Se eu colocasse em outra ordem eu poderia sem querer mandar a
imagem para o campo que ele está esperando uma URL, isso ia dar vários problemas. Então tem que prestar atenção quando estamos enviando
algo para uma função, que também está esperando receber algo. */
Window.location.href = "../pages/envio-concluido.html";
/*E para isso, vamos digitar aqui na linha 14, no lado inferior esquerdo da tela, mas dentro da criarVideo depois da await, é window.
location.href = "." e dentro das aspas duplas, vamos colocar o diretório do documento envio-concluido.html. Então para chegar lá vamos
dar window.location.href = "../pages/envio-concluido.html". Com isso, conseguimos dar um feedback, de tipo conseguiu fazer esse envio,
e aí ele vai ser enviado para página de envio concluído. */
}
formulario.addEventListener("submit", evento => criarVideo(evento));
/*O que eu fiz? Eu botei como diz a tradução do addEventListener, um ouvinte de ouvinte, é um fofoqueiro. Ele vê quando enviamos o
formulário, que é quando enviamos o submit daquele formulário e quando isso acontece ele conta a fofoca, ele manda ali o evento,
o que aconteceu para a função criarVideo. */
vou enviar os outros arquivos em seguida pois ultrapassa o limite devido aos comentários
