Create of Pokedex

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;
+}

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;

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 = `
+            <img src="${data.sprites.other["official-artwork"].front_default}" alt="${data.name}">
+            <h1>${data.name.charAt(0).toUpperCase() + data.name.slice(1)}</h1>
+            <div class="about">
+                <p><strong>Type(s):</strong> ${data.types.map(type => type.type.name).join(", ")}</p>
+                <p><strong>Height:</strong> ${(data.height / 10).toFixed(1)} m</p>
+                <p><strong>Weight:</strong> ${(data.weight / 10).toFixed(1)} kg</p>
+            </div>
+        `;
+    } catch (error) {
+        console.error("Erro ao buscar os detalhes do Pokémon:", error);
+        pokemonDetails.innerHTML = "<p>Erro ao carregar os detalhes do Pokémon.</p>";
+    }
+}
+
+// Buscar os detalhes do Pokémon ao carregar a página
+fetchPokemonDetails(pokemonId);

assets/js/main.js

@@ -7,7 +7,7 @@ let offset = 0;
 
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
+        <li class="pokemon ${pokemon.type}" data-id="${pokemon.number}">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
 
@@ -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()
     })
 }
 

index.html

@@ -18,8 +18,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap" rel="stylesheet">
 
     <!-- Nosso CSS -->
-    <link rel="stylesheet" href="/assets/css/global.css">
-    <link rel="stylesheet" href="/assets/css/pokedex.css">
+    <link rel="stylesheet" href="./assets/css/global.css">
+    <link rel="stylesheet" href="./assets/css/pokedex.css">
 </head>
 
 <body>
@@ -38,9 +38,9 @@ <h1>Pokedex</h1>
     </section>
 
     <!-- Nosso JS -->
-    <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/pokemon-model.js"></script>
+    <script src="./assets/js/poke-api.js"></script>
+    <script src="./assets/js/main.js"></script>
 </body>
 
 </html>

pokemon-details.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokémon Details</title>
+    <link rel="stylesheet" href="./assets/css/global.css">
+    <link rel="stylesheet" href="./assets/css/details.css">
+</head>
+
+<body>
+    <div class="content">
+        <a href="index.html" class="back-button">Back to Pokedex</a>
+        <div id="pokemonDetails" class="pokemon-details">
+            <!-- Os detalhes serão preenchidos dinamicamente -->
+        </div>
+    </div>
+    <script src="./assets/js/poke-api.js"></script>
+    <script src="./assets/js/details.js"></script>
+</body>
+
+</html>