finalizando projeto

README.md

@@ -1 +1,27 @@
-# Trilha JS Developer - Pokedex
+Projeto: Pokedex em JavaScript desenvolvida para o desafio da DIO - Bootcamp Fullstack Java + Angular.
+
+Funcionalidades:
+
+Integração com a PokeAPI: Consome dados da API pública PokeAPI para obter detalhes, tipos, imagens e outras informações sobre os Pokémons.
+Listagem e Paginação: A lista de Pokémons é carregada em lotes e pode ser paginada para mostrar mais Pokémons.
+Detalhes e Modal: Ao clicar em um Pokémon, uma janela modal é exibida com detalhes específicos do Pokémon sem a necessidade de navegar para outra página.
+Estilização com CSS: Apresenta um estilo visual agradável com CSS cuidadosamente projetado para melhorar a apresentação dos Pokémons, tipos e detalhes.
+JavaScript para Interação: O JavaScript é usado para lidar com eventos de clique nos botões de detalhes e no botão "Load More", demonstrando a interação dinâmica com a página.
+Responsividade: O layout é responsivo e se adapta a diferentes tamanhos de tela, funcionando bem em dispositivos móveis e desktops.
+Organização do Código: O código JavaScript está dividido em módulos separados, tornando o projeto mais organizado, legível e fácil de manter.
+Tratamento de Erros: Inclui tratamento de erros ao buscar detalhes de Pokémons, exibindo mensagens adequadas no console em caso de falha.
+Boas Práticas de Desenvolvimento: Usa funções assíncronas, promessas, eventos e classes.
+Destaques:
+
+Integração com a API PokeAPI.
+Listagem e Paginação de Pokémons.
+Detalhes e Modal.
+Estilização com CSS.
+JavaScript para Interação.
+Responsividade.
+Organização do Código.
+Tratamento de Erros.
+Boas Práticas de Desenvolvimento.
+Conclusão:
+
+Este projeto demonstra um Pokedex funcional e bem estruturado, utilizando diversas técnicas e boas práticas de desenvolvimento web. A integração com a PokeAPI, a organização do código e a responsividade são alguns dos pontos fortes do projeto.

assets/css/global.css

@@ -11,7 +11,16 @@ body {
     width: 100vw;
     height: 100vh;
     padding: 1rem;
-    background-color: #fff;
+    background-color: transparent;
+
+}
+#h1 {
+    text-align: center;
+    margin-bottom: .25rem;
+    font-weight: bolder;
+    text-shadow: 2px 2px 0px white;
+    font-size: 2.15em;
+    letter-spacing: 0.5px;
 }
 
 @media screen and (min-width: 992px) {

assets/css/pokedex.css

@@ -4,6 +4,7 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    background-color: transparent;
 }
 
 .normal {
@@ -81,14 +82,18 @@
 .pokemon {
     display: flex;
     flex-direction: column;
-    margin: .5rem;
+    margin: 0.5rem;
     padding: 1rem;
     border-radius: 1rem;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #000;
+
 }
 
 .pokemon .number {
     color: #000;
-    opacity: .3;
+    opacity: .7;
     text-align: right;
     font-size: .625rem;
 }
@@ -97,6 +102,10 @@
     text-transform: capitalize;
     color: #fff;
     margin-bottom: .25rem;
+    font-weight: bolder;
+    text-shadow: 1px 1px 0px #111;
+    font-size: 1.15em;
+    letter-spacing: 0.5px;
 }
 
 .pokemon .detail {
@@ -116,17 +125,51 @@
     color: #fff;
     padding: .25rem .5rem;
     margin: .25rem 0;
-    font-size: .625rem;
+    font-size: .825rem;
     border-radius: 1rem;
     filter: brightness(1.1);
     text-align: center;
+    border: 1px solid black; 
+    filter: brightness(1.2);
+    text-align: center;
+    font-weight: bolder;
+    text-shadow: 1px 1px 0px #000;
+    letter-spacing: 0.5px;
 }
 
 .pokemon .detail img {
     max-width: 100%;
     height: 70px;
 }
 
