script.js

/**
 * Luke Melaia - Pokédex
 */

let pokemon = [];
let filter = null;

async function fetchPokemon(limit = 151) {
  try {
    const response = await fetch(
      `https://pokeapi.co/api/v2/pokemon?limit=${limit}`
    );
    const data = await response.json();

    return await Promise.all(
      data.results.map(async (pokemon) => {
        const pokemonResponse = await fetch(pokemon.url);
        return pokemonResponse.json();
      })
    );
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

function createPokemon(pokemon) {
  const card = document.createElement("div");
  card.className = "pokemon-card";

  const img = document.createElement("img");
  img.src = pokemon.sprites.front_default;
  img.alt = pokemon.name;

  const number = document.createElement("p");
  number.className = "pokemon-number";
  number.textContent = `#${pokemon.id.toString().padStart(3, "0")}`;

  const name = document.createElement("h3");
  name.className = "pokemon-name";
  name.textContent =
    pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1);

  const types = document.createElement("div");
  types.className = "pokemon-types";
  pokemon.types.forEach((typeInfo) => {
    const typeButton = document.createElement("p");
    typeButton.className = `type-label ${typeInfo.type.name}`;
    typeButton.textContent =
      typeInfo.type.name.charAt(0).toUpperCase() + typeInfo.type.name.slice(1);
    types.appendChild(typeButton);
  });

  card.appendChild(img);
  card.appendChild(number);
  card.appendChild(name);
  card.appendChild(types);

  return card;
}

function displayAllPokemon(pokemonList) {
  const container = document.getElementById("container");
  container.innerHTML = "";

  pokemonList.forEach((pokemon) => {
    const card = createPokemon(pokemon);
    container.appendChild(card);
  });
}

function filterAndSort(searchTerm, sortOrder, typeFilter) {
  let filtered = pokemon.filter((pokemon) => {
    // Name
    if (pokemon.name.toLowerCase().includes(searchTerm.toLowerCase())) {
      return true;
    }

    // ID
    if (pokemon.id.toString().includes(searchTerm)) {
      return true;
    }

    // Type
    for (k in pokemon.types) {
      if (pokemon.types[k].type.name.includes(searchTerm.toLowerCase())) {
        return true;
      }
    }
  });

  filtered.sort((a, b) => {
    if (sortOrder === "asc") {
      return a.id - b.id;
    } else {
      return b.id - a.id;
    }
  });

  return filtered;
}

function clearSearch() {
  document.getElementById("search").value = "";

  var event = new Event("input", {
    bubbles: true,
  });

  document.getElementById("search").dispatchEvent(event);
}

async function init() {
  if (pokemon.length === 0) {
    pokemon = await fetchPokemon();
  }
  displayAllPokemon(pokemon);

  const search = document.getElementById("search");
  const sort = document.getElementById("sort");
  const clear = document.getElementById("clear");

  function updateDisplay() {
    const searchTerm = search.value.trim();
    const currentSortOrder = sort.value;
    const filteredAndSortedPokemon = filterAndSort(
      searchTerm,
      currentSortOrder,
      filter
    );
    displayAllPokemon(filteredAndSortedPokemon);
  }

  search.addEventListener("input", updateDisplay);
  sort.addEventListener("change", updateDisplay);
  clear.addEventListener("click", clearSearch);
}

window.addEventListener("load", init);