main.js

// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣩⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢛⡛⢿⣿⣿⣿⣿⡇⣿⡎⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣌⢿⣷⣝⢿⣿⣿⡿⣿⣷⢻⣿⣿⣿⣿⣿⣿⣿⣿⢫⣙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢛⣵⢆⣿⣿⣧⡻⣿⣷⣍⡩⣷⣿⣿⣎⢿⣿⣿⣿⣿⣿⣿⣿⣦⠻⣷⣝⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢟⣩⣾⡟⣡⣿⣿⣿⣿⣧⢻⣿⣿⣿⣿⣿⣿⣿⡎⣿⣿⣿⣿⣿⣿⣿⣿⣷⢹⣿⣿⣶⣮⣝⡻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⢟⣥⣾⣿⣿⣿⢸⣿⣿⣿⣿⣿⡿⣸⣿⢛⢿⣿⣿⣿⡿⠃⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⡟⠁⠀⠈⠉⠛⠻⠶⣮⠻⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⡿⣡⡾⠋⠁⠀⠀⢹⡸⣿⣿⣿⣿⣿⣇⢿⣿⣽⣀⡙⢏⣿⣿⣴⢻⣿⣿⣿⣿⣿⣿⣿⡏⣾⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡹⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⢋⡾⠋⠀⠀⠀⠀⠀⠀⢧⢻⣿⣿⣿⣿⣿⣎⠫⣛⢿⣿⣿⣿⣿⣿⣷⢹⣿⣿⣿⣿⣿⣿⢣⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⡜⣿⣿⣿⣿⣿
// ⣿⣿⣿⢃⡟⠁⠀⠀⠀⠀⠀⠀⠀⠘⢧⡹⣿⣿⣿⣿⣿⡼⣮⡳⠙⣿⣖⣶⣿⢣⣿⣿⣿⣿⣿⣿⡟⣼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠜⢿⣿⣿⣿
// ⣿⣿⡏⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣎⢿⣿⣿⣿⡇⣿⣿⣬⣒⢒⣦⣴⣿⣿⣿⣿⣿⣿⣿⢣⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢎⢻⣿⣿
// ⣿⣿⢰⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⡼⣿⣿⣿⡇⣿⣿⣿⣿⡏⣿⣿⣿⣿⣿⣿⣿⡿⣣⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣧⠹⣿
// ⣿⡇⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢧⠹⣿⣿⢹⣿⣿⣿⣿⣧⢻⣿⣿⣿⣿⢟⣩⠞⠁⣾⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡇⣿
// ⣿⢰⠁⠀⠀⠀⠀⢀⢤⡠⡀⠀⠀⠀⠀⠀⠀⠘⢷⡙⠟⣼⣿⣿⣿⣿⣿⡎⠿⣛⣭⡶⠁⢶⣄⣴⣷⡧⡀⠀⠀⠀⠀⣀⠀⠀⣰⣶⣄⡀⠀⠀⠀⠀⢧⢹
// ⡏⢸⠀⠀⣠⣾⡇⠟⣽⢻⠼⣣⠀⠀⣀⣀⠀⠀⢀⣙⢱⣿⣿⣿⣿⣿⣭⣶⣶⣮⠋⠀⠀⠱⣾⣟⣽⣑⡫⠀⢀⣶⣾⣿⣆⢤⡿⠿⢟⣿⣦⡀⠀⠀⢸⢸
// ⣧⢸⣰⣿⣿⣿⢁⣛⢿⣮⣭⣷⣜⠿⠿⢿⣛⣴⡿⢣⠿⠟⠛⠿⣿⣿⣿⣿⣿⣿⣦⡀⢠⣶⢼⣷⡿⣋⠀⠀⠿⢿⣿⣿⣿⣷⢷⣵⣿⣿⣿⣿⣦⡀⢸⢸
// ⣿⣀⣿⣿⣿⣿⣷⣿⣶⣦⣬⡛⠿⣿⣾⠿⢟⡫⢀⣵⣿⣿⣿⣿⣦⡙⢿⣿⣯⣝⡻⢿⣾⢍⣼⣿⢣⣿⣆⣠⣄⠀⠏⢯⠻⣱⣿⣿⣿⣿⣿⣿⣿⣿⡜⢸
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣶⣾⣿⢣⣿⣿⣿⣿⣿⣿⣿⣿⣎⢿⣿⣿⣿⣦⡙⠿⡿⢋⣾⣿⣿⣿⣿⣶⣾⡎⣷⡹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⡎⣿⣿⣿⣿⣷⡰⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⣷⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢟⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⣿⣿⣿⣿⣿⣎⢻⣿⣿⣿⣿⣿⣿⣿⣿⢸⣿⡇⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢣⣿⡆⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⣿⣿⣿⣿⣿⣿⣧⠹⣿⣿⣿⣿⣿⣿⠏⣼⣿⣿⢸⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢁⣿⣿⣧⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⣾⣿⣿⣿⣿⣿⣿⣇⢻⣿⣿⣿⡿⢋⣾⣿⣿⡿⣸⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡘⣿⣿⣿⣧⡹⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⣿⣿⣿⣿⣿⣿⣿⣿⠘⠟⣛⣩⣴⣿⣿⣿⣿⢇⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣝⢿⣿⣿⣿⣌⡻⣿⣿⣿⣿⣿⣿⣿⡜⣿⣿⡿⣿⣿⣿⣿⣿⢰⣿⣿⣿⣿⣿⣿⡿⢋⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⠿⢟⣵⣷⣾⣿⣿⣿⢫⣤⣍⠛⠿⠿⠿⣿⣷⡜⢿⣿⣿⣿⣿⣿⡇⣾⣿⣿⣿⡿⢟⡫⣢⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⢯⣿⣿⣯⣿⣿⣿⣯⡷⣛⣭⠿⣿⣿⣿⣿⠿⣠⣿⣿⣿⣮⣝⡻⢿⣿⣿⣷⢨⣽⣿⣿⣿⣦⡙⣛⣭⡵⢞⣥⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣹⣭⠭⢾⣓⣙⣭⣶⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣭⡅⡟⣛⢿⡿⣛⢿⣟⣈⢵⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⣜⢿⢎⣘⢿⡏⣬⣛⢾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
// ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣾⣿⣷⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿

