How to Build a Random Joke Generator Using HTML, CSS & JavaScript | Beginner Web Project

Alizeh Codes June 29, 2025

 

😂Random Joke Generator with HTML, CSS & JavaScript

Looking for a fun and easy project to improve your JavaScript skills? In this tutorial, I’ll show you how to make a Random Joke Generator using only HTML, CSS, and JavaScript — no libraries or frameworks needed!

This is a perfect beginner-friendly project that will help you understand how to fetch data from an API, update the DOM, and make your web page interactive.


🎥 Watch Video Tutorial:

📺 Watch the full step-by-step video on YouTube:
👉 Click here to watch



💻 What You'll Learn in This Project:

    HTML structure for the layout

    CSS styling and simple UI design

    JavaScript fetch() API

    DOM manipulation

    Event listeners

    Working with JSON data


⚙️ Tools & Technologies Used:

    HTML

    CSS

    JavaScript

    Public Joke API (optional)

    Code Editor (like VS Code)


📦 Download Source Code:

HTML:

<!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>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <span>&#128514;</span>
        <p id="joke"></p>
        <button id="btn">Get Random Joke</button>
    </div>

    <!-- js  -->
    <script src="script.js"></script>
</body>
</html>


CSS:


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
}
body{
    background-color: #ffd000;
}
.wrapper{
    width: 80vmin;
    padding: 50px 40px;
    background-color: #15161a;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    box-shadow: 20px 20px 40px rgba(97, 63, 0, 0.4);
}
span{
    display: block;
    text-align: center;
    font-size: 100px;
}
p{
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
    word-wrap: break-word;
    line-height: 35px;
    margin: 30px 0;
    opacity: 0;
}
.fade{
    opacity: 1;
    transition: opacity 1.5s;
}
button{
    display: block;
    background-color: #ffd000;
    border: none;
    padding: 5px;
    font-size: 18px;
    font-weight: 600;
    color: #171721;
    padding: 12px 25px;
    margin: 0 auto;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}


JavaScript:

const jokeContainer = document.getElementById("joke");
const btn = document.getElementById("btn");
const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";

let getJoke = () => {
    jokeContainer.classList.remove("fade");
    fetch(url)
    .then(data => data.json())
    .then(item =>{
        jokeContainer.textContent = `${item.joke}`;
        jokeContainer.classList.add("fade");
    });
}
btn.addEventListener("click",getJoke);
getJoke();


🧠 Why This Project is Great for Beginners?

    Short & simple codeFun and interactive output

    No need for frameworks

    Teaches real-life use of APIs

    Looks impressive in your portfolio!


🌐 Related Projects:

    ✅ Interactive panda Login Form using Javascript
    ✅ Bulb On/Off  using HTML, CSS & JS   
    ✅ Tic-Tac-Toe game with JavaScript


💬 Final Thoughts:

Projects like this are a fun way to learn and show off your skills. Once you're comfortable with this, try customizing the UI, adding dark mode, or using your own joke list. Don’t forget to subscribe to my YouTube channel for more creative web dev projects!


🔗 Stay Connected:

    🎥 YouTube: Alizeh Codes

    🌐 Blog: alizehcodes

    📸 Instagram: @alizehcodes

    💬 WhatsApp Channel: Join here 


🏷️ Hashtags for Sharing:

#javascriptproject #htmlcssjs #randomjokegenerator #webdevelopment #funproject #frontenddev #learnjavascript


Tags:

Post a Comment

0 Comments