Consegui fazer o cadastro de novo pet e listar, também dei uma estilizada no layout!
Fiz como consegui quebrando cabeça mas consegui:
api.js
const API_URL = "http://localhost:3080/pets"
const api = {
async buscarDados() {
const response = await fetch(API_URL);
const dados = await response.json();
console.log(dados);
return dados;
},
async cadastrarNovoPet(pet) {
try {
const response = await fetch("http://localhost:3080/pets", {
method: "POST",
headers: {
"Content-Type": "aplication/json"
},
body: JSON.stringify(pet)
});
} catch (error) {
alert("Erro ao cadastrar Pet");
throw error;
}
}
}
export default api;
ui.js:
import api from "./api.js"
const ui = {
async renderizarPets() {
const container = document.getElementById("container-pets");
// const pets = await api.buscarDados();
//console.table(pets);
try {
const pets = await api.buscarDados();
pets.forEach(ui.adicionaPetNaLista);
} catch (error) {
alert('Erro ao renderizar Pet.')
}
},
adicionaPetNaLista(pet) {
const containerPets = document.getElementById("container-pets");
const article = document.createElement("article");
article.classList.add("pet-card");
const h3 = document.createElement("h3");
h3.classList.add("pet-nome");
h3.textContent = pet.nome;
//----- Especie ------
const pEspecie = document.createElement("p");
pEspecie.classList.add("pet-especie");
const spanEspecie = document.createElement("span");
spanEspecie.classList.add("label");
spanEspecie.textContent = "Espécie: ";
pEspecie.appendChild(spanEspecie);
pEspecie.append(pet.especie);
//----- Raça ------
const pRaca = document.createElement("p");
pRaca.classList.add("pet-raca");
const spanRaca = document.createElement("span");
spanRaca.classList.add("label");
spanRaca.textContent = "Raça: ";
const button = document.createElement("button");
button.classList.add("btn-adotar");
button.textContent = "Adotar";
pRaca.appendChild(spanRaca);
pRaca.append(pet.raca);
containerPets.appendChild(article);
article.append(h3, pEspecie, pRaca, button);
}
}
export default ui;
e no main.js:
import api from "./api.js";
import ui from "./ui.js";
document.addEventListener("DOMContentLoaded", () =>{
ui.renderizarPets();
const formCadastroPet = document.getElementById("form-cadastrar-pet");
formCadastroPet.addEventListener("submit", submeterFormulario);
});
async function submeterFormulario(event) {
event.preventDefault();
const nome = document.getElementById("nome").value;
const especie = document.getElementById("especie").value;
const raca = document.getElementById("raca").value;
try {
await api.cadastrarNovoPet({nome, especie, raca});
event.target.reset();
await ui.renderizarPets();
} catch (error) {
alert("Erro ao Salvar Pet");
throw error;
}
}
