Guilherme-alexander/Pokedex

Pokedex com 493 Pokemons JavaScriprt com Api Ajax + Jquery para efeitos e botões

Pokedex com 493 Pokemons

Requisição Ajax / Consumo de API

• JavaScriprt

  • api
    

• Jquery

  • efeitos
  • botões
    

Código Requisição Ajax Links

API DADOS POKÉMONs LINk

https://pokeapi.co/api/v2/pokemon/25

API IMAGENS POKÉMONs LINk

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png

Código Requisição Ajax

JavaScript

const getPokemonUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}`

//4 geração pokemon final=>493
const generatePokemonPromises = () => Array(493).fill().map((_, index) =>
	fetch(getPokemonUrl(index + 1)).then(response => response.json()))
		
	const fetchPokemon = () =>{

	const pokemonPomises = generatePokemonPromises()

	Promise.all(pokemonPomises)
	.then(pokemons => {
		// console.log(pokemons) debug

		const lisPokemons = pokemons.reduce((accumulator,pokemon) => {
			const types = pokemon.types.map(typeInfo => typeInfo.type.name)

			accumulator += `
				<li class="card ${types[0]}" tipos2="${types[1]}">
				<img class="card-imagens ${types[0]}" alt="${pokemon.name}" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" />
				  <h2 class="card-title ${types[0]}">${pokemon.id}. ${pokemon.name}</h2>
				  <p class="card-subtitle ${types[0]}">${types.join(' / ')}</p>
				</li>
			` 
			return accumulator
		}, '')

		const ul = document.querySelector('[data-js="pokedex"]')
		ul.innerHTML = lisPokemons
		// console.log(lisPokemons) debug
	})
}

fetchPokemon()

Código / link API / botão Reset

jquery

• botão API dispara um alert mostranso os Links da API
• botão reset reseta lista

//home
        $('.menu').on('click',function(){
            alert('API Info-> https://pokeapi.co/api/v2/pokemon/id=pokemon')
            alert('API Imagens-> https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/id=pokemon.png')
        })
        
//buttom reset
        $('.reset').on('click',function(){
            $('.card').css('display','block')
            $('.card').css('background','white')
            $('.card-title').css('color','black')
            $('.card-subtitle').css('color','black')
        })

Pokedex com 493 Pokemons

Código para filtrar por tipo

jquery

• click no card função seleciona todos tido que forem da mesmo fire, aqua trocando a cor de fundo do card

//type fire
        $('.container').on('click','.card.fire',function(){
            $('.card.fire').css('background','#fd7d24')
            $('.card-title.fire').css('color','white')
            $('.card-subtitle.fire').css('color','white')
        });

Pokedex Apenas Do Tipo Fogo

Responsividade

css

• Responsivo
  • Display Grids
  • FlexBox

Pokedex Responsiva