From 0123d0eead96ae2e74c1e617c3f1d04d15ba625c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Neto?= Date: Tue, 19 Nov 2024 15:01:30 -0300 Subject: [PATCH 1/5] correction of css and scripts links in index.html --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 From 20dd6911ee6bdd15061a4fb14c44bc6eecb7fb3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Neto?= Date: Tue, 19 Nov 2024 15:03:20 -0300 Subject: [PATCH 2/5] creating the pokemon-details.html file --- pokemon-details.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 pokemon-details.html 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 From fbf519f32ca1557c2b783cb64527bed5336bef00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Neto?= Date: Tue, 19 Nov 2024 15:04:41 -0300 Subject: [PATCH 3/5] updating pokedex.css --- assets/css/pokedex.css | 136 ++++++++++++++++++++--------------------- 1 file changed, 68 insertions(+), 68 deletions(-) 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; From 03011ebc8210a112a4815cbbe8f6787f275647b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Neto?= Date: Tue, 19 Nov 2024 15:09:19 -0300 Subject: [PATCH 4/5] creating the details.css file --- assets/css/details.css | 52 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 assets/css/details.css 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; +} From 3264e2f21ee3d5788e3413f5b0a2294f78a80f60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Neto?= Date: Tue, 19 Nov 2024 15:28:02 -0300 Subject: [PATCH 5/5] modified main.js and create details.js --- assets/js/details.js | 27 +++++++++++++++++++++++++++ assets/js/main.js | 13 ++++++++++++- 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 assets/js/details.js 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() }) }