Design Joke Generator App in HTML CSS & JavaScript

Last Updated : 22 Feb, 2024

We will go to learn how can we create a Joke generator app using HTML, CSS, and JavaScript. We will also add a feature to copy the generated joke. We will use API to fetch the jokes and will show those jokes on the screen.

Prerequisites

Approach

Create the Joke Generator Application UI Structure using HTML Elements like <div>, <h1>, <button>. Then link all the required CDNs for external fonts and icons.
Once we design the structure of the application, then we can style the elements and the application using CSS properties for a responsive and attractive layout with different properties like width, padding, height, etc.
In the JavaScript code, as we are fetching the Joke from the external API, we need to define the function jokeFn() which requests the External API for the joke and once the joke is received, it is displayed in the Application’s UI.
The cpyFn() allows us to copy the generated Joke to the clipboard for further use.

Example: This example describes the basic implementation for a Joke generator App in HTML, CSS & JavaScript.

Javascript

const joke = document.getElementById('jokeText');
const jokeBtn = document.getElementById('newJokeBtn');
const cpyBtn = document.getElementById('copyJokeBtn');
jokeBtn.addEventListener('click', jokeFn);
cpyBtn.addEventListener('click', cpyFn);
jokeFn();
function jokeFn() {
    fetch('...')
        .then(response => response.json())
        .then(data => {
            joke.textContent = data.joke;
        })
        .catch(error => {
            console.error('Error fetching joke:', error);
            joke.textContent = 'Failed to fetch joke. Please try again.';
        });
}
function cpyFn() {
    const textArea = document.createElement('textarea');
    textArea.value = joke.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    alert('Joke copied to clipboard!');
}

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to right,
            #3494E6, #EC6EAD);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.container {
    text-align: center;
}
 
.app-title {
    color: #4CAF50;
    font-size: 32px;
    margin-bottom: 20px;
}
 
.joke-container {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    width: 60%;
    height: 60%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 20px;
    overflow: hidden;
}
 
.laugh-icon,
.random-icon,
.copy-icon {
    font-size: 20px;
    margin-bottom: 10px;
    color: #FFD700;
}
 
#jokeText {
    font-size: 18px;
    color: #555;
    margin: 20px 10px;
}
 
button {
    padding: 12px 30px;
    font-size: 18px;
    background: #FF4848;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin: 20px 10px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
 
button:hover {
    background: #FF6565;
}
 
@media screen and (max-width: 600px) {
    .joke-container {
        width: 90%;
    }
}

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Joke Generator</title>
</head>
 
<body>
    <div class="container">
        <div class="joke-container animate__animated animate__fadeIn">
            <h1 class="app-title">GeeksforGeeks Joke Generator</h1>
            <i class="laugh-icon">😄</i>
            <p id="jokeText">Loading joke...</p>
            <button id="newJokeBtn"><i class="random-icon">
              🔄</i> New Joke</button>
            <button id="copyJokeBtn"><i class="copy-icon">
              📋</i> Copy Joke</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
 
</html>