Bless API Book

Cat Facts API

Animals
Beginner

Overview

Free API for random facts about cats

Integration Guide

Step 1: Understanding the API

The Cat Facts API is a free, public API that doesn't require authentication. It provides random cat facts, a list of cat facts, and information about cat breeds.

Step 2: Set Up Your Project

Create the necessary files for your cat facts application:

  • index.html - The HTML structure
  • styles.css - CSS for styling
  • script.js - JavaScript for API integration

Step 3: Implement the Code

Copy the following code into your project files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cat Facts</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Cat Facts</h1>
    
    <div class="fact-container">
      <div class="fact-card">
        <p id="fact-text">Click the button to get a cat fact...</p>
      </div>
      
      <div class="controls">
        <div class="length-filter">
          <label for="max-length">Max Length:</label>
          <input type="number" id="max-length" min="20" max="500" value="200">
        </div>
        <button id="get-fact-btn">Get Cat Fact</button>
      </div>
    </div>
    
    <div class="breeds-container">
      <h2>Cat Breeds</h2>
      <div id="breeds-list" class="breeds-list">
        <!-- Breeds will be loaded here -->
        <p class="loading">Loading cat breeds...</p>
      </div>
      <div class="pagination">
        <button id="prev-page" disabled>Previous</button>
        <span id="page-info">Page 1</span>
        <button id="next-page">Next</button>
      </div>
    </div>
    
    <div class="facts-list-container">
      <h2>More Cat Facts</h2>
      <button id="load-facts-btn">Load More Facts</button>
      <div id="facts-list" class="facts-list">
        <!-- Facts will be loaded here -->
      </div>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

Step 4: Test Your Implementation

Open your HTML file in a browser to test your cat facts application. You should be able to:

  • Get a random cat fact
  • Filter facts by maximum length
  • Browse through a list of cat breeds
  • Load additional cat facts

Error Handling

Common Errors

  • 404 Not Found: Invalid endpoint
  • Network Errors: Connection issues or API downtime

Pagination

The Cat Facts API uses pagination for the breeds and facts lists. Make sure to handle pagination correctly to allow users to navigate through all available data.

API Details

Base URL
https://catfact.ninja
Authentication
None
Documentation
Official Docs

Endpoints

  • GET
    /fact

    Get a random cat fact

    Parameters
    • max_length
      number - Maximum length of returned fact
  • GET
    /facts

    Get a list of cat facts

    Parameters
    • limit
      number - Limit the number of facts returned (default: 10, max: 100)
    • max_length
      number - Maximum length of returned facts
    • page
      number - Page number for pagination
  • GET
    /breeds

    Get a list of cat breeds

    Parameters
    • limit
      number - Limit the number of breeds returned (default: 10, max: 100)
    • page
      number - Page number for pagination