Criei a Página de detalhes e o botão voltar ao topo

assets/css/details.css

@@ -0,0 +1,87 @@
+body {
+    background-color: #f6f8fc;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+.pokemon-header{
+     max-width: 992px;
+    margin: 2rem auto;
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h1#pokemonName{
+    text-transform: capitalize;
+    margin-bottom: 1rem;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
+.pokemon-header img {
+    margin: 1rem 0;
+}
+
+.pokemon-header .pokemon-image img {
+    max-width: 200px;
+    height: auto;
+    border-radius: 1rem;
+}
+
+.pokemon-header div.pokemon-info {
+    text-align: left;
+    margin-top: 1rem;
+
+    margin-left: 20px;
+}
+
+.pokemon-header div.pokemon-info p {
+    margin: 20px;
+    font-size: 1rem;
+    color: #555;
+    margin: 1rem 0;
+}
+
+.pTypes {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: 1rem 0;
+}
+
+.pokemon-p.pDetails .type {
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    text-transform: capitalize;
+    margin: 1rem 0;
+}
+
+.back-button{
+
+    display: inline-block;
+    margin: 1rem 0;
+    padding: 0.5rem 1rem;
+    background-color: #007BFF;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+.back-button:hover {
+    background-color: #0056b3;
+    text-decoration: none;
+}
+div.pokemon-info{
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+}

assets/css/global.css

@@ -21,4 +21,4 @@ body {
         margin: 1rem auto;
         border-radius: 1rem;
     }
-}
+}

assets/css/pokedex.css

@@ -162,4 +162,33 @@
     .pokemons {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
-}
+}
+button#backToTop {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 15px;
+    background-color: #6c79db;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 16px;
+    display: none;
+    color:#fff;
+
+}
+.details-link {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 5px 10px;
+    background-color: #007BFF;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+.details-link:hover {
+    background-color: #28272b;
+};
+

assets/js/main.js

@@ -19,6 +19,7 @@ function convertPokemonToLi(pokemon) {
                 <img src="${pokemon.photo}"
                      alt="${pokemon.name}">
             </div>
+            <a href="details.html?number=${pokemon.number}" class="details-link">Ver detalhes</a>
         </li>
     `
 }
@@ -44,4 +45,30 @@ loadMoreButton.addEventListener('click', () => {
     } else {
         loadPokemonItens(offset, limit)
     }
-})
+})
+
+function renderPokemonDetails(pokemon) {
+    document.getElementById('pokemonName').textContent = `${pokemon.name} (#${pokemon.number})`;
+    document.getElementById('pokemonImage').src = pokemon.photo;
+    document.getElementById('pokemonNumber').textContent = `#${pokemon.number}`;
+    document.getElementById('pokemonNameInfo').textContent = pokemon.name;
+
+    const typesContainer = document.getElementById('pokemonTypes');
+    typesContainer.innerHTML = pokemon.types
+        .map((type) => `<span class="type ${type}">${type}</span>`)
+        .join('');
+}
+
+const backToTopButton = document.getElementById('backToTop');
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 300) {
+        backToTopButton.style.display = 'block';
+    } else {
+        backToTopButton.style.display = 'none';
+    }
+});
+
+backToTopButton.addEventListener('click', () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+});

assets/js/poke-api.js

@@ -33,3 +33,5 @@ pokeApi.getPokemons = (offset = 0, limit = 5) => {
         .then((detailRequests) => Promise.all(detailRequests))
         .then((pokemonsDetails) => pokemonsDetails)
 }
+
+

details.html

@@ -0,0 +1,69 @@
+<!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/details.css">
+    <link rel="stylesheet" href="./assets/css/global.css">
+</head>
+<body class="details">
+    <header>
+        <a href="index.html" class="back-button">⬅ Voltar</a>
+        <h1 id="pokemonName" style="margin: 20px;" >Detalhes do Pokémon</h1>
+    </header>
+    <main>
+        <section id="pokemonDetails" class="pokemon-details">
+            <p>Carregando...</p>
+        </section>
+    </main>
+    <script src="poke-api.js"></script>
+    <script>
+
+        const urlParams = new URLSearchParams(window.location.search);
+        const pokemonNumber = urlParams.get('number');
+
+
+        if (pokemonNumber) {
+
+            const apiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonNumber}`;
+            fetch(apiUrl)
+                .then((response) => {
+                    if (!response.ok) {
+                        throw new Error('Falha ao carregar os dados');
+                    }
+                    return response.json();
+                })
+                .then((pokemon) => {
+
+                    const detailsSection = document.getElementById('pokemonDetails');
+                    const pokemonName = document.getElementById('pokemonName');
+                    pokemonName.textContent = `${pokemon.name} (#${pokemon.id})`;
+
+                    detailsSection.innerHTML = `
+                        <div class="pokemon-header">
+                            <img src="${pokemon.sprites.other['official-artwork'].front_default}" alt="${pokemon.name}">
+                        </div>
+                        <div class="pokemon-info">
+                            <h2 class="infoDetails">Informações</h2>
+                            <p class="pDetails"><strong>Nome:</strong> ${pokemon.name}</p>
+                            <p class="pDetails"><strong>Número:</strong> #${pokemon.id}</p>
+                            <p class="pTypes"><strong>Tipo:</strong> ${pokemon.types.map((t) => t.type.name).join(', ')}</p>
+                        </div>
+                    `;
+                })
+                .catch((error) => {
+
+                    console.error(error);
+                    document.getElementById('pokemonDetails').innerHTML = `
+                        <p>Erro ao carregar os detalhes do Pokémon. Por favor, tente novamente.</p>
+                    `;
+                });
+        } else {
+            document.getElementById('pokemonDetails').innerHTML = `
+                <p>Nenhum Pokémon especificado. Volte para a página inicial.</p>
+            `;
+        }
+    </script>
+</body>
+</html>

index.html

@@ -35,7 +35,11 @@ <h1>Pokedex</h1>
                 Load More
             </button>
         </div>
+        <button id="backToTop" style="display: none;">
+            ⬆ Back to Top
+        </button>
     </section>
+
 
     <!-- Nosso JS -->
     <script src="/assets/js/pokemon-model.js"></script>