Front-end Developer at Realtruck.com, Organizer of Orlando’s Project Code Experience Meetup, Co-Host of the Tech Jr Podcast, and all-around Junior Developer Advocate.
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.
James is a JavaScript Developer, Speaker, and Teacher with a passion for teaching developers through content. He is a full-time Technical Content Creator with years of experience in Software Developme
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.
James is a JavaScript Developer, Speaker, and Teacher with a passion for teaching developers through content. He is a full-time Technical Content Creator with years of experience in Software Developme
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=150you 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>.pngThis 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!
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!
I look forward to building this and perhaps a v2 in future too! Thanks for the post
Awesome! Yes, I'm definitely planning on a part 2!