30 Days Of JavaScript

Day 28: PokeDex Day 3

Lesson 3: PokeDex 11

The problem we have now is that the labels look rubbish.

We have a couple of options, we could use the built in string methods to change casing and remove dashes ... or we could just create a look up.

The easier path is to create a lookup and in this case it's actually pretty easy. Since we know there are, at most, 6 stats for a Pokemon we can just make a little object that maps special-attack to Special Attack

Add this near the top of your JavaScript:

1const POKEMON_STATS = {
2  hp: "HP",
3  attack: "Attack",
4  defense: "Defense",
5  "special-attack": "Special Attach",
6  "special-defense": "Special Defense",
7  speed: "Speed",

It's common in the JavaScript world to use uppercase for constants like this.

And then modify our .reduce() to use the look up value.

1const statsData = pokemon.stats.reduce(
2  (accumulator, stat) => {
3    accumulator.names.push(POKEMON_STATS[stat.stat.name]);
4    accumulator.values.push(stat.base_stat);
5    return accumulator;
6  },
7  { names: [], values: [] }

Now when you open a modal you'll see nicely formatted stat labels across the bottom of the chart.


Go Pro?

If you upgraded to pro, sign in here

  • About
  • Blog
  • Privacy
Looking to email me? You can get me on my first name at allthecode.co