Beginner 10 minutes
Build a Random Dog Image Gallery
Create a fun gallery of random dog images. No API key needed - just fetch and display adorable dogs.
What You'll Build
A script that fetches random dog images, lists dog breeds, and gets photos by specific breed. No API key required.
Prerequisites
- ✓ Basic JavaScript knowledge
1
Fetch a random dog image
The Dog CEO API is completely free and requires no authentication. Simply call the endpoint to get a random dog photo.
javascript
const response = await fetch('https://dog.ceo/api/breeds/image/random');
const data = await response.json();
console.log(`Random dog: ${data.message}`);
// data.message contains the image URL 2
Get multiple random images
Fetch multiple random dog images at once for a gallery view.
javascript
// Get 5 random dog images
const response = await fetch('https://dog.ceo/api/breeds/image/random/5');
const data = await response.json();
console.log('Dog gallery:');
data.message.forEach((url, i) => {
console.log(` ${i + 1}. ${url}`);
}); 3
Browse by breed
List all available breeds and fetch images for a specific breed.
javascript
// List all breeds
const breedsRes = await fetch('https://dog.ceo/api/breeds/list/all');
const { message: breeds } = await breedsRes.json();
console.log('Available breeds:', Object.keys(breeds).join(', '));
// Get images of a specific breed
const breed = 'husky';
const imagesRes = await fetch(`https://dog.ceo/api/breed/${breed}/images/random/3`);
const images = await imagesRes.json();
console.log(`\n${breed} photos:`);
images.message.forEach(url => console.log(` ${url}`)); Next Steps
- → Build an HTML gallery with breed selector dropdown
- → Add a 'favorite' feature using localStorage
- → Combine with Cat API for a pet photo app