+.details-button-container {
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: center; 
+    width: 100%; 
+}
+
+.details-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+}
+
+.details-content {
+    background-color: #fff;
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+
 .pagination {
     display: flex;
     flex-direction: row;
@@ -136,14 +179,37 @@
     padding: 1rem;
 }
 
+.close-details-button {
+    position: absolute;
+    bottom: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 30px;
+    height: 25px;
+    background-color: red;
+    color: white;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.3rem;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
 .pagination button {
     padding: .25rem .5rem;
     margin: .25rem 0;
     font-size: .625rem;
     color: #fff;
-    background-color: #6c79db;
+    background-color: #d76cdb;
     border: none;
     border-radius: 1rem;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #000;
+    text-shadow: 1px 1px 0px black;
+    font-size: 1.15em;
+    letter-spacing: 0.5px;
 }
 
 @media screen and (min-width: 380px) {

assets/js/details.js

@@ -0,0 +1,39 @@
+const detailsOverlay = document.getElementById('detailsOverlay');
+const closeDetailsButton = document.getElementById('closeDetailsButton');
+const detailsContent = document.querySelector('.details-content');
+
+function showPokemonDetails(pokemon) {
+    detailsContent.innerHTML = `
+        <h1>Detalhes do Pokémon</h1>
+        <p><strong>Espécie:</strong> ${pokemon.species}</p>
+        <p><strong>Altura:</strong> ${pokemon.height}</p>
+        <p><strong>Peso:</strong> ${pokemon.weight}</p>
+        <p><strong>Habilidades:</strong> ${pokemon.abilities.join(', ')}</p>
+        <p><strong>HP:</strong> ${pokemon.hp}</p>
+        <p><strong>Ataque:</strong> ${pokemon.attack}</p>
+        <p><strong>Defesa:</strong> ${pokemon.defense}</p>
+        <p><strong>Velocidade:</strong> ${pokemon.speed}</p>
+        <p><strong>Total:</strong> ${pokemon.total}</p>
+    `;
+    detailsOverlay.style.display = 'flex';
+}
+
+detailsOverlay.addEventListener('click', (event) => {
+    if (event.target === detailsOverlay) {
+        detailsOverlay.style.display = 'none';
+    }
+});
+
+pokemonList.addEventListener('click', async (event) => {
+    const detailsButton = event.target.closest('.details-button');
+    if (detailsButton) {
+        const pokemonId = parseInt(detailsButton.getAttribute('data-pokemon-id'));
+
+        try {
+            const pokemonDetails = await pokeApi.getPokemonDetailById(pokemonId); 
+            showPokemonDetails(pokemonDetails);
+        } catch (error) {
+            console.error("Erro ao obter detalhes do Pokémon:", error);
+        }
+    }
+});

assets/js/main.js

@@ -19,6 +19,9 @@ function convertPokemonToLi(pokemon) {
                 <img src="${pokemon.photo}"
                      alt="${pokemon.name}">
             </div>
+            <div class="details-button-container">
+                <button class="details-button" data-pokemon-id="${pokemon.number}">Detalhes</button>
+            </div>
         </li>
     `
 }
@@ -44,4 +47,5 @@ loadMoreButton.addEventListener('click', () => {
     } else {
         loadPokemonItens(offset, limit)
     }
+    detailsContainer.style.display = 'none';
 })

assets/js/poke-api.js

@@ -2,9 +2,20 @@
 const pokeApi = {}
 
 function convertPokeApiDetailToPokemon(pokeDetail) {
-    const pokemon = new Pokemon()
-    pokemon.number = pokeDetail.id
-    pokemon.name = pokeDetail.name
+    const pokemon = new Pokemon();
+    pokemon.number = pokeDetail.id;
+    pokemon.name = pokeDetail.name;
+    pokemon.species = pokeDetail.species.name;
+    pokemon.height = pokeDetail.height;
+    pokemon.weight = pokeDetail.weight;
+    pokemon.abilities = pokeDetail.abilities.map((abilitySlot) => abilitySlot.ability.name);
+    pokemon.hp = pokeDetail.stats.find((stat) => stat.stat.name === 'hp').base_stat;
+    pokemon.attack = pokeDetail.stats.find((stat) => stat.stat.name === 'attack').base_stat;
+    pokemon.defense = pokeDetail.stats.find((stat) => stat.stat.name === 'defense').base_stat;
+    pokemon.speed = pokeDetail.stats.find((stat) => stat.stat.name === 'speed').base_stat;
+    pokemon.total = pokeDetail.stats.reduce((total, stat) => total + stat.base_stat, 0);
+    pokemon.types = pokeDetail.types.map((typeSlot) => typeSlot.type.name);
+    pokemon.photo = pokeDetail.sprites.other.dream_world.front_default;
 
     const types = pokeDetail.types.map((typeSlot) => typeSlot.type.name)
     const [type] = types
@@ -33,3 +44,11 @@ pokeApi.getPokemons = (offset = 0, limit = 5) => {
         .then((detailRequests) => Promise.all(detailRequests))
         .then((pokemonsDetails) => pokemonsDetails)
 }
+
+pokeApi.getPokemonDetailById = (pokemonId) => {
+    const url = `https://pokeapi.co/api/v2/pokemon/${pokemonId}/`;
+
+    return fetch(url)
+        .then((response) => response.json())
+        .then(convertPokeApiDetailToPokemon);
+};

assets/js/pokemon-model.js

@@ -5,4 +5,13 @@ class Pokemon {
     type;
     types = [];
     photo;
+    species;
+    height;
+    weight;
+    abilities = [];
+    hp;
+    attack;
+    defense;
+    speed;
+    total;
 }

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <title>Pokedex</title>
 
     <!-- Normalize CSS -->
@@ -23,13 +24,19 @@
 </head>
 
 <body>
-    <section class="content">
-        <h1>Pokedex</h1>
+    <section  class="content" >
+        <h1 id="h1">Pokedex</h1>
 
         <ol id="pokemonList" class="pokemons">
             <!-- ..... Pokemons here ..... -->
         </ol>
 
+        <div id="detailsOverlay" class="details-overlay">
+            <div class="details-content">
+                <!-- Conteúdo dos detalhes do Pokémon aqui -->
+            </div>
+        </div>
+
         <div class="pagination">
             <button id="loadMoreButton" type="button">
                 Load More
@@ -41,6 +48,7 @@ <h1>Pokedex</h1>
     <script src="/assets/js/pokemon-model.js"></script>
     <script src="/assets/js/poke-api.js"></script>
     <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/details.js"></script>
 </body>
 
 </html>