Photo by Brett Jordan on Unsplash

The DOM (Document Object Model) is a JavaScript object that represents the HTML of your page. It also lets you interact from JavaScript with the elements on your page. You can read and change text, add and delete items, and a lot more using JavaScript.

You look at the DOM anytime you use developer tools to inspect elements. This comes in super handy when you are trying to make edits to your CSS and testing JavaScript functions and logging them to the console. I found myself using the DOM quite a bit in implementing my very first API in a web application using the PokeAPI and using it to display certain details in my application.

API

The Pokemon API is a RESTful API which means it's a stateless, client-server communication model. This is a very simple and straightforward API so perfect for beginners like myself to get their feet wet. I’ll be honest When learning about JavaScript and Promises, functions and map methods I didn’t really understand why I was learning these things. That is until I finally dove into this project. The data on Pokemon is pretty straightforward forward so it makes it much easier to understand what I need to do to get to certain key/value pairs. This API is a web API that allowed me to use a fetch request by http, and using an endpoint as you see below of {“pokemonName”}.

const getType = (pokemonName) => { return fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`) .then((res) => res.json()) .then((data) => data.types.map(type => type.type.name)) .catch(error => console.log(`Failed to fetch type for ${pokemonName}:`, error)); };

The data inside that endpoint had many things I could extract but in this snippet of code, I was using it to access the type of Pokemon. I was using multiple .then() methods to perform sequential operations, one after another in the Promise chain and ending with a .catch() method in case I had an error like a Pokemon that had no type. All the practice finally made sense when putting this into action!

Document.querySelector( )

This method comes in clutch to select single CSS selector elements. For example:

Pikachu const pokemon = document.querySelector("pokemon-name")

If I wanted to select the div with the class selector “pokemon-name”, I would insert the name of the class into that document.querySelector within the parentheses and quotes. I could also select the container element (div), but if there are other div’s that come before that div, then if your intention is to select Pikachu, that won’t happen because another div came first and this method will only select the first item with the selector you are searching for. That is why it’s good practice to identify what you want to manipulate. You can also use document.getElementById( ) to… you guessed it, select an element by the ID.

I used these methods to help sort through the Pokemon cards I created from A through Z.

const sortPokemonAZ = (selector) => { const sortCards = (container) => { const cards = Array.from(container.getElementsByClassName('pokemonCard')); cards.sort((cardA, cardB) => { const nameA = cardA.querySelector('h4').textContent.toUpperCase(); const nameB = cardB.querySelector('h4').textContent.toUpperCase(); return nameA < nameB ? -1 : (nameA > nameB ? 1 : 0); });

cards.forEach(card => container.appendChild(card)); };

sortCards(document.querySelector(selector)); };

document.getElementById('sort-button-az-collection').addEventListener('click', () => sortPokemonAZ('.collection-border'));

What this function does is sortPokemonAZ takes a selector as an argument, which I use to identify names of Pokemon I’ve assigned to a certain class. The cards are inside of an html div I’ve deemed as a ‘container’ and so I made a constant variable that takes the certain container I want as an argument. I made this part of the code because I had two separate sections on my webapp that individually would sort the cards in those two separate categories.

Another cool JavaScript method I learned was the .sort method. As you can see in the return the nameA is compared to the nameB and if the nameA comes before (<) nameB in the alphabet, it is assigned a number of -1. if they are the same, it is assigned a number of 0, and if it comes after nameB it is assigned -1. This is applied to all the cards, and that is how I used the sort method to alphabetize the pokemon cards.

This wasn’t perfect or pretty but it helped me understand HOW to work with a basic API and use some advanced JavaScript code to make toggle button for alphabetizing cards, and fetching data from an API as well as using event listeners and Dom manipulation. This was a fun learning experience that I plan on getting better and better at using and designing. Here is my github page for my Pokemon API Web App. Let me know if you have any questions on my socials! Until next time, happy coding!