30 Days Of JavaScript

Day 27: Making A PokeDex: Day 2

Lesson 4: PokeDex 8

Finally let's go back and add the weight and types to the card.

In addCard we just need to set the contents of the types and weight divs that are already there.

Add this code above newCard.id = pokemon.id; in addCard:

1const typesDiv = newCard.querySelector(".types");
2const types = pokemon.types.map((type) => type.type.name);
3typesDiv.innerText = types.join(", ");
5const weightDiv = newCard.querySelector(".weight");
6weightDiv.innerText = `${pokemon.weight} kg`;

The only tricky bit here is creating the string for the types. The types array looks like this:

2  "types": [
3    {
4      "slot": 1,
5      "type": {
6        "name": "grass:
7        "url": "https://pokeapi.co/api/v2/type/12/",
8      }
9    },
10    {
11      "slot": 2,
12      "type": {
13        "name": "poison:
14        "url": "https://pokeapi.co/api/v2/type/4/",
15      }
16    }
17  ]

So we use a .map() to create the types array that looks like this ["grass", "poison"] and then we just .join() to turn that into a string of grass, poison that we then add to the DOM.


Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co