diff --git a/assets/css/details.css b/assets/css/details.css new file mode 100644 index 000000000..7e87bd434 --- /dev/null +++ b/assets/css/details.css @@ -0,0 +1,52 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f8f9fa; + color: #333; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + } +.pokemon-details { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + text-align: center; + background-color: #f6f8fc; + border-radius: 1rem; +} + +.pokemon-details img { + max-width: 200px; + margin-bottom: 1rem; +} + +.pokemon-details h1 { + text-transform: capitalize; + font-size: 2rem; + color: #333; +} + +.pokemon-details p { + font-size: 1rem; + color: #666; +} + +.back-button { + display: inline-block; + margin-bottom: 1rem; + padding: 0.5rem 1rem; + font-size: 1rem; + color: #fff; + background-color: #6c79db; + text-decoration: none; + border-radius: 0.5rem; +} + +.back-button:hover { + background-color: #5a68c1; +} diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..f994f640a 100644 --- a/assets/css/pokedex.css +++ b/assets/css/pokedex.css @@ -6,6 +6,74 @@ list-style: none; } +.pokemon { + display: flex; + flex-direction: column; + margin: .5rem; + padding: 1rem; + border-radius: 1rem; +} + +.pokemon .number { + color: #000; + opacity: .3; + text-align: right; + font-size: .625rem; +} + +.pokemon .name { + text-transform: capitalize; + color: #fff; + margin-bottom: .25rem; +} + +.pokemon .detail { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.pokemon .detail .types { + padding: 0; + margin: 0; + list-style: none; +} + +.pokemon .detail .types .type { + color: #fff; + padding: .25rem .5rem; + margin: .25rem 0; + font-size: .625rem; + border-radius: 1rem; + filter: brightness(1.1); + text-align: center; +} + +.pokemon .detail img { + max-width: 100%; + height: 70px; +} + +.pagination { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + padding: 1rem; +} + +.pagination button { + padding: .25rem .5rem; + margin: .25rem 0; + font-size: .625rem; + color: #fff; + background-color: #6c79db; + border: none; + border-radius: 1rem; +} + .normal { background-color: #a6a877; } @@ -78,74 +146,6 @@ background-color: #f9aec7; } -.pokemon { - display: flex; - flex-direction: column; - margin: .5rem; - padding: 1rem; - border-radius: 1rem; -} - -.pokemon .number { - color: #000; - opacity: .3; - text-align: right; - font-size: .625rem; -} - -.pokemon .name { - text-transform: capitalize; - color: #fff; - margin-bottom: .25rem; -} - -.pokemon .detail { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.pokemon .detail .types { - padding: 0; - margin: 0; - list-style: none; -} - -.pokemon .detail .types .type { - color: #fff; - padding: .25rem .5rem; - margin: .25rem 0; - font-size: .625rem; - border-radius: 1rem; - filter: brightness(1.1); - text-align: center; -} - -.pokemon .detail img { - max-width: 100%; - height: 70px; -} - -.pagination { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - width: 100%; - padding: 1rem; -} - -.pagination button { - padding: .25rem .5rem; - margin: .25rem 0; - font-size: .625rem; - color: #fff; - background-color: #6c79db; - border: none; - border-radius: 1rem; -} - @media screen and (min-width: 380px) { .pokemons { grid-template-columns: 1fr 1fr; diff --git a/assets/js/details.js b/assets/js/details.js new file mode 100644 index 000000000..c4f0056f0 --- /dev/null +++ b/assets/js/details.js @@ -0,0 +1,27 @@ +const params = new URLSearchParams(window.location.search); +const pokemonId = params.get("id"); +const pokemonDetails = document.getElementById("pokemonDetails"); + +async function fetchPokemonDetails(id) { + try { + const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); + const data = await response.json(); + + // Preencher os detalhes do Pokémon + pokemonDetails.innerHTML = ` + ${data.name} +

${data.name.charAt(0).toUpperCase() + data.name.slice(1)}

+
+

Type(s): ${data.types.map(type => type.type.name).join(", ")}

+

Height: ${(data.height / 10).toFixed(1)} m

+

Weight: ${(data.weight / 10).toFixed(1)} kg

+
+ `; + } catch (error) { + console.error("Erro ao buscar os detalhes do Pokémon:", error); + pokemonDetails.innerHTML = "

Erro ao carregar os detalhes do Pokémon.

"; + } +} + +// Buscar os detalhes do Pokémon ao carregar a página +fetchPokemonDetails(pokemonId); diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..ed09181c7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -7,7 +7,7 @@ let offset = 0; function convertPokemonToLi(pokemon) { return ` -
  • +
  • #${pokemon.number} ${pokemon.name} @@ -23,10 +23,21 @@ function convertPokemonToLi(pokemon) { ` } +function setupPokemonClickEvents() { + const pokemonElements = document.querySelectorAll('.pokemon'); + pokemonElements.forEach((element) => { + element.addEventListener('click', () => { + const pokemonId = element.getAttribute('data-id'); + window.location.href = `pokemon-details.html?id=${pokemonId}`; + }); + }); +} + function loadPokemonItens(offset, limit) { pokeApi.getPokemons(offset, limit).then((pokemons = []) => { const newHtml = pokemons.map(convertPokemonToLi).join('') pokemonList.innerHTML += newHtml + setupPokemonClickEvents() }) } diff --git a/index.html b/index.html index 1a017821d..70b11bd98 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@ - - + + @@ -38,9 +38,9 @@

    Pokedex

    - - - + + + \ No newline at end of file diff --git a/pokemon-details.html b/pokemon-details.html new file mode 100644 index 000000000..8d7994123 --- /dev/null +++ b/pokemon-details.html @@ -0,0 +1,23 @@ + + + + + + + Pokémon Details + + + + + +
    + Back to Pokedex +
    + +
    +
    + + + + + \ No newline at end of file