function displayPokemonInfo(id) {

  // Get DOM elements
  const POKEMON_NAME = document.querySelector('#pk-name');
  const TYPE_LIST = document.querySelector('#type-list');
  const SPRITE = document.querySelector('#sprite');
  const STATS = document.querySelector('#stat-list');
  const EVOLUTION = document.querySelector('#evolution-list');

  // Clear elements before populating with API data
  POKEMON_NAME.innerHTML = "";
  TYPE_LIST.innerHTML = "";
  SPRITE.innerHTML = "";
  STATS.innerHTML = "";
  EVOLUTION.innerHTML = "";

  // Make API call to get Pokemon info
  let pokemonUrl = 'https://pokeapi.co/api/v2/pokemon/' + id;

  fetch(pokemonUrl)
    .then(x => x.json())
    .then(x => {

      // Name
      POKEMON_NAME.textContent = x.name;

      // Types
      x.types.forEach(function(obj) {
        // Create div
        let type = document.createElement('div');
        let typeName = obj.type.name;
        type.textContent = typeName; 

        // Add class names to style each type div
        type.classList.add('type');
        type.classList.add(typeName); // To apply color to div

        // Append types to parent container
        TYPE_LIST.appendChild(type);
      })

      // Sprite image
      let img = document.createElement('img');
      img.src = x.sprites.front_default;
      img.alt = x.name;
      SPRITE.appendChild(img);

      // Base Stats
      x.stats.forEach(function(obj) {

        // Create separate <li> elements for grid positioning (two columns)
        let statLabel = document.createElement('li');
        statLabel.textContent = obj.stat.name + ": ";
        STATS.appendChild(statLabel);
        
        let statAttr = document.createElement('li');
        statAttr.textContent = obj.base_stat;
        STATS.appendChild(statAttr);
      })

      // Profile
      // Height
      document.querySelector('#height .attr-value').textContent = x.height / 10 + ' m';

      // Weight
      document.querySelector('#weight .attr-value').textContent = x.weight / 10 + ' kg';

      // Make another API call to get additional info not included in v2/pokemon/{id} endpoint
      const speciesUrl = x.species.url;

      fetch(speciesUrl)
        .then(x => x.json())
        .then(x => {

          // Set category
          document.querySelector('#category .attr-value').textContent = x.genera[2].genus;

          // Need to make separate API call to retrieve the evolution chain of a Pokemon
          const evolutionUrl = x.evolution_chain.url;

          fetch(evolutionUrl)
            .then(x => x.json())
            .then(x => {

              // Accessing the Pokemon Evolution Chain in the Pokemon API
              // Credit: https://stackoverflow.com/questions/39112862/pokeapi-angular-how-to-get-pokemons-evolution-chain
              // Note: This won't return multiple types of evolution properly (e.g. Eevee -> Jolteon/Vaporeon/Flareon/etc). Currently only works for evolution triggered by leveling up.

              let evoChain = [];
              let evoData = x.chain;

              do {
                let evoDetails = evoData['evolution_details'][0];
                evoChain.push({
                  "species_name": evoData.species.name,
                  "min_level": !evoDetails ? 1 : evoDetails.min_level,
                  "trigger_name": !evoDetails ? null : evoDetails.trigger.name,
                  "item": !evoDetails ? null : evoDetails.item
                });

                evoData = evoData['evolves_to'][0]; // update evoData variable to access nested "evolves_to" property
              } while (!!evoData && evoData.hasOwnProperty('evolves_to'));

              console.log(evoChain);

              // Loop through evoChain array to populate EVOLUTION section.
              // Note: Will throw an error and not display if any Pokemon in the evolution chain isn't included in current pokedex (because it wasn't added to global pokemonArray in initial API call).
              evoChain.forEach(function(evo) {

                const evoDiv = document.createElement('div');
                evoDiv.className = 'pokemon';

                // Get sprites for each evolution stage 
                const pokemon = pokemonArray.filter(x => x.name === evo.species_name); // Returns undefined if evoChain includes a Pokemon not in pokemonArray
                const evoImg = document.createElement('img');
                evoImg.src = pokemon[0].sprites.front_default; 

                // Get name
                const evoName = document.createElement('h3');
                evoName.textContent = evo.species_name;

                // Append everything
                evoDiv.appendChild(evoImg);
                evoDiv.appendChild(evoName);
                EVOLUTION.appendChild(evoDiv);
              })
            })
            .catch(err => {
              let errorString = "This Pokemon evolves to/from a Pokemon that isn't included in the current Pokedex." // lol
              EVOLUTION.innerHTML = errorString;
              console.log(err);
            })
        })
        .catch(err => {
          console.log(err);
        })


      // Abilities
      let abilitiesStr = [];
      x.abilities.forEach(function(obj) {
        abilitiesStr.push(obj.ability.name);
      })
      document.querySelector('#abilities .attr-value').textContent = abilitiesStr.join(', ');

      // Clear page and display info
      document.querySelector('.grid-wrapper').style.display = 'none';
      DETAILS.style.display = 'grid';

    })
    .catch(err => {
      console.log(err);
    })
}
/**
 * Takes a Pokemon ID and then fetches API data to fill out a details section.
 * @param {number} id The Pokemon's Pokedex ID.
 */
