In this blog post, I’m sharing details behind the creation of my latest web app: Pokémon Color Picker! Pokémon Color Picker is a simple, vanilla JS web application that retrieves data about a random Pokémon based off a user specified color.
My Motivation
I am a child of the 90s. One of the first games I owned on my red Gameboy Pocket was Pokémon Yellow. I loved that game, and my love of it led to my love of the Pokémon TV series. Now as a parent, I get to watch the joy Pokémon brings to my children.
I was recently reminded of the existence of PokéAPI. While poking around in the docs, I noticed an endpoint for retrieving Pokémon colors. Then I got to thinking it would be a neat idea to combine that endpoint with a color wheel for selecting random Pokémon based off their colors.
The main users for this application are my children. They were very intrigued with the app and love seeing what random Pokémon they’re greeted with.
The Implementation
The app was fairly simple to implement. The greatest challenge I encountered was getting the Pokémon balls to align in the order I wanted. That took a bit of tweaking. I found this post of StackOverflow on drawing elements along a circle particularly useful.
The Pokéballs are single div drawings. I recently created a tutorial on how to draw a Pokéball with a single div and was happy to recycle the CSS from that project.
Data Source
As I mentioned previously, this application is powered by the PokeAPI. I leverage the following endpoints from the API:
- Pokémon Colors:
GET https://pokeapi.co/api/v2/pokemon-color/{id or name}/ - Pokémon:
GET https://pokeapi.co/api/v2/pokemon/{id or name}/
Future Improvements
If I revisit the project, additional improvements or enhancements I’d like to make include:
- Displaying the Pokémon stats
- Improving the appearance of the app (it looks a little bland)
Lessons Learned | Final Thoughts
I enjoyed working on this little web app. It was a great chance to finally build something with the PokeAPI. I also had the opportunity to use some new CSS features including Dynamic viewport units, text-wrap: balance, and nested CSS.
I am most excited about the introduction of Dynamic viewport units. I usually set the height of the body element to 100vh. This looks great on the desktop, but when I view the website on a mobile device thanks to the navigation bar the 100vh causes scrolling. Dynamic viewport units fixes this problem.
