Pokémon Typechart

Project URL: https://typechart.glitch.me/

Typechart

A simple Pokémon typechart to display type effectiveness and weaknesses for the modern gen Pokémon series.


I had trouble understanding some typecharts for pokemon or I found them to not look the way I wanted.
This typechart looks nice (to me anyways) and has a title attribute for each of the cells in the table to tell in plain english Ground is super effective against Poison so that it’s harder to misread or interpret the table.

I also tried to make the table follow accessibility rules for html and html tables as best as I understood, hopefully they work.

The more interesting part about this is how the table was made, if you look at the source for it you’ll see a few files related to generating the table from an ascii table.
Since the js code just generates html with no interactivity, the js isn’t normally loaded unless I need to change something with the html. Then I copy/paste the html it generated and disable the script again.

I think I can still improve how it works, looks, and a few other things, but for now I’m happy with how it turned out so far.

2 Likes