Building a Simple Cat Grid Web Page with TheCatAPI

by

🐱 Building a Simple “Cat Grid” Web Page with TheCatAPI

Who doesn’t love cats? In this tutorial, we’ll walk through how to build a simple HTML page that fetches adorable cat photos from TheCatAPI and displays them in a grid layout.

By the end, you’ll have a page that looks like a mini Instagram feed for cats – and you’ll learn the basics of working with APIs, JavaScript’s fetch() method, and dynamic DOM manipulation.

📄 The Code Overview

Here’s the full HTML code for our page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Cat Grid Example</title>
  <style>
    /* Simple styling for the grid */
    .imgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      padding: 20px;
    }
    .imgrid img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="maincontent">
    <div id="grid" class="imgrid"></div>
  </div>

<script>
  // 1️⃣ API URL & key setup
  const url = `https://api.thecatapi.com/v1/images/search?limit=20`;
  const api_key = "YOUR_API_KEY_HERE"; // replace with your API key from TheCatAPI

  // 2️⃣ Fetch cat images from the API
  fetch(url, {
    headers: { 'x-api-key': api_key }
  })
    .then(response => response.json())
    .then(data => {
      // 3️⃣ Loop through each cat image object
      data.forEach(imageData => {
        // Create an image element
        let image = document.createElement('img');
        image.src = imageData.url;

        // Create a div wrapper for the image
        let gridCell = document.createElement('div');
        gridCell.appendChild(image);

        // Add the cell to the grid container
        document.getElementById('grid').appendChild(gridCell);
      });
    })
    .catch(error => console.log(error));
</script>
</body>
</html>

🔍 How It Works – Step by Step

1️⃣ HTML Structure
The HTML is simple:

  • A <div> with the ID grid acts as the container for all our cat photos.
  • We’ll dynamically add images to this grid using JavaScript.

2️⃣ Connecting to TheCatAPI
We call the Cat API using this URL:

const url = `https://api.thecatapi.com/v1/images/search?limit=20`;

The limit=20 means we’ll request 20 random cat images.

We also include an API key (free from thecatapi.com):

headers: { 'x-api-key': api_key }

3️⃣ Fetching Data with JavaScript
We use the fetch() method:

fetch(url, { headers: { 'x-api-key': api_key } })
  .then(response => response.json())

This sends a GET request to the API and converts the response into JSON.

4️⃣ Looping Through Images
The API returns an array of image objects, each containing a url property. We loop through them:

data.forEach(imageData => {
  let image = document.createElement('img');
  image.src = imageData.url;
  ...
});

5️⃣ Building the Grid
For each image:

  • We create a <div> to hold the <img>.
  • We append the image to the grid container (#grid).

6️⃣ Adding Simple CSS
We use CSS Grid for layout:

.imgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

This makes our cats display neatly, adjusting for screen size.

🚀 Final Thoughts

This little project is:
✅ Beginner-friendly – no frameworks required.
✅ Practical – teaches you how to work with APIs and dynamically update the DOM.
✅ Fun – because it’s full of cute cats!