Conteúdo no README.md

README.md

@@ -1 +1,63 @@
 # Trilha JS Developer - Pokedex
+
+<img src="https://lh4.googleusercontent.com/proxy/pwl8HHcElfu2lW5OIgjdW7qP2qBmkD6iuSWG2C6JouPh-7tY3m_0zyrJftsJI3O0vDGQSs8U6cF4od-MERZhXeTDzowSdGzrnI0sOTZeC2AKUNhJiBGPQb3My0Q-F1uWlT3aIC1k1hNVC_FYQJ9QV68" width="100px" height="100px">
+
+## Requisitos
+
+- Instalação do NODE JS no link ⏩ [Node Js](https://nodejs.org/pt)
+
+- Instalar Biblioteca globalmente (Digite esse código no terminal do vscode)🔽
+`npm install -g http-server ./`
+para executar no terminal do seu vccode basta digitar 🔽
+`http-server`
+
+- Link do Normalize CSS ⏩ [CDN Normalize](https://cdnjs.com/libraries/normalize)
+
+## Tecnologias aplicada
+
+- HTML5
+- CSS3
+- JavaScript
+
+## Estrutura do Projeto
+
+```
+/js-developer-pokedex/
+│ ├── /assets/
+│ ├── /css/
+│ │ ├── global.css
+│ │ └── pokedex.css
+│ └── /js/
+│ ├── main.js
+│ ├── poke-api.js
+│ └── pokemon-model.js
+│ ├── index.html
+└── README.md
+```
+
+## Como usar
+
+1. Faça o download do arquivo, clone ou faça um fork do repositório.
+2. Abra o arquivo `index.html` em qualquer navegador.
+3. Teste o botão interativo e veja a mágica acontecer.
+
+## Técnica Mobile First
+
+**Mobile First** é uma abordagem de design que prioriza o desenvolvimento para dispositivos móveis antes de expandir para telas maiores.  
+
+### Principais características
+
+- Foco inicial em telas pequenas, adicionando recursos para telas maiores (progressive enhancement).
+- Performance otimizada para conexões lentas.
+- Navegação simplificada e intuitiva.
+
+### Benefícios
+
+- Melhor experiência em dispositivos móveis.
+- Acessibilidade para um público mais amplo.
+- Design responsivo e escalável.
+
+### Resultado do desafio
+
+Adicionado um modal pra mostrar delalhes do Pokemon.
+Para sair do modal você pode clicar no X ou fora do modal.

assets/css/global.css

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

assets/css/pokedex.css

@@ -146,6 +146,65 @@
     border-radius: 1rem;
 }
 
+/* Estilo básico do modal */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    visibility: hidden; /* Esconde o modal inicialmente */
+    opacity: 0; /* Torna o modal invisível */
+    transition: visibility 0s, opacity 0.3s ease-in-out;
+}
+.modal-content {
+    background: linear-gradient(#e66465, #9198e5);
+    opacity: 0.8;
+    border-radius: 10px;
+    padding: 20px;
+    width: 400px;
+    max-width: 90%;
+    text-align: center;
+    position: relative;
+}
+#modal-title{
+    text-transform: capitalize;
+}
+.pokemon-image {
+    width: 150px;
+    height: 150px;
+    object-fit: contain; /* Garante que a imagem não distorça */
+    margin: 20px 0;
+    /* border-radius: 10px; Opcional: bordas arredondadas 
+    background-color: #f2f2f2; Opcional: fundo para contraste  */
+}
+
+
+.close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.modal.visible {
+    visibility: visible; /* Mostra o modal */
+    opacity: 1; /* Torna o modal visível */
+}
+
+.hidden {
+    display: none;
+}
+
+
 @media screen and (min-width: 380px) {
     .pokemons {
         grid-template-columns: 1fr 1fr;

assets/js/main.js

@@ -1,47 +1,92 @@
-const pokemonList = document.getElementById('pokemonList')
-const loadMoreButton = document.getElementById('loadMoreButton')
+// Selecionar elementos
+const pokemonList = document.getElementById('pokemonList');
+const modal = document.getElementById('pokemonModal');
+const modalTitle = document.getElementById('modal-title');
+const modalDescription = document.getElementById('modal-description');
+const modalImage = document.getElementById('modal-image');
+const closeButton = document.querySelector('.close-button');
+const loadMoreButton = document.getElementById('loadMoreButton');
 
-const maxRecords = 151
-const limit = 10
+// Limites de carregamento
+const maxRecords = 151;
+const limit = 10;
 let offset = 0;
 
+// Converter Pokémon para HTML
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
+        <li class="pokemon ${pokemon.type}" 
+            data-name="${pokemon.name}" 
+            data-description="Tipos: ${pokemon.types.join(', ')}" 
+            data-image="${pokemon.photo}">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
-
             <div class="detail">
                 <ol class="types">
                     ${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>
-    `
+    `;
 }
 
+// Carregar Pokémon da API e renderizar na lista
 function loadPokemonItens(offset, limit) {
     pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
-        const newHtml = pokemons.map(convertPokemonToLi).join('')
-        pokemonList.innerHTML += newHtml
-    })
+        const newHtml = pokemons.map(convertPokemonToLi).join('');
+        pokemonList.innerHTML += newHtml; // Adiciona os Pokémon à lista
+    });
+}
+
+// Função para abrir o modal
+function openModal(pokemonName, pokemonDescription, pokemonImage) {
+    modalTitle.textContent = pokemonName; // Atualiza o título do modal
+    modalDescription.textContent = pokemonDescription; // Atualiza a descrição do modal
+    modalImage.src = pokemonImage;
+    modalImage.alt = `imagem de ${pokemonName}`;
+    modal.classList.remove('hidden');
+    modal.classList.add('visible'); // Exibe o modal
+}
+
+// Função para fechar o modal
+function closeModal() {
+    modal.classList.remove('visible'); // Esconde o modal
 }
 
