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 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`); Recipe Details
Difficulty Beginner
Time 1-2 hours
APIs Used 2
Tags
Related Recipes
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.