Create your own AI-powered Joke Generator in 2 Hours

Using HTML, CSS, JavaScript & Hugging Face API

I have no story to tell you today,

Let’s directly jump into the workflow, step-by-step guide and code files.

Workflow

# --- Frontend (Browser) ---
WHEN User clicks "Generate" button:
    GET topic FROM input field
    
    IF topic IS EMPTY:
        SHOW "Please enter a topic" alert
        RETURN
    
    SHOW loading spinner
    
    TRY:
        # Direct API call (INSECURE - key exposed!)
        RESPONSE = FETCH "<https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.2>"
            METHOD: POST
            HEADERS: {
                "Authorization": "Bearer YOUR_API_KEY",
                "Content-Type": "application/json"
            }
            BODY: JSON.stringify({
                inputs: "Create funny joke about " + topic
            })
        
        IF RESPONSE OK:
            JOKE = EXTRACT generated_text FROM RESPONSE
            DISPLAY JOKE
        ELSE:
            DISPLAY "Failed to generate joke"
    
    CATCH ERROR:
        DISPLAY "Error: " + ERROR.message
    
    FINALLY:
        HIDE loading spinner

# --- Hugging Face API Flow ---
RECEIVE REQUEST:
    VERIFY API KEY
    PROCESS prompt WITH AI MODEL
    RETURN generated joke

# === Example Flow ===
USER INPUT: "banana"
API RESPONSE: "Why don't bananas use sunscreen? Because they peel good!"
DISPLAY: "Why don't bananas use sunscreen? Because they peel good!"

Step-by-step guide

Build an AI Joke Generator in 8 Steps:

1. Setup: Create a joke-generator folder with index.html, style.css, and app.js.

2. HTML: Structure the page with a heading, input field, button, and result area.

3. CSS: Style elements for a clean layout and add a spinning loader animation.

4. JavaScript: Fetch jokes from Hugging Face’s API when the button is clicked.

5. API Key: Sign up on Hugging Face, create an Inference API token, and add it to your code.

6. Test: Use VS Code’s Live Server to debug and ensure error handling works.

7. Deploy: Push code to GitHub and enable GitHub Pages (but note: exposed API keys are insecure).

8. Upgrade: Optional: Add joke history, ratings, or animations for polish.

Flow: User enters topic → AI generates joke → Results display (or errors show).

Time: ~30 minutes. Cost: $0.

Code-files Structure

joke-generator/
├── index.html
├── style.css
└── app.js 
└── fav-icon.png

You can check the GitHub repository for the code files.

And with this we are concluding our first project, I know this is not as detailed as it should be.

But don’t worry, with time you will get what most charges $599 for free.

More projects on the way.

Manas xx! 🥂