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?

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