Build a Random Quote Generator
Create a simple app that displays random Stoic quotes with a single click. No API key needed.
What You'll Build
A script that fetches and displays random Stoic quotes, plus a rotating quote widget. No API key required.
Prerequisites
- ✓ Basic JavaScript knowledge
Understand the API
Stoic Quotes is a free API that requires no API key or authentication. It serves quotes from Marcus Aurelius, Seneca and Epictetus, and you can start making requests immediately. Two endpoints matter here: /api/quote for a single random quote, and /api/quotes?num=N for a batch.
Fetch a random quote
Call the /api/quote endpoint to get one random quote. The response is a flat object with just two fields: text and author.
const response = await fetch('https://stoic-quotes.com/api/quote');
const quote = await response.json();
// => { "text": "Whatever happens to you has been waiting to happen...", "author": "Marcus Aurelius" }
console.log(`"${quote.text}"`);
console.log(` - ${quote.author}`); Fetch a batch and rotate through it
Requesting one quote per click means one network round-trip per click. Fetch a batch with /api/quotes?num=N once, then rotate through it locally — faster for the user and lighter on the API.
async function loadQuotes(count = 10) {
const response = await fetch(`https://stoic-quotes.com/api/quotes?num=${count}`);
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
return response.json(); // => [{ text, author }, ...]
}
const quotes = await loadQuotes(10);
let index = 0;
function nextQuote() {
const quote = quotes[index];
index = (index + 1) % quotes.length;
return `"${quote.text}" - ${quote.author}`;
}
console.log(nextQuote());
console.log(nextQuote()); Next Steps
- → Build an HTML page that shows a new quote on button click
- → Add a 'Copy to clipboard' feature
- → Refetch a new batch once you have rotated through the current one
- → Combine with Unsplash API for quote images