In learning about API’s, I had a lecture where the PokeAPI was utilized to demonstrate the fetch(url) method. In doing so, I was inspired to create an app wherein you could look up and create a team of Pokemon with access to dynamically populate your team from any set of Pokemon, displaying their names, stats, pictures, and types. It seemed easy at first, I quickly found it to be a challenge given the limitations of both the API and my skill.
To start, I have to answer the question “What is an API?” API’s are a broad and deep subject, so I will limit my answers to my own knowledge and experiences with it. I have been working with a Web API which is an application programming interface. A web API stores an array that accepts and returns data in a JSON format, allowing one the ability to dynamically populate an app or site with an array of data without having to manually add or remove elements.
What is a JSON format? JSON is an acronym of JavaScript Object Notation. It is a data format that stores information in text and allows for the transmission of data objects in key-value pairs that can be retrieved using Javascript.
In my project, we began by first building out a fetch function:
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data);}
The fetch method takes the url provided by the PokeAPI as an argument, and returns a promise object. This promise is then handles it by the .then method. The first .then takes the objects and returns a promise is JSON format from the API. Then it takes the data and logs it in the console in order to log the array and see that it is working. (In creating this program I have learned to love console.log and it has become incredibly useful.)
Then I took the array of data and ran is through a forEach loop, dynamically populating the team of pokemon, limited to the first six results of pokemon, as each team has a maximum limit of six pokemon.
const renderTeam = (pokemons) => {
pokemons.forEach((pokemon) => {
let pokemonTeamImg = document.createElement("img");
pokemonTeamImg.src = pokemon.sprite;
pokemonTeamImg.alt = pokemon.id;
let displayName = document.createElement("h3");
displayName.textContent = pokemon.name;
})
In this function we took in the array of pokemon as an argument and return keys of name and images. Creating HTML elements for each pokemon. It would iterate through the array, creating an image element for each set of keys, and attaching the values of the source image and the id. These new elements would be displayed to the side containing the names and a thumbnail of the pokemons and also attaching an id to them to refer to later when being clicked.
teamDiv.append(teamMember);
teamMember.addEventListener("mouseover", () => {
teamMember.style.transform = "scale(1.1)";
});
teamMember.addEventListener("mouseleave", () => {
teamMember.style.transform = "scale(1)";
});
pokemonTeamImg.addEventListener("click", () => {
pokemonDetailImage.src = pokemon.img;
console.log(pokemon.name);
pokemonDetailName.textContent = pokemon.name;
In these next lines of code we added eventlisteners that enlarged the elements to display the selection of the element as a user mouses over them and returning them to their default size when the mouse is no longer over them. We also included an event listener that when a user clicks on the image of the pokemon it selects it and displays it in the main page along with its corresponding name based on it’s name and id.
I learned a lot more about API’s and creating elements and appending data from an API to them in a web page. There had been an initial challenge with the default API which had only displayed a name, ID number, and a url that only pointed to a more detailed array of keys. I had created an pokedex number variable and attached it to the image url’s but this clever work around, created issues when trying to refer back to the images and in trying to avoid creating more fetch requests didn’t create a feasible solution.
I hope to revisit this project and fill in the gaps with new knowledge and techniques, and hopefully realize the initial vision I had when I had initially started brainstorming this project.
Top comments (0)