Cats are everywhere on the internet, and for good reasons. People love those little furry fluff balls and their weird behaviors. Perhaps you’re looking for ways to add images of different cats on your website, or maybe you’ve stumbled upon TheCatAPI, our public API and are looking for a guide on how to use it – either way you’ve come to the right place, here is a guide on how you can get started using TheCatAPI.
The Essentials
To have cats playing on your webpage, we will have to create an HTML file, a CSS file, and a JavaScript file named the following.
- index.html,
- main.css, and
- main.js
You will have to insert the code inside each of these files to bring the cats to your webpage. This article has all the code you need for the web page to work. Simply copy and paste the code shown in the sections below into the relevant files.
index.html
The Index.html will store all the HTML tags that are required to create a page which will display the Cat information. Basically, this file will have the layout of your website. So, without further ado, let’s create a header section of the index.html file to store all the meta information.
<!-- Basic HTML components -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>The Cat Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>Now, let’s create the body section. The body section lies within <body>…</body> tags. Inside the tags, we will create two <div> containers – one to display the picture of cats and the other to display the information about their breed.
<!-- Basic HTML components -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>The Cat Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<!--Div container for the picture of cats -->
<div>
<img id="cat_image"></img>
</div>
<!--Div container for the information about their breed -->
<div >
<h4 id="breed_name"></h4>
Wiki Link: <a id="wiki_link" target="_blank"></a> <br />
Breed Characteristics: <div id="breed_json"></div>
</div>
</body>We have a simple <img> tag within the first <div> tag for displaying cat pictures. Similarly, we have three sections for the second <div> tag that displays information about cats.
- breed_name, for the name of the breed,
- wiki_link, for the wiki link for more information, and
- breed_json for the characteristics of the cat
main.js
Now that we have created the layout for our page, let’s work on the logic that will pull the cats available in TheCatAPI into our page.
Firstly, let’s define the variables that will let us access TheCatAPI. For this purpose, we will need two variables – one for the API URL and the other for the API Key.
const url = `https://api.thecatapi.com/v1/breeds`;
const api_key = "Replace This Text with your API Key";Note that API Key is a secret key unique for each person who wants to use TheCatAPI. To get your API Key, go to TheCatAPI.com and sign up for free. Once you have successfully signed up, you can request to email your API key.
Once you have defined the variables, you will then require:
- A variable to store the breeds.
- A function to select a random breed.
- A function to display the image and the information for the breed.
- A fetch function to retire data from the API
Let’s create each of them in our main.js file.
const url = `https://api.thecatapi.com/v1/breeds`;
const api_key = "Replace This Text with your API Key";
// a variable to store the information about the breeds
let storedBreeds = [];
// a function to select a random breed
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// a function to show images and information of the breeds
function showCatImageAndInformation(index) {
// This will display the image of the cat
document.getElementById("cat_image").src = storedBreeds[index].image.url;
// This will get the breed name
document.getElementById("breed_name").innerHTML = storedBreeds[index].name;
// This will get the wiki link
document.getElementById("wiki_link").href = storedBreeds[index].wikipedia_url;
document.getElementById("wiki_link").innerHTML =
storedBreeds[index].wikipedia_url;
// This will get the characteristics of the cat
document.getElementById("breed_json").textContent =
storedBreeds[index].temperament;
}
// a function to retrieve data from the API
fetch(url, {
headers: {
"x-api-key": api_key,
},
})
.then((response) => {
return response.json();
})
.then((data) => {
// Storing the retrieved data from the API in our variable
storedBreeds = data;
// Using the random function to select a specific breed. Then extracting information from that breed
showCatImageAndInformation(getRandomInt(0, storedBreeds.length - 1));
})
.catch(function (error) {
console.log(error);
});If you copy the above code into your main.js file, your website will start working. But your website could look ancient. So, to resolve that, we will design the webpage to make it look prettier, and this is where the main.css file comes into play.
main.css
The main.css file will store all the design codes necessary to make the webpage look prettier. While you can modify the code in this file to your need, we will proceed with the basic design for your webpage.
.cat_image {
margin: 0% 25% 0%;
width: 50%;
height: 25%;
border-radius: 10px;
border: 5px double gray;
}
.cat_information {
display: grid;
justify-content: center;
}In the main.css file, we have created two classes:
- cat_image for designing the layout of the cat images, and
- cat_information for designing the structure of the information about the cats.
After you have copied the code above into the main.css file, we will go back to the index.html file to add the CSS classes we created into the body section.
After modification, the body section of index.html will look like the below.
<body>
<!-- Cat Image -->
<div>
<img id="cat_image" class="img"></img>
</div>
<!-- Cat Information -->
<div class="cat_information">
<h4 id="breed_name"></h4>
Wiki Link: <a id="wiki_link" target="_blank"></a> <br />
Breed Characteristics:
<div id="breed_json"></div>
</div>
</body>After completing the step above, rerun your webpage and enjoy browsing the cat images on your website.
The steps above only show you a minimal ability of TheCatAPI. Visit our documentation to learn more about what else you could do with the API, visit our documentation.
Uses of Cat API
CatsAPI can be used for a plethora of things. We have listed a few of them below:
- To create the Cat Encyclopedia
Utilizing the API, you can display a bunch of cats and their information to your audience. You can create a cat encyclopedia that everyone will love visiting and learning about cats. - A cat discussion forum
Post various cat pics on your cat forum and have creative discussions about the characteristics of a specific cat. Then, let everyone decide which cat reigns supreme among all the cats and which is the most adorable cat in the world. - Create a stress-relieve application
Using the API, you can create a random cat image generator that displays pictures of cats. The viewer of your page can scroll through various cat pictures and relieve their stress. Here is an example of a website that does this perfectly. - A Cat adoption center
Using the API, you can complement a Cat adoption center by providing insight into the cat breed. Any person who wants to adopt a cat can then make an informed decision about the cat they are looking to adopt. Here is an example of a website that has created tinder for cats.
Disclaimer: TheCatAPI will not be responsible for the emotional bereavement caused by seeing a cute cat and then never seeing it again. Use the API at your own risk.
For dog lovers?
Dog lovers out there, don’t hate us just yet. We also have thedogapi.com for the dog people out there.
We preferred cats because, apparently, the internet likes cats more than dogs. Data back this statement up. Cat videos have generated over 1.6 billion views, while dog videos have only generated 1 billion views.
Having said that, you can use the DogAPI to insert dog pictures into your website. It is also able to show a variety of dogs, their breeds, and their facts. Following the steps shown above will work for TheDogAPI too.
Want more information on how you can use TheCatAPI and TheDogAPI? Reach out to ThatAPICompany for a consultation.
