diff --git a/README.md b/README.md index 0c237c1c3..a91aae6ef 100644 --- a/README.md +++ b/README.md @@ -1 +1,63 @@ # Trilha JS Developer - Pokedex + + + +## 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. diff --git a/assets/css/global.css b/assets/css/global.css index 980e87861..004feff37 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -21,4 +21,4 @@ body { margin: 1rem auto; border-radius: 1rem; } -} \ No newline at end of file +} diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..0a5baf35a 100644 --- a/assets/css/pokedex.css +++ b/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; diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..851989567 100644 --- a/assets/js/main.js +++ b/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 ` -
  • +
  • #${pokemon.number} ${pokemon.name} -
      ${pokemon.types.map((type) => `
    1. ${type}
      2. `).join('')}
    - - ${pokemon.name} + ${pokemon.name}
    • - ` + `; } +// 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
  • 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); } -}) \ No newline at end of file +}); diff --git a/index.html b/index.html index 1a017821d..d15905cff 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,18 @@

    Pokedex

    Load More + + + +