Adicionando evento de spinner ao clicar no botao loadmore

README.md

@@ -1 +1,16 @@
 # Trilha JS Developer - Pokedex
+Explorando o mundo Pokémon através do consumo de uma API REST para a criação de uma Pokédex incrível! 
+Para isso, além do JavaScript, foram explorados todos os fundamentos de desenvolvimento Web.
+
+<tr>
+## Tecnologias utilizadas:
+<div style="display: inline_block"><br>
+  <img align="center" alt="JavaScript" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg">
+  <img align="center" alt="HTML5" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg">
+  <img align="center" alt="CSS3" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg">
+</div>
+<br>
+			<a>
+          <img  src="https://cdn1.gnarususercontent.com.br/1/1378746/d983894b-e901-4626-b14c-e3b17a39df40.png"/>
+      </a>
+</td>

assets/css/pokedex.css

@@ -84,6 +84,7 @@
     margin: .5rem;
     padding: 1rem;
     border-radius: 1rem;
+    transition: box-shadow 0.3s;
 }
 
 .pokemon .number {
@@ -162,4 +163,74 @@
     .pokemons {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
-}
+}
+
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #3498db;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    display: none;
+    /* Começa escondido */
+    position: absolute;
+    top: 69%;
+    left: 49%;
+    transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); 
+    z-index: 999; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.overlay .close-btn {
+    background-color: #fff;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
+
+.pokemon.expanded {
+    position: fixed;
+    width: 17%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.close-btn {
+    background-color: #fff;
+    padding: 4px 6px;
+    border: none;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1001;
+}
+
+
+

assets/js/main.js

@@ -1,13 +1,14 @@
-const pokemonList = document.getElementById('pokemonList')
-const loadMoreButton = document.getElementById('loadMoreButton')
+const spinner = document.getElementById('spinner');
+const pokemonList = document.getElementById('pokemonList');
+const loadMoreButton = document.getElementById('loadMoreButton');
 
 const maxRecords = 151
 const limit = 10
 let offset = 0;
 
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
+        <li class="pokemon ${pokemon.type}" onclick="expandPokemon(this)">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
 
@@ -16,32 +17,100 @@ function convertPokemonToLi(pokemon) {
                     ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
                 </ol>
 
-                <img src="${pokemon.photo}"
-                     alt="${pokemon.name}">
+                <img src="${pokemon.photo}" alt="${pokemon.name}">
             </div>
         </li>
-    `
+    `;
 }
 
+
 function loadPokemonItens(offset, limit) {
-    pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
-        const newHtml = pokemons.map(convertPokemonToLi).join('')
-        pokemonList.innerHTML += newHtml
-    })
+    return pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
+        const newHtml = pokemons.map(convertPokemonToLi).join('');
+        pokemonList.innerHTML += newHtml;
+    });
 }
 
 loadPokemonItens(offset, limit)
 
+function expandPokemon(element) {
+    // Remove a overlay e o item expandido existentes
+    const existingOverlay = document.querySelector('.overlay');
+    if (existingOverlay) {
+        existingOverlay.remove();
+    }
+
+    const existingExpandedPokemon = document.querySelector('.pokemon.expanded');
+    if (existingExpandedPokemon) {
+        existingExpandedPokemon.classList.remove('expanded');
+        existingExpandedPokemon.classList.remove('highlight');
+        existingExpandedPokemon.remove();
+    }
+
+
+    // Clona o item e adiciona a classe 'expanded'
+    const expandedPokemon = element.cloneNode(true);
+    expandedPokemon.classList.add('expanded');
+
+    // Cria a overlay
+    const overlay = document.createElement('div');
+    overlay.classList.add('overlay');
+    overlay.addEventListener('click', closeOverlay); // Adiciona um event listener para fechar ao clicar na overlay
+    document.body.appendChild(overlay);
+
+    // Adiciona o botão de fechar ao item expandido
+    const closeButton = document.createElement('button');
+    closeButton.classList.add('close-btn');
+    closeButton.textContent = 'X';
+    closeButton.addEventListener('click', closeOverlay);
+    expandedPokemon.appendChild(closeButton);
+
+    // Adiciona o item expandido ao corpo do documento
+    document.body.appendChild(expandedPokemon);
+
+    // Adiciona classe de destaque ao item clicado
+    element.classList.add('highlight');
+}
+
+// Função para fechar o item expandido e a overlay
+function closeOverlay() {
+    const overlay = document.querySelector('.overlay');
+    overlay.remove();
+
+    const expandedPokemon = document.querySelector('.pokemon.expanded');
+    expandedPokemon.remove();
+}
+
+
+
 loadMoreButton.addEventListener('click', () => {
-    offset += limit
-    const qtdRecordsWithNexPage = offset + limit
+    // Mostra o spinner
+    spinner.style.display = 'block';
 
-    if (qtdRecordsWithNexPage >= maxRecords) {
-        const newLimit = maxRecords - offset
-        loadPokemonItens(offset, newLimit)
+    offset += limit;
+    const qtdRecordsWithNextPage = offset + limit;
 
-        loadMoreButton.parentElement.removeChild(loadMoreButton)
+    if (qtdRecordsWithNextPage >= maxRecords) {
+        const newLimit = maxRecords - offset;
+        loadPokemonItens(offset, newLimit)
+            .then(() => {
+                // Remove o botão "Load More" e esconde o spinner
+                loadMoreButton.parentElement.removeChild(loadMoreButton);
+                spinner.style.display = 'none';
+            })
+            .catch((error) => {
+                console.error('Erro ao carregar Pokémon:', error);
+                spinner.style.display = 'none';
+            });
     } else {
         loadPokemonItens(offset, limit)
+            .then(() => {
+                // Esconde o spinner após o carregamento
+                spinner.style.display = 'none';
+            })
+            .catch((error) => {
+                console.error('Erro ao carregar Pokémon:', error);
+                spinner.style.display = 'none'; 
+            });
     }
-})
+});  

index.html

@@ -30,9 +30,11 @@ <h1>Pokedex</h1>
             <!-- ..... Pokemons here ..... -->
         </ol>
 
-        <div class="pagination">
+        <div class="pagination" style="position: relative;">
             <button id="loadMoreButton" type="button">
                 Load More
+                <!-- Adicione o spinner como filho do botão -->
+                <div id="spinner" class="spinner"></div>
             </button>
         </div>
     </section>