Beginner 1-2 hours · 2 APIs

Build a Pet Breed Comparison Tool

Compare dog and cat breeds side by side with photos and characteristics. A fun tool for anyone considering a new pet.

APIs Used

Data Flow

USER User selects a dog breed and a cat breed API Fetch dog breed images via Dogs API Fetch cat breed details and images via Cats PROCESS Build side-by-side comparison data OUTPUT Display comparison card with photos and traits
User Action
API Call
Transform
Output

How It Works

1

User selects a dog breed and a cat breed to compare

2

Fetch breed images from the Dog API and Cat API

3

Fetch breed characteristics and details from each API

4

Display a side-by-side comparison card with photos and traits

Code Outline

Pseudocode / JavaScript
// 1. Fetch dog breed image
const dogRes = await fetch('https://dog.ceo/api/breed/labrador/images/random');
const { message: dogImage } = await dogRes.json();

// 2. Fetch cat breed details and image
const catBreedsRes = await fetch('https://api.thecatapi.com/v1/breeds/search?q=siamese', {
  headers: { 'x-api-key': 'YOUR_CAT_API_KEY' }
});
const [catBreed] = await catBreedsRes.json();

const catImageRes = await fetch(
  `https://api.thecatapi.com/v1/images/search?breed_ids=${catBreed.id}`,
  { headers: { 'x-api-key': 'YOUR_CAT_API_KEY' } }
);
const [catImage] = await catImageRes.json();

// 3. Build comparison data
const comparison = {
  dog: {
    breed: 'Labrador Retriever',
    image: dogImage,
    type: 'Dog',
    traits: ['Friendly', 'Active', 'Outgoing']
  },
  cat: {
    breed: catBreed.name,
    image: catImage.url,
    type: 'Cat',
    traits: [catBreed.temperament],
    lifeSpan: catBreed.life_span,
    weight: catBreed.weight.metric + ' kg'
  }
};

// 4. Display comparison
console.log('--- Pet Breed Comparison ---');
console.log(`Dog: ${comparison.dog.breed}`);
console.log(`  Image: ${comparison.dog.image}`);
console.log(`  Traits: ${comparison.dog.traits.join(', ')}`);
console.log(`Cat: ${comparison.cat.breed}`);
console.log(`  Image: ${comparison.cat.image}`);
console.log(`  Traits: ${comparison.cat.traits}`);
console.log(`  Life Span: ${comparison.cat.lifeSpan} years`);

Note: These recipes are AI-generated suggestions based on API capabilities. Actual implementation may vary. Always refer to official API documentation for the latest specifications.