pokem.js

import './style.css'
 
// Define an interface for a Pokemon object
interface Pokemon {
  name: string;
  image: string; // Add more properties as needed
}

// A class for creating HTML elements for Pokemon objects
class PokemonDOM {
  private root = "http://jherr-pokemon.s3.us-west-1.amazonaws.com/";

  // Create an article element for a given Pokemon object
  createPokemonElement(pokemon: Pokemon): HTMLElement {
    const articleElement = document.createElement("article");
    const headingElement = document.createElement("h2");
    const imageElement = document.createElement("img");
    // Set the text content of the heading element to the Pokemon's name
    headingElement.textContent = pokemon.name;
    // Set the source and alt attributes of the image element to the URL of the Pokemon's image
    imageElement.src = `${this.root}${pokemon.image}`;
    imageElement.alt = ``;

    // Append the heading and image elements to the article element
    articleElement.appendChild(headingElement);
    articleElement.appendChild(imageElement);

    return articleElement;
  }
}

// A class for fetching and displaying data about Pokemon
class PokemonFetcher {
  private root = "http://jherr-pokemon.s3.us-west-1.amazonaws.com/";
  private pokemonDOM = new PokemonDOM();

  // Fetch data about Pokemon from the server and update the DOM with the results
  async fetchData(selector: string, limit: number): Promise<void> {
    try {
      const res = await fetch(`${this.root}index.json`);
      const data = await res.json();

      // Update the DOM with the first `limit` Pokemon objects
      this.updateDOM(selector, data.slice(0, limit));
    } catch (error) {
      console.error(error);
    }
  }

  // Update the DOM with an array of Pokemon objects
  private updateDOM(selector: string, data: Pokemon[]): void {
    // Find the container element in the DOM
    const container = document.querySelector(selector);
    if (!container) {
      console.error(`Element with selector '${selector}' not found`);
      return;
    }

    // Create a document fragment to hold the article elements
    const fragment = document.createDocumentFragment();
    // Create an article element for each Pokemon object and append it to the fragment
    data.forEach((pokemon) => {
      console.log(pokemon)
      const articleElement = this.pokemonDOM.createPokemonElement(pokemon);
      fragment.appendChild(articleElement);
    });

    // Append the fragment to the container element
    container.appendChild(fragment);
  }
}

// Create a PokemonFetcher instance and fetch data about Pokemon
const pokemonFetcher = new PokemonFetcher();
pokemonFetcher.fetchData("#app", 10);