Create A Random Joke Generator With HTML, CSS, And JavaScript

Aug 3, 2025 by ADMIN 62 views

Create a Random Joke Generator Using External API

Hey guys! Ever feel like you need a good laugh? Or maybe you're building an app and want to add some humor? Well, you're in the right place! In this article, we're going to dive into creating a random joke generator using an external API. It’s a fantastic way to learn about APIs, JavaScript, and web development all while making something fun and engaging. Let's get started!

What We're Building

So, what exactly are we building? We're creating a web application that can fetch jokes from an external API and display them to the user. Think of it as your personal comedian, always ready with a fresh joke. Here’s the breakdown of the key features:

Fetching Jokes from an API: We'll be using a public jokes API (like JokeAPI) to get our jokes. APIs (Application Programming Interfaces) are like waiters in a restaurant – you tell them what you want, and they bring it to you. In this case, we're asking for jokes!
Handling Different Joke Types: Jokes come in various forms, right? Some are one-liners, and some have a setup and a punchline. Our app will handle both types gracefully.
User Interface (UI): We'll create a simple and friendly user interface with a button to fetch new jokes. We might even add a toggle to choose the type of joke (if we're feeling fancy!).
Responsive Design: Our app will look good on both desktops and mobile devices. Nobody wants a website that looks like it was designed in the 90s, right?
Error Handling: What happens if the API is down? Or if something goes wrong? Our app will handle these situations without crashing and burning.
Clean Code: We'll split our code into HTML, CSS, and JavaScript files to keep things organized and maintainable. Think of it as keeping your room tidy – it makes everything easier to find!

Why This Project Rocks

Why should you care about building a random joke generator? Well, besides being a ton of fun, it’s a great way to learn some essential web development skills. You’ll get hands-on experience with:

APIs: Understanding how to fetch data from external sources is a crucial skill for any web developer. APIs are everywhere, and this project gives you a practical introduction.
JavaScript: JavaScript is the language of the web, and this project will help you hone your skills. You’ll be using it to make API requests, manipulate the DOM (Document Object Model), and handle user interactions.
HTML and CSS: You'll be creating the structure and style of your web page. It's like being an architect and interior designer all in one!
Problem-Solving: You’ll encounter challenges along the way, and figuring out how to solve them is what makes you a better developer. Debugging is your friend!

Diving into the Technical Details

Okay, let's get a bit more technical. Here’s a roadmap of how we’ll build this project.

1. Setting Up the HTML Structure

First things first, we need an HTML file to structure our web page. Think of HTML as the skeleton of your website. We’ll need elements for:

The Joke Display: This is where the joke will appear.
The “Get Joke” Button: This button will trigger the API request.
Optional: Joke Type Toggle: If we want, we can add a way for the user to select the type of joke (single, two-part, etc.).

Here’s a basic HTML structure to get us started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Joke Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Random Joke Generator</h1>
        <div id="joke-container">
            <p id="setup"></p>
            <p id="delivery"></p>
            <p id="joke"></p>
        </div>
        <button id="get-joke-button">Get a Joke</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

In this HTML structure:

We've linked a CSS file (style.css) for styling and a JavaScript file (script.js) for the logic.
The div with the class container will hold all our content.
We have an h1 for the title.
The div with the id joke-container will hold the joke. Inside, we have <p> tags for the setup, delivery, and single-line joke (we'll use JavaScript to show the correct one).
Finally, we have a button with the id get-joke-button that will trigger the joke fetching.

2. Styling with CSS

CSS is what makes our website look pretty. It’s the makeup artist of the web. We’ll use CSS to style the elements we created in HTML. Here are some things we might want to style:

Overall Layout: We’ll center the content and make it look good on different screen sizes.
Font and Colors: We’ll choose a font and color scheme that’s easy on the eyes.
Button Style: We’ll make the “Get Joke” button look inviting and clickable.
Joke Display: We’ll style the joke text to make it readable and engaging.

Here’s some basic CSS to get you started:

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#get-joke-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#get-joke-button:hover {
    background-color: #367C39;
}

#joke-container {
    margin-bottom: 20px;
}

#joke-container p {
    font-size: 18px;
    margin: 10px 0;
}

This CSS does the following:

Sets a default font and background color for the body.
Centers the content both horizontally and vertically.
Styles the container with a white background, padding, rounded corners, and a shadow.
Styles the get-joke-button with a green background, white text, padding, rounded corners, and a hover effect.
Adds some margin to the joke-container and styles the joke paragraphs.

3. JavaScript Magic

