Display Random Cat Image from an API
I found a fun free API that generates a random cat image or gif, and in this post, I’m going to walk through how I used this API to display a random image in my application, and how I added a button that a user can click to load another random image. This is relatively simple, but there are some tricky bits, so let’s get to it!
We’ll be using the free random generator available on thecatapi.com , which is a great website that actually has a lot more data that you can use if you want to dive a little deeper. For my purpose, the single random image is enough. If you click on the menu/documentation, you’ll find a quickstart guide that gives you the endpoint to generate our random image. If you visit that url, you’ll end up on a page that displays something like the example below.
This is the json data for the image we want to display, and you can see that the url key points to a .jpg file. This is what we are going to grab and display. Note that if you reload this page, a new file with a different name appears. We will be utilizing this to load new images at the click of a button later in this post.
Step One
In my html file for this project, I created an <img> tag with an id that I can use as a reference, and created a <button> tag, also with an id and some text to display on the actual button. I’ve also wrapped both of these in a <div> tag, that way I can treat this as a section of my application and style it all together in my css file later on.
Step Two
In my javaScript file, I created two functions- one to handle fetching and displaying the image, and another to handle the clicking of my new button.
In the first function, I am setting a variable equal to the image tag in my html file, pulling the data from the api using a fetch call, and then pushing the specific part of the data that I want into my image tag. Notice that I’ve written “json[0].url.” This is because the piece if the json data that I want is contained in the ‘url’ key, and even though there is only one element at this endpoint, I still need to specify the index for the part that I am accessing, which is 0.
Then in the second function, I am just setting a variable equal to my html button, and attaching and event listener to it that will invoke the previous function, displaying a new image.
Step Three
The third and final step is simply to call the functions I’ve just written. Since I want there to be an image on the page immediately when the page loads, I’ll add an event listener a the top of my javaScript file that will call my fetchCatImage() function when the DOM loads. Additionally, I’ll want to add a call to my btnClick() function, since this function is an event listening function itself. In other words, we’ll want the DOM to be “listening” for our button click event as soon as it loads.
That’s It!
And there you have it. This is a relatively simple way to create a fun feature to display some random cute cats at the click of a button. I hope you’ve found this useful, and happy coding!
