DEV Community

Santos
Santos

Posted on

Front-end Project

I had an assignment for my bootcamp to create a front end involving DOM manipulation and an API the result of this project involved many hours of trying to figure out how the API I chose worked, and how to not make a complete abomination of CSS.

The API I used was from https://www.igdb.com/api. I chose this because it appeared to have a large database involving video games and would be fun to work with. It was absolutely not fun to work with. The API involves creating a and linking a https://www.twitch.tv to obtain a Client ID and a Client Secret. I then needed to make a POST request through Twitch to obtain a token to finally be able to use the API. Now it was time to figure out this API. This bootcamp taught me how to fetch data from APIs with the use of GET and Keys. Unfortunately for me, this API I chose only used POST and required the use of Headers and the Body to use it. For someone who had only learned how to use APIs for a few days, this was a struggle to figure out. The IGDB documentation is extremely hard for to figure out for someone new to APIs (like me). There weren't that many good examples of how to setup my JavaScript and how to get the information I wanted. Thankfully with the help of my instructor, we were able to get some data from the API to be on my HTML page.

I could probably go on for many paragraphs about the struggle and frustration this API caused me, but I'll stop so I can just show a screenshot of one of the pages I created.

Image description

This is probably my favorite page just because of how fun it is to see how many different games there are in this database. I used the random number function from 1 to 25,000 to display a random game every time the page is refreshed. The API has over 100,000 games, but I realized the higher number it chose, the less likely the database had a cover art or even a description of the game.

Anyway, this was a cool project to work on, and if anyone else out there has had any experience with the API I used I'd love to hear about it!

Top comments (0)