pocketmon

```javascript

const BASE_URL = 'https://pokeapi.co/api/v2/';

const pokeImage = document.querySelector('#poke-image')
const pokeButotn = document.querySelector('button')

async function getPokemon(num) {
    pokeImage.innerHTML = '';
    const response = await (await fetch(`${BASE_URL}/pokemon/${num}`)).json()
    const { sprites } = response
    pokeImage.innerHTML += `<img src=${sprites.front_default}><img src=${sprites.front_shiny}><br>`
    if (sprites.front_female !== null) {
        pokeImage.innerHTML += `<img src=${sprites.front_female}><img src=${sprites.front_shiny_female}></img>`
    }
}

async function getPokeSpecies(num) {
    const response = await (await fetch(`${BASE_URL}/pokemon-species/${num}`)).json()
    const eveolution_chain = response?.evolution_chain?.url;
    if (eveolution_chain != null) {
        const evolution_chain_response = await (await fetch(eveolution_chain)).json()
        const first = evolution_chain_response.chain.species;
        const second = evolution_chain_response?.chain?.evolves_to?.[0]?.species;
        const third = evolution_chain_response?.chain?.evolves_to?.[0]?.evolves_to?.[0]?.species;
        const arr = [first?.url, second?.url, third?.url]
            .filter(url => url !== undefined)
        let html = '';
        for (const url of arr) {
            const result = await getPokemonImage(url)
            if (result !== null) {
                html += `<img src=${result}>`
            }
        }
        pokeImage.innerHTML += `
            <div>
                <p>진화과정</p>
                ${html}
            </div>
        `
    }
}


async function getPokemonImage(url) {
    const num = url.split('/').at(-2)
    const response = await (await fetch(`${BASE_URL}/pokemon/${num}`)).json();
    const { sprites } = response
    return sprites?.front_default
}

pokeButotn.onclick = function () {
    const randomNumber = Math.round(Math.random() * 1000);
    getPokemon(randomNumber);
    getPokeSpecies(randomNumber);
}


```