My Rick and Morty Search App: A Retrospective

When I look back at the first phase of my software engineering journey, I am proud of myself for learning a new skillset and honing some of my existing skills as a software developer. When reviewing all the topics that were covered during this phase, I felt confident when it was time to showcase what I have learned up to this point through my end of phase project. With that, I have created a search web application that utilizes the Rick and Morty API to search for specific character's of the Adult Swim series.

My goal for this article is to walk through my thought process for this project and also highlight key concepts from the first phase of the program and show how the "three pillars of web programming" come together to create my final project.

The Decision

For me, one of the hardest parts of this project was trying to pick where I should start. There are a lot of free, open-source application program interfaces (API's) out there for the public to use but in the beginning I was struggling to find something that was interesting and matched my skillset as a beginner programmer. In looking through the list of potential APIs to use, I came across the Rick and Morty API. This peaked my interest since I am a fan of the series and I felt that I could make an engaging web application that API data provided.

The Review

According to the website, "this is a RESTful API in which the base url contains information about all available API's resources. All requests are GET requests and go over HTTPS and all responses will be return data in JSON."

Because of this, when I created the fetch request in my application, I didn't need to create an object with a set of configuration parameters to get the type of data in the response from the API call.

const configureObject = {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
   },
};

Since the Rick and Morty API has this functionality already built into it, I just needed to choose which resource I wanted to use to complete my fetch request. There are three resources available when we use the Rick and Morty API:

1. Characters: https://rickandmortyapi.com/api/character
2. Locations: https://rickandmortyapi.com/api/location
3. Episodes: https://rickandmortyapi.com/api/episode

I knew I wanted to use the character resource but I also knew I didn't want to just list out all the characters at once; I wanted to be able to search through the characters based off of certain criteria. Luckily, the documentation mentioned there is a way to filter through characters by adding search parameters to the URL:

https://rickandmortyapi.com/api/character/?

The Setup

Now that I had the resource I wanted, it was time for me to start building out my fetch call with the parameters I wanted to use. I felt the best way to do this was by creating a search form where the user could type in the character's name and add additional parameters of either the character's status (alive, dead, unknown) or the character's gender (male, female, genderless, unknown) or both.

To do this, I started by creating a form in my HTML file along with adding the constant options for the different parameters. This rendered my search box and the drop downs for status and gender in my index.html file.

The Functionality

Once I had my form created, I now had to add my JavaScript to incorporate functionality into my application.

By creating a form in my HTML, I was able to use an event listener to submit the information from my search. The first step was to capture the search value and the values from my drop down's and use them in my fetch call to return the appropriate data. After that I needed to display the results of my call to the DOM.

The DOM

To display the results of my fetch call, I wanted to create a table on the DOM to show the character's name, and a button called "Character Information". Once the button was clicked, I wanted the table to populate with the character's avatar, last known location, origin and number of episodes that character has been in since the series started.

The Final Step

The final piece of my application was to add one more event listener to my table. For every piece of information displayed once the user clicks on the "Character Information Button" I wanted that information to highlight orange when the user hovered over it. The highlight is per piece and I set a timeout for this even to last about 5 seconds long.

Future Functionality

• Add a load more button to load more characters
• Change layout from a table to a grid
• Randomize return of characters from search

References

Rick and Morty API Documentation