Javascript Superheroes Project

Project requirements

For this first project at Flatiron School, we were required to build a single page application using HTML, CSS, and Javascript that accesses data from a public API using all the concepts to interact between the client and the API, this has to be handled asynchronously (Fetch request) and use JSON as the communication format. Also, we are required to have some interactivity and incorporate at least three separate even listeners.

About the project

My project is a Superheroes application that shows a default list of heroes, additionally, you can click on one of the three buttons and filter all the superheroes by alignment of good, bad, or neutral. Also, The page contains a search bar where you can type any name or letter and it returns new data of heroes. Finally, I add a reset button to return the search to the default list. View my REPO here.

When the superheroes page loads, it shows a container with heroes that the user can filter with the buttons to good, bad, or neutral superheroes. Also, if you type any letter or name on the search bar it shows a whole new container with that information provided and can be applied the same filter buttons for that new data. finally, the search and filter can be reset with the last button.

At first, I used DomContentLoader eventListener to make a Fetch request and render all the Superheroes when the page loads it prints image, name, gender, publisher, and alignment. After this, I called the API and I made the default search as “%20” showing all the Superheros names with space between them. This solves a lot of problems at the time of printing the Superheroes in the container.

Finally, to create the container and display all the data and images of the Superheroes I used querySelector to return the first element and create individual elements inside the container Iterating over the superheroes Using Map and invoking a callback function to pass individual objects of heroes to create elements to add to the container.