Now for the fun part! JavaScript is where the magic happens. It’s the brains of our operation. We’ll use JavaScript to:

Fetch Jokes from the API: We’ll make a request to the JokeAPI and get back a joke in JSON format.
Parse the JSON Response: We’ll need to extract the joke from the JSON.
Display the Joke: We’ll update the HTML to show the joke to the user.
Handle Errors: If the API request fails, we’ll display an error message.
Handle Different Joke Types: We’ll show either the single-line joke or the setup and delivery, depending on the joke type.

Here’s some JavaScript code to get you started:

const jokeContainer = document.getElementById('joke-container');
const getJokeButton = document.getElementById('get-joke-button');

getJokeButton.addEventListener('click', fetchJoke);

async function fetchJoke() {
    try {
        const response = await fetch('https://v2.jokeapi.dev/joke/Programming,Christmas?blacklistFlags=nsfw,racist,sexist,explicit&safe-mode');
        const data = await response.json();

        if (data.error) {
            jokeContainer.textContent = 'Oops! Something went wrong.';
            return;
        }

        if (data.type === 'single') {
            jokeContainer.innerHTML = `<p>${data.joke}</p>`;
        } else {
            jokeContainer.innerHTML = `<p><strong>Setup:</strong> ${data.setup}</p><p><strong>Delivery:</strong> ${data.delivery}</p>`;
        }
    } catch (error) {
        console.error('Error fetching joke:', error);
        jokeContainer.textContent = 'Failed to fetch a joke. Please try again later.';
    }
}

fetchJoke(); // Initial joke load

Let's break down this JavaScript code:

We get references to the joke-container and get-joke-button elements using document.getElementById().
We add an event listener to the getJokeButton that calls the fetchJoke function when clicked.
The fetchJoke function is an async function, which means we can use await to wait for the API response.
We use fetch() to make a request to the JokeAPI. The URL includes categories (Programming and Christmas) and blacklist flags to filter jokes.
We convert the response to JSON using response.json().
We check for an error property in the JSON response. If it’s present, we display an error message.
If the joke type is single, we display the joke property. If it’s not, we display the setup and delivery properties.
We use a try...catch block to handle any errors that might occur during the API request.
Finally, we call fetchJoke() once when the page loads to display an initial joke.

4. Error Handling

Error handling is crucial. Imagine your app failing silently – users would be confused! We’ve already added some basic error handling in our JavaScript code, but let's talk about it in more detail.

API Errors: The JokeAPI returns an error property if something goes wrong. We check for this and display a user-friendly message.
Network Errors: If the user is offline or the API is unreachable, the fetch() function will throw an error. We catch this error in our try...catch block and display a message.
User Feedback: It’s important to give the user feedback when something goes wrong. Displaying a message like “Failed to fetch a joke. Please try again later.” is much better than showing nothing.

5. Responsive Design

Making our app responsive means it looks good on different screen sizes. We can use CSS media queries to adjust the layout and styling based on the screen size.

Here’s an example of a media query:

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    #joke-container p {
        font-size: 16px;
    }
}

This CSS will apply when the screen width is 600 pixels or less. We’re reducing the padding on the container and the font size of the joke paragraphs to make the app look better on smaller screens.

6. Optional Features

If you’re feeling ambitious, here are some optional features you could add:

Joke Category Selection: Add a dropdown or buttons to allow the user to select joke categories (e.g., Programming, Christmas, etc.).
Joke Type Toggle: Add a toggle to allow the user to choose between single-line and two-part jokes.
Joke Rating: Allow users to rate jokes (e.g., with a thumbs up/down).
Save Favorite Jokes: Allow users to save their favorite jokes to a list.

Acceptance Criteria

Before we wrap up, let’s make sure we’ve met the acceptance criteria:

Jokes are fetched and displayed correctly from JokeAPI: Check!
The app has at least one button for generating a new joke: Check!
Responsive and visually appealing UI: We’ve got a basic design, but you can always make it prettier!
Handles API errors gracefully: Check!
Code is split into HTML, CSS, and JS files: Check!

Conclusion

And there you have it! We’ve built a random joke generator using an external API. This project is a fantastic way to learn about APIs, JavaScript, and web development. You’ve learned how to fetch data from an API, handle different data types, update the DOM, handle errors, and create a responsive design.

But the fun doesn't stop here! Feel free to add more features, experiment with different APIs, and make the app your own. Keep coding, keep learning, and keep laughing!

Happy coding, guys! And remember, a day without laughter is a day wasted!

References

JokeAPI documentation