Not everything has to be serious.
Sometimes you need a loading screen that doesn’t bore people to death. Or a Slack bot that reminds your team that work doesn’t have to be miserable. Or a 404 page that actually makes someone laugh instead of curse.
Chuck Norris facts are perfect for all of these.
The API Call
const response = await fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': 'YOUR_API_KEY' }
});
const { data } = await response.json();
console.log(data.joke);
// "Chuck Norris can divide by zero."That’s it. One GET request, one joke. No parameters to configure, no categories to pick from, no pagination to deal with. Just hit the endpoint, get a random fact. The Dad Jokes API and Random Joke API work exactly the same way if you want different flavors of humor.
The response looks like this:
{
"status": "ok",
"error": null,
"data": {
"joke": "The Mona Lisa used to smile. Then Chuck Norris roundhouse kicked it."
}
}Slack Bot in 5 Minutes
I built this for my team’s Slack. Took longer to set up the slash command in Slack’s admin than to write the code.
app.post('/slack/chuck', async (req, res) => {
const response = await fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': process.env.APIVERVE_KEY }
});
const { data } = await response.json();
res.json({
response_type: 'in_channel',
text: data.joke
});
});Point your Slack slash command to this endpoint. Type /chuck in any channel. Watch your coworkers either groan or snort-laugh.
Fair warning: someone will use it during a serious meeting. It will be worth it.
Discord Bot
Same idea, different platform.
client.on('messageCreate', async (message) => {
if (message.content === '!chuck') {
const response = await fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': process.env.APIVERVE_KEY }
});
const { data } = await response.json();
message.reply(data.joke);
}
});Deploy it, add it to your server, type !chuck. Done.
Loading Screens That Don’t Suck
Here’s a trick: show a Chuck Norris fact while something loads. The perceived wait time drops because people are reading instead of staring at a spinner.
async function loadDataWithJoke(loadingElement, fetchPromise) {
// Fire both requests
const jokePromise = fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': 'YOUR_API_KEY' }
}).then(r => r.json());
// Show joke while waiting
const { data: jokeData } = await jokePromise;
loadingElement.textContent = jokeData.joke;
// Return the actual data when ready
return fetchPromise;
}Use it anywhere you have a loading state. Dashboard loading? Chuck Norris. Report generating? Chuck Norris. File uploading? You get it.
404 Pages
Most 404 pages are depressing. “Page not found.” Cool, thanks for nothing.
// In your 404 page component
const [joke, setJoke] = useState('');
useEffect(() => {
fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': 'YOUR_API_KEY' }
})
.then(r => r.json())
.then(({ data }) => setJoke(data.joke));
}, []);
return (
<div className="error-page">
<h1>404</h1>
<p>Page not found. But here's a Chuck Norris fact:</p>
<blockquote>{joke}</blockquote>
<a href="/">Go home</a>
</div>
);Now your 404 page is the best part of your site. That’s not a joke. I’ve seen analytics where people hit 404 pages multiple times just to see different facts.
CLI Tools
Building a command-line tool? Add some personality during long operations.
const ora = require('ora');
async function runLongTask() {
const spinner = ora('Processing...').start();
// Fetch a joke to show
const { data } = await fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': process.env.APIVERVE_KEY }
}).then(r => r.json());
spinner.text = `Processing... ${data.joke}`;
// Do actual work
await doExpensiveOperation();
spinner.succeed('Done!');
}Why Bother?
Real talk: fun APIs seem pointless. They’re not.
For learning: These are perfect for practicing async/await, error handling, API authentication. Same patterns as “serious” APIs, but you actually want to build something with them. Nobody dreads working on their joke bot at 11pm.
For user experience: Micro-interactions matter. A funny loading message. A playful error page. These things turn “your app” into “that app I actually enjoy using.”
For your sanity: Sometimes you need to build something that isn’t a CRUD app or a dashboard. Something that just… makes you smile. That’s valid.
Error Handling
The API is simple, but still handle errors like an adult:
async function getChuckNorrisJoke() {
try {
const response = await fetch('https://api.apiverve.com/v1/chucknorris', {
headers: { 'x-api-key': process.env.APIVERVE_KEY }
});
if (!response.ok) {
throw new Error(`API returned ${response.status}`);
}
const { data, error } = await response.json();
if (error) {
throw new Error(error);
}
return data.joke;
} catch (err) {
console.error('Failed to fetch joke:', err);
return "Chuck Norris jokes are temporarily unavailable. Chuck Norris is not amused.";
}
}The fallback message is key. Don’t let an API failure break your loading screen. Have a backup.
When You Need Different Humor
Chuck Norris not your thing? Or you need variety?
- Random Jokes API — General humor, all categories
- Dad Jokes API — Maximum groan factor
- Random Quotes API — When you want inspiration instead of laughs
Same authentication. Same response format. Swap the endpoint, get different content.
const APIs = {
chuck: 'https://api.apiverve.com/v1/chucknorris',
dad: 'https://api.apiverve.com/v1/dadjokes',
random: 'https://api.apiverve.com/v1/randomjoke'
};
async function getJoke(type = 'chuck') {
const { data } = await fetch(APIs[type], {
headers: { 'x-api-key': process.env.APIVERVE_KEY }
}).then(r => r.json());
return data.joke;
}Now you’ve got options.
Keep Reading
- Generate Barcodes for Inventory and Shipping
- Summarize Text with AI: A Practical Guide
- Generate PDFs from HTML with an API
Grab a free API key and go build something that makes someone laugh today. No credit card required.
