Beginner 10 minutes
Build a Cat Facts Display
Create a fun app that shows random cat images alongside interesting cat facts. No API key needed for either API.
What You'll Build
A script that displays random cat images with fun cat facts. Both APIs work without authentication.
Prerequisites
- ✓ Basic JavaScript knowledge
1
Fetch a random cat image
The Cat API provides random cat images. While it supports an API key for higher limits, basic usage works without one.
javascript
const response = await fetch('https://api.thecatapi.com/v1/images/search');
const [cat] = await response.json();
console.log(`Cat image: ${cat.url}`);
console.log(`Image ID: ${cat.id}`);
console.log(`Size: ${cat.width}x${cat.height}`); 2
Get cat facts
Use the Cat Facts API to get random interesting facts about cats.
javascript
const factResponse = await fetch('https://catfact.ninja/fact');
const fact = await factResponse.json();
console.log(`Cat Fact: ${fact.fact}`);
console.log(`(${fact.length} characters)`);
// Get multiple facts
const factsResponse = await fetch('https://catfact.ninja/facts?limit=3');
const { data: facts } = await factsResponse.json();
console.log('\nMore cat facts:');
facts.forEach((f, i) => console.log(` ${i + 1}. ${f.fact}`)); 3
Combine image and fact
Fetch both a random cat image and a random cat fact, then display them together.
javascript
async function getCatCard() {
const [imageRes, factRes] = await Promise.all([
fetch('https://api.thecatapi.com/v1/images/search'),
fetch('https://catfact.ninja/fact')
]);
const [image] = await imageRes.json();
const fact = await factRes.json();
return {
imageUrl: image.url,
fact: fact.fact
};
}
// Generate 3 cat cards
for (let i = 0; i < 3; i++) {
const card = await getCatCard();
console.log(`\nCat Card ${i + 1}:`);
console.log(` Image: ${card.imageUrl}`);
console.log(` Fact: ${card.fact}`);
} Next Steps
- → Build an HTML cat card gallery
- → Add breed information using Cat API breed endpoints
- → Create a 'Cat of the Day' feature with daily rotation