-loadPokemonItens(offset, limit)
+// Eventos para fechar o modal
+closeButton.addEventListener('click', closeModal);
+modal.addEventListener('click', (event) => {
+    if (event.target === modal) {
+        closeModal();
+    }
+});
+
+// Evento de clique nos itens da lista
+pokemonList.addEventListener('click', (event) => {
+    const target = event.target.closest('li'); // Garante que clique no <li> seja capturado
+    if (target) {
+        const pokemonName = target.getAttribute('data-name'); // Obtém o nome
+        const pokemonDescription = target.getAttribute('data-description'); // Obtém a descrição
+        const pokemonImage = target.getAttribute('data-image');
+        openModal(pokemonName, pokemonDescription, pokemonImage); // Abre o modal com os dados
+    }
+});
+
+// Inicializar o carregamento dos Pokémon
+loadPokemonItens(offset, limit);
 
+// Evento para carregar mais Pokémon
 loadMoreButton.addEventListener('click', () => {
-    offset += limit
-    const qtdRecordsWithNexPage = offset + limit
+    offset += limit;
+    const qtdRecordsWithNextPage = offset + limit;
 
-    if (qtdRecordsWithNexPage >= maxRecords) {
-        const newLimit = maxRecords - offset
-        loadPokemonItens(offset, newLimit)
+    if (qtdRecordsWithNextPage >= maxRecords) {
+        const newLimit = maxRecords - offset;
+        loadPokemonItens(offset, newLimit);
 
-        loadMoreButton.parentElement.removeChild(loadMoreButton)
+        loadMoreButton.parentElement.removeChild(loadMoreButton);
     } else {
-        loadPokemonItens(offset, limit)
+        loadPokemonItens(offset, limit);
     }
-})
+});

index.html

@@ -35,7 +35,18 @@ <h1>Pokedex</h1>
                 Load More
             </button>
         </div>
+
     </section>
+
+    <!-- Modal -->
+        <div id="pokemonModal" class="modal">
+            <div class="modal-content">
+                <span class="close-button">&times;</span>
+                <h2 id="modal-title"></h2>
+                <img id="modal-image" src="" alt="Imagem do Pokémon" class="pokemon-image">
+                <p id="modal-description"></p>
+            </div>
+        </div>
 
     <!-- Nosso JS -->
     <script src="/assets/js/pokemon-model.js"></script>