// Starts the function once the html loads
window.onload = getPokemon;

let pokemonDisplay = document.getElementById("pokemon-display");

// This is the pokemon array where we'll store the objects from the API
// There is an empty object in here becuase we wanted the 1st pokemon to have an index of 1, not 0
let pokemonArray = [{}];

// vv For the pokemonDisplay html element to have different colors, we opted to use this object to store the colors for the different types vv

const colors = {
  fire: "#FDDFDF",
  grass: "#DEFDE0",
  electric: "#FCF7DE",
  water: "#DEF3FD",
  ground: "#f4e7da",
  rock: "#d5d5d4",
  fairy: "#fceaff",
  poison: "#98d7a5",
  bug: "#f8d5a3",
  dragon: "#97b3e6",
  psychic: "#eaeda1",
  flying: "#F5F5F5",
  fighting: "#E6E0D4",
  normal: "#F5F5F5",
  ghost: "#564aa5",
  ice: "#d0fdff",
};

// To call the pokemon api, we used an async function to make the for loop wait on the promise before continuing

async function getPokemon() {
  for (let i = 1; i < 495; i++) {
    const response = await fetch(
      `https://pokeapi.co/api/v2/pokemon/${i}/

      `
    );
    const todo = await response.json();
    pokemonArray.push(todo);
  }
  displayPokemon();
  return pokemonArray;
}

// To display the pokemon objects as HTML, we created a div element and 4 child elements with the information we wanted to display.

const displayPokemon = () => {
  for (let i = 1; i <= pokemonArray.length; i++) {
    // Just setting up a few variables
    const type = pokemonArray[i].types[0].type.name;
    const color = colors[type];
    // pokeDiv is the body of each pokemon
    const pokeDiv = document.createElement("div");
    pokeDiv.setAttribute("onclick", "battlePokemon(this.id)");
    pokeDiv.classList.add("pokemon");
    pokeDiv.id = `${i}`;
    // Name
    const pokemonNameContainer = document.createElement("p");
    pokemonNameContainer.classList.add("pokemon-name");
    pokemonNameContainer.innerText = pokemonArray[i].name;
    // Image
    const pokeImageContainer = document.createElement("div");
    const pokeImage = document.createElement("img");
    pokeImage.src = pokemonArray[i].sprites.front_default;
    pokeImageContainer.appendChild(pokeImage);
    pokeImageContainer.classList.add("pokemon-image");
    // Id
    const pokeIdContainer = document.createElement("p");
    pokeIdContainer.innerText = pokemonArray[i].id;
    pokeIdContainer.classList.add("pokemon-id");

    // Type
    const pokemonTypeContainer = document.createElement("div");
    const pokemonTypeArray = pokemonArray[i].types;
    for (let i = 0; i < pokemonTypeArray.length; i++) {
      const pokeType = document.createElement("p");
      pokeType.innerText = pokemonTypeArray[i].type.name;
      pokemonTypeContainer.appendChild(pokeType);
    }
    pokemonTypeContainer.classList.add("pokemon-type");
    // Lastly we just append everything to the pokediv and use css grid to organize them
    pokeDiv.appendChild(pokemonNameContainer);
    pokeDiv.appendChild(pokeIdContainer);
    pokeDiv.appendChild(pokeImageContainer);
    pokeDiv.appendChild(pokemonTypeContainer);
    pokeDiv.style.backgroundColor = color;

    pokemonDisplay.appendChild(pokeDiv);
  }
  console.log(pokemonArray);
};

// BATTLING SYSTEM
// This is kind of a hack butttttt
// We start by creating two variables that hold the values of the last pokemon clicked on
let lastPokemon = "";
let lastBaseStat = 0;
// we are passing in (this.id) into our function as 'element'
const battlePokemon = (element) => {
  console.log("battle pokemon");
  // Then we compare if the .base_stat of which pokemon is higher
  if (pokemonArray[element].stats[0].base_stat > lastBaseStat) {
    // the id of the html element is equal to the pokemons id, making it easy  to use it as an index in bracket notation
    window.alert(`${pokemonArray[element].name} wins!`);
  } else if (pokemonArray[element].stats[0].base_stat < lastBaseStat) {
    window.alert(`${lastPokemon} wins!`);
  }
  // Lastly, we assigned the element to the last pokemon clicked on variables
  for (let i = 1; i <= pokemonArray.length; i++) {
    if (element == pokemonArray[i - 1].id) {
      lastPokemon = pokemonArray[i - 1].name;
      lastBaseStat = pokemonArray[i - 1].stats[0].base_stat;
    }
  }
};