Takes a Pokemon ID and then fetches API data to fill out a details section.
@param {number} id The Pokemon's Pokedex ID.
Takes a Pokemon ID and then fetches API data to fill out a details section . @param { number } id The Pokemon ' s Pokedex ID .
function displayPokemonInfo(id) {
  const POKEMON_NAME = document.querySelector('#pk-name');
  const TYPE_LIST = document.querySelector('#type-list');
  const SPRITE = document.querySelector('#sprite');
  const STATS = document.querySelector('#stat-list');
  const EVOLUTION = document.querySelector('#evolution-list');
  POKEMON_NAME.innerHTML = "";
  TYPE_LIST.innerHTML = "";
  SPRITE.innerHTML = "";
  STATS.innerHTML = "";
  EVOLUTION.innerHTML = "";
  let pokemonUrl = 'https://pokeapi.co/api/v2/pokemon/' + id;
  fetch(pokemonUrl)
    .then(x => x.json())
    .then(x => {
      POKEMON_NAME.textContent = x.name;
      x.types.forEach(function(obj) {
        let type = document.createElement('div');
        let typeName = obj.type.name;
        type.textContent = typeName; 
        type.classList.add('type');
        type.classList.add(typeName); 
        TYPE_LIST.appendChild(type);
      })
      let img = document.createElement('img');
      img.src = x.sprites.front_default;
      img.alt = x.name;
      SPRITE.appendChild(img);
      x.stats.forEach(function(obj) {
        let statLabel = document.createElement('li');
        statLabel.textContent = obj.stat.name + ": ";
        STATS.appendChild(statLabel);
        let statAttr = document.createElement('li');
        statAttr.textContent = obj.base_stat;
        STATS.appendChild(statAttr);
      })
      document.querySelector('#height .attr-value').textContent = x.height / 10 + ' m';
      document.querySelector('#weight .attr-value').textContent = x.weight / 10 + ' kg';
      const speciesUrl = x.species.url;
      fetch(speciesUrl)
        .then(x => x.json())
        .then(x => {
          document.querySelector('#category .attr-value').textContent = x.genera[2].genus;
          const evolutionUrl = x.evolution_chain.url;
          fetch(evolutionUrl)
            .then(x => x.json())
            .then(x => {
              let evoChain = [];
              let evoData = x.chain;
              do {
                let evoDetails = evoData['evolution_details'][0];
                evoChain.push({
                  "species_name": evoData.species.name,
                  "min_level": !evoDetails ? 1 : evoDetails.min_level,
                  "trigger_name": !evoDetails ? null : evoDetails.trigger.name,
                  "item": !evoDetails ? null : evoDetails.item
                });
                evoData = evoData['evolves_to'][0]; 
              } while (!!evoData && evoData.hasOwnProperty('evolves_to'));
              console.log(evoChain);
              evoChain.forEach(function(evo) {
                const evoDiv = document.createElement('div');
                evoDiv.className = 'pokemon';
                const pokemon = pokemonArray.filter(x => x.name === evo.species_name); 
                const evoImg = document.createElement('img');
                evoImg.src = pokemon[0].sprites.front_default; 
                const evoName = document.createElement('h3');
                evoName.textContent = evo.species_name;
                evoDiv.appendChild(evoImg);
                evoDiv.appendChild(evoName);
                EVOLUTION.appendChild(evoDiv);
              })
            })
            .catch(err => {
              let errorString = "This Pokemon evolves to/from a Pokemon that isn't included in the current Pokedex." 
              EVOLUTION.innerHTML = errorString;
              console.log(err);
            })
        })
        .catch(err => {
          console.log(err);
        })
      let abilitiesStr = [];
      x.abilities.forEach(function(obj) {
        abilitiesStr.push(obj.ability.name);
      })
      document.querySelector('#abilities .attr-value').textContent = abilitiesStr.join(', ');
      document.querySelector('.grid-wrapper').style.display = 'none';
      DETAILS.style.display = 'grid';
    })
    .catch(err => {
      console.log(err);
    })
}
function displayPokemonInfo ( id ) { const POKEMON_NAME = document . querySelector ( '#pk-name' ) ; const TYPE_LIST = document . querySelector ( '#type-list' ) ; const SPRITE = document . querySelector ( '#sprite' ) ; const STATS = document . querySelector ( '#stat-list' ) ; const EVOLUTION = document . querySelector ( '#evolution-list' ) ; POKEMON_NAME . innerHTML = "" ; TYPE_LIST . innerHTML = "" ; SPRITE . innerHTML = "" ; STATS . innerHTML = "" ; EVOLUTION . innerHTML = "" ; let pokemonUrl = 'https://pokeapi.co/api/v2/pokemon/' + id ; fetch ( pokemonUrl ) . then ( x => x . json ( ) ) . then ( x => { POKEMON_NAME . textContent = x . name ; x . types . forEach ( function ( obj ) { let type = document . createElement ( 'div' ) ; let typeName = obj . type . name ; type . textContent = typeName ; type . classList . add ( 'type' ) ; type . classList . add ( typeName ) ; TYPE_LIST . appendChild ( type ) ; } ) let img = document . createElement ( 'img' ) ; img . src = x . sprites . front_default ; img . alt = x . name ; SPRITE . appendChild ( img ) ; x . stats . forEach ( function ( obj ) { let statLabel = document . createElement ( 'li' ) ; statLabel . textContent = obj . stat . name + ": " ; STATS . appendChild ( statLabel ) ; let statAttr = document . createElement ( 'li' ) ; statAttr . textContent = obj . base_stat ; STATS . appendChild ( statAttr ) ; } ) document . querySelector ( '#height .attr-value' ) . textContent = x . height / 10 + ' m' ; document . querySelector ( '#weight .attr-value' ) . textContent = x . weight / 10 + ' kg' ; const speciesUrl = x . species . url ; fetch ( speciesUrl ) . then ( x => x . json ( ) ) . then ( x => { document . querySelector ( '#category .attr-value' ) . textContent = x . genera [ 2 ] . genus ; const evolutionUrl = x . evolution_chain . url ; fetch ( evolutionUrl ) . then ( x => x . json ( ) ) . then ( x => { let evoChain = [ ] ; let evoData = x . chain ; do { let evoDetails = evoData [ 'evolution_details' ] [ 0 ] ; evoChain . push ( { "species_name" : evoData . species . name , "min_level" : ! evoDetails ? 1 : evoDetails . min_level , "trigger_name" : ! evoDetails ? null : evoDetails . trigger . name , "item" : ! evoDetails ? null : evoDetails . item } ) ; evoData = evoData [ 'evolves_to' ] [ 0 ] ; } while ( ! ! evoData && evoData . hasOwnProperty ( 'evolves_to' ) ) ; console . log ( evoChain ) ; evoChain . forEach ( function ( evo ) { const evoDiv = document . createElement ( 'div' ) ; evoDiv . className = 'pokemon' ; const pokemon = pokemonArray . filter ( x => x . name === evo . species_name ) ; const evoImg = document . createElement ( 'img' ) ; evoImg . src = pokemon [ 0 ] . sprites . front_default ; const evoName = document . createElement ( 'h3' ) ; evoName . textContent = evo . species_name ; evoDiv . appendChild ( evoImg ) ; evoDiv . appendChild ( evoName ) ; EVOLUTION . appendChild ( evoDiv ) ; } ) } ) . catch ( err => { let errorString = "This Pokemon evolves to/from a Pokemon that isn't included in the current Pokedex." EVOLUTION . innerHTML = errorString ; console . log ( err ) ; } ) } ) . catch ( err => { console . log ( err ) ; } ) let abilitiesStr = [ ] ; x . abilities . forEach ( function ( obj ) { abilitiesStr . push ( obj . ability . name ) ; } ) document . querySelector ( '#abilities .attr-value' ) . textContent = abilitiesStr . join ( ', ' ) ; document . querySelector ( '.grid-wrapper' ) . style . display = 'none' ; DETAILS . style . display = 'grid' ; } ) . catch ( err => { console . log ( err ) ; } ) }
Takes a Pokemon ID and then fetches API data to fill out a details section.
Takes a Pokemon ID and then fetches API data to fill out a details section .
// Get DOM elements
 // Clear elements before populating with API data
 // Make API call to get Pokemon info
 // Name
 // Types
 // Create div
 // Add class names to style each type div
 // To apply color to div
 // Append types to parent container
 // Sprite image
 // Base Stats
 // Create separate <li> elements for grid positioning (two columns)
 // Profile
 // Height
 // Weight
 // Make another API call to get additional info not included in v2/pokemon/{id} endpoint
 // Set category
 // Need to make separate API call to retrieve the evolution chain of a Pokemon
 // Accessing the Pokemon Evolution Chain in the Pokemon API
 // Credit: https://stackoverflow.com/questions/39112862/pokeapi-angular-how-to-get-pokemons-evolution-chain
 // Note: This won't return multiple types of evolution properly (e.g. Eevee -> Jolteon/Vaporeon/Flareon/etc). Currently only works for evolution triggered by leveling up.
 // update evoData variable to access nested "evolves_to" property
 // Loop through evoChain array to populate EVOLUTION section.
 // Note: Will throw an error and not display if any Pokemon in the evolution chain isn't included in current pokedex (because it wasn't added to global pokemonArray in initial API call).
 // Get sprites for each evolution stage 
 // Returns undefined if evoChain includes a Pokemon not in pokemonArray
 // Get name
 // Append everything
 // lol
 // Abilities
 // Clear page and display info
