Beginner 10 minutes
Build a Random Quote Generator
Create a simple app that displays random inspirational quotes with a single click. No API key needed.
What You'll Build
A script that fetches and displays random inspirational quotes. No API key required.
Prerequisites
- ✓ Basic JavaScript knowledge
1
Understand the API
Quotable is a free, open-source API that requires no API key or authentication. You can start making requests immediately.
2
Fetch a random quote
Call the /random endpoint to get a random quote with the author's name.
javascript
const response = await fetch('https://api.quotable.io/random');
const quote = await response.json();
console.log(`"${quote.content}"`);
console.log(` - ${quote.author}`);
console.log(`Tags: ${quote.tags.join(', ')}`); 3
Filter quotes by tag
Use query parameters to get quotes in specific categories like wisdom, technology, or humor.
javascript
async function getQuote(tag = '') {
const url = tag
? `https://api.quotable.io/random?tags=${tag}`
: 'https://api.quotable.io/random';
const response = await fetch(url);
if (!response.ok) {
console.log('No quotes found for that tag.');
return;
}
const quote = await response.json();
console.log(`"${quote.content}" - ${quote.author}`);
}
await getQuote('technology');
await getQuote('wisdom');
await getQuote('humor'); Next Steps
- → Build an HTML page that shows a new quote on button click
- → Add a 'Copy to clipboard' feature
- → Combine with Unsplash API for quote images