Adopet concluído | JavaScript: implementando CRUD com requisições HTTP

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/styles/estilo.css">
</head>
<body>
    <div class="container">
        <h1>ADOPET</h1>
        <ul id="lista-pets"></ul>
    </div>

    <script type="module" src="/js/api.js"></script>
    <script type="module" src="/js/ui.js"></script>
    <script type="module" src="/js/main.js"></script>
</body>
</html>

API

const api = {
    async buscarPets () {
        try {
            const resposta = await fetch ('http://localhost:4000/pets');
            return await resposta.json();
        } catch {
            alert('Erro ao buscar Pets!')
            throw error;
        }
        
    }
}

export default api;

import api from "./api.js";

const ui = {
    async renderizarPets() {
        
        const listaPets = document.getElementById('lista-pets');

        try {
            const pets = await api.buscarPets();

            pets.forEach(pet => {
                listaPets.innerHTML += `<li class="item-pets" data-id="${pet.id}">
                <p><span>Especie:</span> ${pet.especie}</p>
                <p><span>Nome:</span> ${pet.nome}</p>
                <p><span>Raça:</span> ${pet.raca}</p>
                </li>`
            });
        }
        catch {
            alert('error ao carregar pet');
        }
    }
}

export default ui;

MAIN

import ui from "./ui.js";

document.addEventListener('DOMContentLoaded', () => {
    ui.renderizarPets();
});

Resultado

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