Bless API Book

Dog API

Animals
Beginner

Overview

Free API for random dog images and breed information

Integration Guide

Step 1: Understanding the API

The Dog API is a free, public API that doesn't require authentication. It provides random dog images, breed listings, and breed-specific images.

Step 2: Set Up Your Project

Create the necessary files for your dog gallery 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>Dog Gallery</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Dog Gallery</h1>
    
    <div class="controls">
      <div class="breed-selector">
        <label for="breed-select">Select a Breed:</label>
        <select id="breed-select">
          <option value="">All Breeds (Random)</option>
          <!-- Breeds will be populated by JavaScript -->
        </select>
        
        <div id="sub-breed-container" class="hidden">
          <label for="sub-breed-select">Select a Sub-breed:</label>
          <select id="sub-breed-select">
            <!-- Sub-breeds will be populated by JavaScript -->
          </select>
        </div>
      </div>
      
      <div class="buttons">
        <button id="get-dog-btn">Get Dog</button>
        <button id="get-multiple-btn">Get 3 Dogs</button>
      </div>
    </div>
    
    <div id="dog-container" class="dog-container">
      <!-- Dog images will be displayed here -->
      <p class="initial-message">Select a breed and click "Get Dog" to start</p>
    </div>
    
    <div class="breed-info">
      <h2>Breed Information</h2>
      <p id="breed-info-text">Select a breed to see information</p>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

Step 4: Test Your Implementation

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

  • View random dog images
  • Select specific dog breeds
  • Select sub-breeds when available
  • Get multiple dog images at once

Error Handling

Common Errors

  • 404 Not Found: Invalid endpoint, breed, or sub-breed
  • Network Errors: Connection issues or API downtime

Image Loading

Some dog images might be large and take time to load. Consider implementing loading indicators or lazy loading for better user experience.

API Details

Base URL
https://dog.ceo/api
Authentication
None
Documentation
Official Docs

Endpoints

  • GET
    /breeds/image/random

    Retrieve a random dog image

  • GET
    /breeds/image/random/{count}

    Retrieve multiple random dog images

    Parameters
    • count*
      number - Number of images to return (1-50)
  • GET
    /breeds/list/all

    List all dog breeds

  • GET
    /breed/{breed}/images/random

    Retrieve a random image of a specific breed

    Parameters
    • breed*
      string - The breed name (e.g., 'labrador', 'poodle')
  • GET
    /breed/{breed}/images

    Retrieve all images of a specific breed

    Parameters
    • breed*
      string - The breed name (e.g., 'labrador', 'poodle')
  • GET
    /breed/{breed}/{subbreed}/images/random

    Retrieve a random image of a specific sub-breed

    Parameters
    • breed*
      string - The main breed name (e.g., 'hound')
    • subbreed*
      string - The sub-breed name (e.g., 'afghan')