Beginner 1-2 hours · 2 APIs
Build a Random Inspiration Generator
Generate beautiful quote cards by combining random inspirational quotes with stunning background photos.
APIs Used
Data Flow
User Action
API Call
Transform
Output
How It Works
1
Fetch a random inspirational quote from Quotable API
2
Search Unsplash for a photo matching the quote's tag or mood
3
Overlay the quote text on the photo using canvas or CSS
4
Allow users to download or share the generated card
Code Outline
Pseudocode / JavaScript
// 1. Get a random quote
const quoteRes = await fetch('https://api.quotable.io/random?maxLength=100');
const quote = await quoteRes.json();
// 2. Get a matching background photo from Unsplash
const photoRes = await fetch(
'https://api.unsplash.com/photos/random?query=nature&orientation=landscape',
{ headers: { 'Authorization': 'Client-ID YOUR_UNSPLASH_KEY' } }
);
const photo = await photoRes.json();
// 3. Create the inspiration card (in browser with canvas)
const card = {
quote: quote.content,
author: quote.author,
backgroundUrl: photo.urls.regular,
photographerName: photo.user.name,
photographerLink: photo.user.links.html
};
// 4. Display the card
console.log(`"${card.quote}" - ${card.author}`);
console.log(`Background: ${card.backgroundUrl}`);
console.log(`Photo by ${card.photographerName} on Unsplash`); Recipe Details
Difficulty Beginner
Time 1-2 hours
APIs Used 2
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.