DEV Community

Cover image for Build a Pokedex with Vanilla JavaScript

Build a Pokedex with Vanilla JavaScript

James Q Quick on September 03, 2019

Front-end frameworks like React get lots of attention, but you don't always need one. In this article, I'm going to combine my love for two thi...
Collapse
 
leewarrickjr profile image
Lee Warrick

Great article!

If I might make a suggestion...

It might not a good idea to do 150 api calls all at once! I could see quickly hitting the rate limit.

If you used https://pokeapi.co/api/v2/pokemon?limit=150 you could get the names for the 150 pokemon, and for the images you could use the index from the returned urls and plug that into: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/<index number>.png

This wouldn't net you all the types like you have on your example in codepen, but might save you from getting rate-limited from the API.

You could also try attaching the calls to a scroll event so you're only pulling the next few pokemon as a user scrolls down the page. The API supports pagination and even gives you the "next" url to call for the next group of pokemon.

In any case, keep up the good work!

Collapse
 
jamesqquick profile image
James Q Quick

Wow, really great feedback! I love the thoughts. For the 150 calls, yes I agree it's a little excessive. I was in fact making the request for each Pokemon to get more detailed info, but as you pointed out, I'm missing the type info. I'm thinking I might create a part two and optimize this with a pokemon detail page for further detail.

Thanks again for the commend and suggestions!

Collapse
 
fsuffieldcode profile image
Fabian

I look forward to building this and perhaps a v2 in future too! Thanks for the post

Thread Thread
 
jamesqquick profile image
James Q Quick

Awesome! Yes, I'm definitely planning on a part 2!

Collapse
 
arrolin profile image
G M Ashiqur Rahaman

Hey James Yesterday i saw your Youtube video about this and this is Great. I learned so much. By the way i'm kinda noob in JS world. Still learning. Also learn and clear my brain about fetch, promises concept from your other videos . Keep Going 👍

Collapse
 
jamesqquick profile image
James Q Quick

Awesome, so glad that you enjoyed it and the video helped as well. These are the comments I love to see :)