Marvel API




Intro

The Marvel API project is a list of some of my favorite characters from the Marvel universe. Each character gets their own page with information about them. What makes this project unique is that the data being showed is pulled from the Marvel API. In this article, how I was able to pull the data from their api and show it on this site.

Getting Started

The first step was to create an account on their website and get my API key. Once this was done, I was read through the doucmentation and decided on what info I could display that was being provided from the API. The main info I was able to get was a character's name, description, and a profile picture. I could also pull a list of comic book covers and their titles that the specific character appeared in.

Pulling The Data

Now that I knew what data I was going to get I had to figure out the best way to retrieve that data. I figure that the fetch API would be the best way to do that. The fetch API was able to pull the data that I needed I then would navigate through the array to find the data that I needed.

Running Into Issues

One of the problems that I had ran into was when displaying the comic book covers it would display all of the covers at once. Instead, I just wanted the user see four at a time and allow them to click on a button to display four more if they wanted.

The Solution

Since the comic book covers were being dynamically created and I only wanted to show the first four images upon the page loading I figure that some jQuery would be the best to do this. The line of jQuery code that I came up with the display only the first four items was this.

          $('.cover').slice(4,data.data.results.length).css('display', 'none');
        
Then I wrote a function that would show the next four items from the array.
          $(document).on('click','#loadMore',function(){
             $('#loadMore').click(function(e) {
             e.preventDefault();
              $('.cover:hidden').slice(0,4).fadeIn('slow');
              if($('.cover:hidden').length == 0){
                $('#loadMore').text('No More Content').addClass("noContent")
              }
             });
          });
        
The result ended up getting exactly what I had wanted. This only should the next four items from the array and allows the user to see more if they want.

Takeaways

This project was a lot of fun to make. It allowed me to push my skills and learn something new. Learning to work with an API was a good skill to develop because I know that in the future I may need to use this skill for future projects.