Childhood Development: Recreating a Piece of my Youth with jQuery
As a child growing up in the 90’s the world was taken by storm by Pokémon. It was absolutely ubiquitous — a singular phenomenon that inspired the imagination of an entire generation of children, myself included. From the TV series, collectible card game, and video games for the original Game Boy, I lived, breathed, and simply ran on Pokémon. It was literally the first thing I thought of when I woke up in the morning and at night before going to sleep. And if you thought it stopped there, I can assure you that yes, it even followed me into my dreams.
Over twenty years later the franchise is still going strong, although I’d be lying if I said it still maintained its seemingly unyielding grasp on me the way it used to. While video games are still a passion I hold dear, the franchise continues to cater to a younger audience, and it should. It’s a great way for children to be introduced to RPGs (role-playing games for the uninitiated) and even turn-based combat systems. But for me, Pokémon was largely just a somewhat distant, but ever fond memory.
Enter General Assembly, the coding bootcamp I’m currently enrolled in. At the end of our first unit we were tasked with putting together a big project to show off the skills we had learned so far. The assignment was to build an application using HTML, CSS, JavaScript and jQuery. Most importantly it had to use AJAX to make a request to an external data source and manipulate the DOM. As I read over the requirements for this project and screened the list of APIs our instructors had provided, my eyes immediately transfixed on it. PokéAPI. In a matter of seconds, I was 7 years old again and knew exactly what my first project was: recreate the Pokédex for the Kanto region featured in the original games.
The overall goal of my HTML and CSS would be to emulate this device complete with its retro aesthetic. When sitting down to accomplish this, I pulled up numerous reference photos from the old cartoon series and video games and got to work. The device includes a screen that is able to be toggled on and off, and can also display the desired Pokémon’s information by either form submission or button press. Utilizing the API I was able to pull in the Pokémon’s name, Pokédex number, classification, and flavor text. I then used jQuery to change elements within my HTML and CSS within the DOM to update the information present on the device’s screen.
When styling the device, I wanted to challenge myself and use as much CSS as possible. The only image files used were the sprites for each Pokémon, as well as a small border that appears on the screen above the Pokémon’s flavor text. This created numerous issues throughout the course of development, but I’m happy with what I was able to accomplish despite the limitations of the medium.
Another hurdle was the number of buttons featured on the original design. I had more than I needed when it came to functionality, and ultimately decided to leave some in there just for authenticity’s sake. As such, I took what buttons I needed and repurposed them to make sense within the context of my app. The directional pad was reworked to cycle through the Pokémon to display, ranging from 1 to 150 per the original Kanto Pokédex, and the black circular button was retooled as an on/off switch. This on/off button features an on-click event that I’m particularly proud of, as I designed it to emulate the CRT television monitors used at the time. I also retooled the smaller green screen to act as a form that can be submitted with a number value and submitted via the enter key.
Overall I’m extremely satisfied with how the app came out. I feel as though I accomplished exactly what I set out to build, and had a great time revisiting a franchise that was such a large part of my childhood. While it was an uphill battle to get my styling and JavaScript logic working the way I wanted it to, it felt unbelievably rewarding to triumph at the end. If there’s one takeaway when it comes to the bugs that pop up along the way, well… Gotta Catch ’em All.
