Accessing data from an API to create virtual trading cards
A visual introduction into the Rick and Morty universe.
The best way to start something is to pick a project you’re passionate about and get going. I love Rick and Morty, and I was just starting out on my web development journey when I got the idea to access the Rick and Morty API to create “trading cards” as a way to both express my creativity and hone my JavaScript skills.
Prior to this project, I had never pulled data from an API. My main goals for this project were:
1. Properly fetch API data. (Having tried and failed multiple times before)
2. Utilize the data to fill my webpage with information.
3. Create and add dynamic cards by using HTML, CSS, and JavaScript.
To properly fetch API data, you need to “fetch” it, which uses JavaScript to call out to the API url and returns data. This may sound simple, and it is simple, but it can be very confusing and difficult if you’re not familiar with the domain. A lot of API databases require a key that you need to request. Once you have a key, you need to include it in the API request. After you get access to the database, the world is at your fingertips!
I used the Rick and Morty API to show character images, names, statuses, and the last time they were seen in the show. It saves so much time using the API data as opposed to hard coding the statistics for all 490+ characters. Can you imagine? Thankfully, after a few attempts, I was able to get everything I needed from the API.
To create the cards, I used JavaScript to create the basic card structure, and CSS to style and animate it. The colors of the show are very bright, almost neon, but I wanted to use them so I made the background black to avoid blinding anyone visiting the page. Each card has a front and a back. The front shows the character’s picture and name. When you click on a card, it flips over and shows the character’s “stats” (for example, where they were last seen).
In addition to creating cards, I implemented a way to add even more cards to the page. By clicking on the big button on the page and adding in a valid number in the prompt, a new character card is added to the list. This page has the capability to show all 493 characters, if the user wanted to add them.
I encourage you to check out the site, and interact with it. Major bonus if you’re a fan of the show as well.
Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to the Trading Cards final project in the DGM 1600 Course and representative of the skills learned.
