digitalinnovationone · allyson-silva · Jan 27, 2024
diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css
@@ -146,6 +146,72 @@
     border-radius: 1rem;
 }
 
+.tab-row {
+    display: flex;
+    justify-content: space-around; /
+
+}
+
+
+.pokemon-details {
+    display: flex;
+    flex-wrap: wrap; 
+    border: 2px solid #ddd; 
+    border-radius: 10px; 
+    background-color: #fff; 
+    padding: 10px;
+    margin-top: 20px; 
+}
+.column {
+
+    position: relative; 
+}
+
+.tab {
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    position: relative; 
+    color: #007bff; /* Cor padrão do texto (azul piscina) */
+    transition: color 0.3s; /* Adicionada transição para suavizar a mudança de cor */
+}
+
+.tab.active {
+    color: #000; /* Mudança de cor para preto quando a aba está ativa */
+    border-bottom: 2px solid #800080; /* Cor roxa para indicar aba ativa */
+}
+
+.tab.active::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: #800080; /* Cor roxa para o traço */
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+
+
+.tab-content {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+
+.tab-content .content {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    display: none;
+}
+
+.tab-content[style*="block"] .content {
+    display: block;
+}
+
 @media screen and (min-width: 380px) {
     .pokemons {
         grid-template-columns: 1fr 1fr;

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,13 +1,15 @@
 const pokemonList = document.getElementById('pokemonList')
 const loadMoreButton = document.getElementById('loadMoreButton')
 
+var titleModal = document.getElementById('title-modal-pokemon-detail');
+
 const maxRecords = 151
 const limit = 10
 let offset = 0;
 
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
+        <li class="pokemon ${pokemon.type}" id="pokemon${pokemon.number}"  data-toggle="modal" data-target="#modalPokemonDetail">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
 
@@ -44,4 +46,60 @@ loadMoreButton.addEventListener('click', () => {
     } else {
         loadPokemonItens(offset, limit)
     }
-})
+})
+
+function mostrarConteudo(tabName) {
+    var tabs = document.getElementsByClassName("tab-content");
+    for (var i = 0; i < tabs.length; i++) {
+        tabs[i].style.display = "none";
+    }
+
+    var tabLinks = document.getElementsByClassName("tab");
+    for (var i = 0; i < tabLinks.length; i++) {
+        tabLinks[i].classList.remove("active");
+    }
+
+    document.getElementById(tabName).style.display = "block";
+    document.querySelector(`.tab[onclick="mostrarConteudo('${tabName}')"]`).classList.add("active");
+  }
+
+
+  document.getElementById('pokemonList').addEventListener('click', async function (event) {
+    const clickedPokemon = event.target.closest('[id^="pokemon"]');
+
+    if (clickedPokemon) {
+      const numeroPokemon = clickedPokemon.id.match(/\d+/);
+
+      if (numeroPokemon) {
+        titleModal.textContent = "Detalhes do Pokemon #" + numeroPokemon;
+
+        try {
+          const pokemonData = await obterDetalhesPokemon(numeroPokemon);
+          await loadPokemonModal(pokemonData);
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    }
+  });
+
+
+  function getColorForStat(statName) {
+    switch (statName) {
+      case 'hp':
+        return 'success'; // ou qualquer outra classe de cor do Bootstrap
+      case 'attack':
+        return 'danger';
+      case 'defense':
+        return 'info';
+      case 'special-attack':
+        return 'warning';
+      case 'special-defense':
+        return 'primary';
+      case 'speed':
+        return 'secondary';
+      default:
+        return 'dark';
+    }
+  }
+
diff --git a/assets/js/pokemon-detail.js b/assets/js/pokemon-detail.js
@@ -0,0 +1,111 @@
+const pokemonDetail = document.getElementById('pokemon-detail');
+
+async function obterDetalhesPokemon(numeroPokemon) {
+  const apiUrl = `https://pokeapi.co/api/v2/pokemon/${numeroPokemon}`;
+
+  try {
+    const response = await fetch(apiUrl);
+
+    if (!response.ok) {
+      throw new Error(`Erro ao obter detalhes do Pokémon: ${response.status}`);
+    }
+
+    const pokemonData = await response.json();
+    return [pokemonData];
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+async function loadPokemonModal(pokemonData) {
+  try {
+    const newHtml = pokemonData.map((pokemon) => `
+        <div class="pokemon ${pokemon.types[0].type.name}">
+          <span class="number">#${pokemon.id}</span>
+          <span class="name">${pokemon.name}</span>
+          <div class="detail">
+            <ol class="types">
+              ${pokemon.types.map((typeSlot) => `<li class="type ${typeSlot.type.name}">${typeSlot.type.name}</li>`).join('')}
+            </ol>
+            <img src="${pokemon.sprites.other.dream_world.front_default}" alt="${pokemon.name}">
+          </div>
+        </div>        
+
+        <div class="pokemon-details">
+          <!-- Títulos das abas em uma linha fixa -->
+          <div class="tab-row">
+            <div class="tab" onclick="mostrarConteudo('sobre')">Sobre</div>
+            <div class="tab" onclick="mostrarConteudo('base-status')">Base Status</div>
+          </div>
+
+          <!-- Conteúdo das abas em colunas abaixo dos títulos -->
+          <div id="sobre" class="tab-content">
+            <div class="content">
+              <div class="row">
+                <div class="col-3">Especie</div>
+                <div class="col-9">${pokemon.species.name}</div>
+              </div>
+              <div class="row">
+                <div class="col-3">Altura</div>
+                <div class="col-9">${pokemon.height}</div>
+              </div>
+              <div class="row">
+                <div class="col-3">Peso</div>
+                <div class="col-9">${pokemon.weight}</div>
+              </div>
+              <div class="row">
+                <div class="col-3">Habilidades</div>
+                <div class="col-9">${pokemon.abilities.map((abilityObject) => abilityObject.ability.name).join(',')}</div>
+              </div>
+            </div>
+          </div>
+
+          <div id="base-status" class="tab-content">
+            <div class="content">
+              <div class="pokemon-stats">
+                ${pokemon.stats.map((stat) => `
+                  <div class="row mb-2" key="${stat.stat.name}">
+                    <div class="col-4">${stat.stat.name}</div>
+                    <div class="col-8">
+                      <div class="progress">
+                        <div class="progress-bar bg-${getColorForStat(stat.stat.name)}" role="progressbar" style="width: ${stat.base_stat}%" aria-valuenow="${stat.base_stat}" aria-valuemin="0" aria-valuemax="100">
+                          ${stat.base_stat}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          </div>
+        </div>
+    `).join('');
+
+    pokemonDetail.innerHTML = newHtml;
+
+    // Retorna uma Promise resolvida
+    return Promise.resolve();
+  } catch (error) {
+    console.error(error);
+    // Retorna uma Promise rejeitada em caso de erro
+    return Promise.reject(error);
+  }
+}
+
+document.addEventListener('click', async function (event) {
+  if (event.target.matches('[id^="pokemon"]')) {
+    const numeroPokemon = event.target.id.match(/\d+/);
+
+    if (numeroPokemon) {
+      titleModal.textContent = "Detalhes do Pokemon #" + numeroPokemon;
+
+      try {
+        const pokemonData = await obterDetalhesPokemon(numeroPokemon);
+        await loadPokemonModal(pokemonData);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+});
diff --git a/index.html b/index.html
@@ -20,6 +20,10 @@
     <!-- Nosso CSS -->
     <link rel="stylesheet" href="/assets/css/global.css">
     <link rel="stylesheet" href="/assets/css/pokedex.css">
+
+     <!-- css do Boostrap 4 para o modal bonitinho-->
+     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+
 </head>
 
 <body>
@@ -35,12 +39,48 @@ <h1>Pokedex</h1>
                 Load More
             </button>
         </div>
+
+        <div class="modal fade" id="modalPokemonDetail" >
+            <div class="modal-dialog" >
+            <div class="modal-content" style="width: 500px">
+                <div class="modal-header">
+                <h4 class="modal-title" id="title-modal-pokemon-detail">Detalhes do Pokemon #</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                </div>
+                <div class="modal-body">
+                    <div id="pokemon-detail">
+
+
+
+                    </div>
+
+
+                </div>
+                <div class="modal-footer justify-content-between">              
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Fechar</button>
+                </div>
+
+
+            </div>
+            <!-- /.modal-content -->
+            </div>
+            <!-- /.modal-dialog -->
+        </div>
+        <!-- /.modal -->
+
+
     </section>
 
     <!-- Nosso JS -->
     <script src="/assets/js/pokemon-model.js"></script>
+    <script src="/assets/js/pokemon-detail.js"></script>   
     <script src="/assets/js/poke-api.js"></script>
     <script src="/assets/js/main.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </body>
 
 </html>