Learn how to use the RESTful Pokémon API to create new websites

// CREATE CARD POKEMON (JS)
function createCardPokemon(code, type, nome, imagePok) {
    // Card Element
    let card = document.createElement('button');
    card.classList = `card-pokemon js-open-details-pokemon ${type}`;
    card.setAttribute('code-pokemon', code); // attribute for pokemon code (link to the modal)
    areaPokemonsList.appendChild(card); // append all cards

    // Div Image
    let image = document.createElement('div'); // create any html element
    image.classList = 'image'; // add class image 
    card.appendChild(image); // put in the card (button element)

    let imageSrc = document.createElement('img');
    imageSrc.setAttribute('src', imagePok); // set attribute to imagePok (parameter)
    imageSrc.className = 'thumb-img';
    image.appendChild(imageSrc);

    // Div Info
    let info = document.createElement('div');
    info.classList = 'info';
    card.appendChild(info);

    // Div Text
    let text = document.createElement('div');
    text.classList = 'text';
    info.appendChild(text);

    let codeSpan = document.createElement('span');
    codeSpan.textContent = (code < 10) ? `#00${code}` : (code < 100) ? `#0${code}` : `#${code}`; // condition to show #001 or #010 or #100
    text.appendChild(codeSpan);

    let pokemonName = document.createElement('h3');
    pokemonName.innerText = `${capitalizeFirstLetter(nome)}`; // capital letter uppercase
    text.appendChild(pokemonName);

    // Div Icon
    let icon = document.createElement('div');
    icon.classList = 'icon';
    info.appendChild(icon);

    let typeImg = document.createElement('img');
    typeImg.setAttribute('src', `img/icon-types/${type}.svg`); // does not exist in the API so we create same image name as the types to run through our images
    icon.appendChild(typeImg);
}

// LIST THE POKEMONS
function listingPokemons(urlApi) { // url from API
    // 1 - Get all pokemons from the API (0 - 9)
    // 2 - Pass results, next, count as parameter
    // 3 - Go through the each pokemon API (array) to get the details from each pokemon
        axios({
            method: 'GET',
            url: urlApi
        })
        .then((response) => { // succeed response will do the below config: 
            // all variables:
            const countPokemons = document.getElementById('js-count-pokemons');
            // results = all pokemons
            // count = sum of all pokemons
            // next = next pagination of pokemons (0 - 9)
            const { results, next, count } = response.data; // simple way of running through the OBJECT instead of using always response.data.results
            countPokemons.innerText = count; // innerText = count (all pokemons in the API)

            // Array of results (pokemons)
            results.forEach(pokemon => {
                let urlApiDetails = pokemon.url; // get URL from each pokemon
                axios({
                        method: 'GET',
                        url: `${urlApiDetails}` //string
                    })
                    .then((response) => {
                        const { name, id, sprites, types } = response.data;
                        // name = nome pokemon
                        // id = id pokemon
                        // sprites = image of pokemon
                        // types = tipo do pokemon

                        // Object to get only information I need
                        const infoCard = {
                            nome: name,
                            code: id,
                            image: sprites.other.dream_world.front_default, // path of the image
                            type: types[0].type.name // always first position
                        }
                        createCardPokemon(infoCard.code, infoCard.type, infoCard.nome, infoCard.image); // ** CALLING FUNCTION
                        
                        // select all pokemons to open modal
                        const cardPokemon = document.querySelectorAll('.js-open-details-pokemon'); // class
                        cardPokemon.forEach(card => {
                            card.addEventListener('click', openDetailsPokemon);
                        })
                    })
            })
        })
}

// load page => load function
listingPokemons('https://pokeapi.co/api/v2/pokemon?limit=9&offset=0'); // ** CALLING FUNCTION