From 9c13138ea444209a1b6bd380aa3edad81b67dcb2 Mon Sep 17 00:00:00 2001 From: allyson-silva Date: Sat, 27 Jan 2024 16:15:27 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Adicionada=20exibi=C3=A7=C3=A3o=20de=20?= =?UTF-8?q?Detalhes=20do=20pokemon=20(fiz=20com=20modal)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/pokedex.css | 66 +++++++++++++++++++++ assets/js/main.js | 62 +++++++++++++++++++- assets/js/pokemon-detail.js | 111 ++++++++++++++++++++++++++++++++++++ index.html | 40 +++++++++++++ 4 files changed, 277 insertions(+), 2 deletions(-) create mode 100644 assets/js/pokemon-detail.js diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..698eeb9fd 100644 --- 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 index bcaa24508..18b508cd5 100644 --- 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 ` -
  • +
  • #${pokemon.number} ${pokemon.name} @@ -44,4 +46,60 @@ loadMoreButton.addEventListener('click', () => { } else { loadPokemonItens(offset, limit) } -}) \ No newline at end of file +}) + +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'; + } + } + \ No newline at end of file diff --git a/assets/js/pokemon-detail.js b/assets/js/pokemon-detail.js new file mode 100644 index 000000000..b82a8f6b0 --- /dev/null +++ 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) => ` +
    + #${pokemon.id} + ${pokemon.name} +
    +
      + ${pokemon.types.map((typeSlot) => `
    1. ${typeSlot.type.name}
      2. `).join('')} +
    + ${pokemon.name} +
    +
    + +
    + +
    +
    Sobre
    +
    Base Status
    +
    + + +
    +
    +
    +
    Especie
    +
    ${pokemon.species.name}
    +
    +
    +
    Altura
    +
    ${pokemon.height}
    +
    +
    +
    Peso
    +
    ${pokemon.weight}
    +
    +
    +
    Habilidades
    +
    ${pokemon.abilities.map((abilityObject) => abilityObject.ability.name).join(',')}
    +
    +
    +
    + +
    +
    +
    + ${pokemon.stats.map((stat) => ` +
    +
    ${stat.stat.name}
    +
    +
    +
    + ${stat.base_stat} +
    +
    +
    +
    + `).join('')} +
    +
    +
    +
    + `).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 index 1a017821d..f81ba1b02 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,10 @@ + + + + @@ -35,12 +39,48 @@

    Pokedex

    Load More + + + + + + + + + \ No newline at end of file