A red web app screen representing a Rotomdex with blue eyes, a blue zig-zagged patterned screen that has four white rectangles on it to display data.

Alolan Rotomdex

Date: December 14, 2019

See the Pen PokéAPI Rotomdex by Ethan McElvaney (@ewmcelvaney) on CodePen.

Note: If you are on a mobile device, it will work better if you go to this project’s page on CodePen and flip your device sideways.

What I Did

  • Coded a web app that pulls Pokémon from an online database
  • Designed a Pokédex interface for the web application to make
  • Tools Used: HTML, CSS, JavaScript, Adobe Illustrator

The Need: To Learn How to Use Application Programming Interfaces

While I was learning web coding in graduate school, I needed to make an app in JavaScript. This app would pull information from an API database and then display it on a web page.

When I found out there was a Pokémon API, I decided what I wanted to do.

The Solution: A Pokédex Based on the Seventh Generation Design

The web app I made pulls up the name, Pokédex number, and the battle statistics of different Pokémon species. All the user needs to do is enter the number or name of the Pokémon in the search box.

This web app is based on the Rotomdex from Pokémon Sun and Moon. I wrote the error messages to reference how the Rotomdex speaks to the player in these games.

The Process

Originally, I was going to make a Galar region Pokédex since Pokémon Sword and Shield had just come out. I even drew a concept sketch of this idea.

A sketch of an idea for a web application drawn in black ink with notes about ideas for pulling data from the API.

However, the API did not have this information at the time. I didn’t have time to learn how to add it, so I based my design on the Rotomdex from Pokémon Sun and Moon.

After illustrating the Rotomdex in Adobe Illustrator, I coded the application in CodePen.