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(", ");
4
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:

1{
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  ]
18}

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.