Building the Joke Generator App Step-by-Step with ChatGPT: A Comprehensive Guide

AI Tools Arena Labs Small
AI Tools Arena Labs

Building the Joke Generator App Step-by-Step with ChatGPT: A Comprehensive Guide

In this article, we’ll explore the process of creating the Joke Generator App using OpenAI’s ChatGPT. By providing a series of prompts, we were able to create an engaging and fun app that delivers personalized jokes based on user keywords and features dynamic backgrounds from Unsplash. Here’s a detailed look at the complete prompts submitted to ChatGPT to generate the app:

Prompt 1: “Create a joke generator app in 1 HTML file. Use an external API. Don’t use an API key. Generate jokes from user input.”

Response 1: ChatGPT provided an initial code snippet utilizing the icanhazdadjoke.com API to fetch jokes based on user input.

Prompt 2: “Change input to manual user input, based on user keywords.”

Response 2: ChatGPT adjusted the code to generate jokes based on user-provided keywords.

Prompt 3: “Make it app-like UI and UX. Beautiful UI.”

Response 3: The AI improved the app’s design, providing a more visually appealing user interface.

Prompt 4: “Make the joke copiable, and make the UI colorful.”

Response 4: ChatGPT added a “Copy Joke” button and enhanced the UI with a gradient background.

Prompt 5: “Add random free image background. Using an external API. No API key.”

Response 5: ChatGPT integrated the Unsplash API to fetch random background images without an API key.

Prompt 6: “Filter background by given keyword, if it doesn’t exist, choose an alternative or closest results.”

Response 6: The AI modified the code to fetch background images relevant to the keyword, falling back to random images if no matching images were found.

By submitting these prompts to ChatGPT, we successfully built the Joke Generator App, showcasing the potential of AI in web development. This app demonstrates how ChatGPT can generate functional, visually appealing, and engaging applications through a series of targeted prompts and iterations.

WARNING

  • Image and joke copyrights belong to the API provider.
  • This app is intended for educational purposes only. Use it at your own risk!

ChatGPT Prompt

Prompt 1:
"Create a joke generator app in 1 HTML file. Use an external API. Don't use an API key. Generate jokes from user input."

Prompt 2:
"Change input to manual user input, based on user keywords."

Prompt 3:
"Make it app-like UI and UX. Beautiful UI."

Prompt 4:
"Make the joke copiable, and make the UI colorful."

Prompt 5:
"Add random free image background. Using an external API. No API key."

Prompt 6:
"Filter background by given keyword, if it doesn't exist, choose an alternative or closest results."

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Joke Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: no-repeat center center fixed;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        h1 {
            color: white;
            font-size: 2rem;
            margin-bottom: 20px;
        }

        input {
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            padding: 10px;
            width: 100%;
            box-sizing: border-box;
            outline: none;
        }

        button {
            background-color: #4a4a4a;
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 1rem;
            padding: 10px;
            width: 100%;
            cursor: pointer;
            margin-top: 10px;
        }

        button:hover {
            background-color: #3a3a3a;
        }

        .input-container {
            width: 50%;
            max-width: 400px;
            background-color: rgba(255, 255, 255, 0.85);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        #joke {
            background-color: rgba(255, 255, 255, 0.85);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            width: 50%;
            max-width: 400px;
            text-align: center;
            word-wrap: break-word;
        }

        #copy-button {
            margin-top: 10px;
        }
    </style>
    <script>
       async function fetchRandomImage(keyword = '') {
            const apiUrl = keyword ? `https://source.unsplash.com/random/?${encodeURIComponent(keyword)}` : 'https://source.unsplash.com/random';
            const response = await fetch(apiUrl);
            const imageUrl = response.url;
            document.body.style.backgroundImage = `url('${imageUrl}')`;
        }

        fetchRandomImage(); // Call with no keyword for the initial background

    </script>
</head>
<body>
    <h1>Joke Generator</h1>
    <div class="input-container">
        <label for="keywords">Enter a keyword:</label>
        <input type="text" id="keywords" placeholder="e.g., computer">
        <button onclick="generateJoke()">Generate Joke</button>
    </div>
    <div id="joke"></div>
    <button id="copy-button" onclick="copyJoke()" style="display: none;width: 150px;">Copy Joke</button>

    <script>
        async function fetchJokes(keyword) {
            const apiUrl = `https://icanhazdadjoke.com/search?term=${encodeURIComponent(keyword)}&limit=20`;
            const response = await fetch(apiUrl, {
                headers: {
                    'Accept': 'application/json'
                }
            });
            const data = await response.json();
            return data.results;
        }

        function getRandomJoke(jokes) {
            if (jokes.length === 0) {
                return 'No jokes found with the given keyword.';
            }
            return jokes[Math.floor(Math.random() * jokes.length)].joke;
        }

async function generateJoke() {
            const keyword = document.getElementById('keywords').value.trim();
            if (keyword === '') {
                document.getElementById('joke').textContent = 'Please enter a keyword.';
                return;
            }

            const jokes = await fetchJokes(keyword);
            const joke = getRandomJoke(jokes);
            document.getElementById('joke').textContent = joke;
            document.getElementById('copy-button').style.display = 'block';
            fetchRandomImage(keyword);
        }
        function copyJoke() {
            const jokeText = document.getElementById('joke').textContent;
            const textArea = document.createElement('textarea');
            textArea.value = jokeText;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            alert('Joke copied to clipboard!');
        }
    </script>
</body>
</html>
Scroll to Top