Design Joke Generator App in HTML CSS & JavaScript Last Updated : 21 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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. PrerequisitesHTMLCSSJavaScriptApproachCreate 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. 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> 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%; } } 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!'); } Output: Comment More infoAdvertise with us Next Article Design Joke Generator App in HTML CSS & JavaScript G gpancomputer Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More Similar Reads Design a Recipe App in HTML CSS & JavaScript We will create an attractive and styled application that gives the recipe of food, and dishes entered by the user. The user needs to enter the required food name and click on the button. The application uses an External API to fetch the food recipe and represent it in an attractive form. The user ca 6 min read Design a Online Grocery Website in HTML CSS & JavaScript Online grocery shopping has become increasingly popular, especially in recent times. This project aims to create a user-friendly and responsive website for purchasing groceries online. Users can browse through the various categories, add items to their cart, and proceed to checkout making their groc 5 min read Design Random Color Generator using HTML CSS and JavaScript A Random Color Generator app is used to create random colors with a simple button click, displaying both HEX and RGB codes that users can copy. It's built using HTML, CSS, and JavaScript, making it a handy tool for designers or developers who need quick color ideas. The app can also include a Dark M 3 min read Design a Rotating Image Gallery App in HTML CSS & JavaScript We'll gather some images and build a gallery that can be rotated with straightforward buttons. To rotate the images to the right, we'll use the right button, and for left rotation, we'll use the left button. The process will be simple, allowing us to easily rotate the images using these buttons.Prev 3 min read Design an Image Search App in HTML CSS & JavaScript Image Search Application contains an input field, which takes the choice or type of the image for which the user is searching. When the user enters the search string and clicks on the button, the top 10 images are shown to the user. If the user wants more images, then there is a Generate More button 4 min read Captcha Generator using HTML CSS and JavaScript A captcha is a way of verifying whether a user is human or not. A captcha is made up with the help of combining letters and digits. It ensures that the user attempting to access the platform is a human. So, without wasting time, let's get started.Application of CaptchaForm Authentication: For login 3 min read Design a School Website in HTML CSS and JavaScript A School Website developed using HTML, CSS, and JavaScript is an interactive platform that provides information about the school, its faculty, courses, events, and other relevant details. It incorporates responsive design principles to ensure compatibility across various devices, offering an engagin 8 min read Random Quote Generator Using HTML, CSS and JavaScript A Random Quote Generator is capable of pulling quotes randomly from an API, a database, or simply from an array. We will be designing a Random Quote Generator from scratch using HTML, CSS, JavaScript, and type.fit API. The webpage displays a random quote from a collection and upon the click of a but 8 min read Design a Survey Form using HTML CSS and JavaScript In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a loo 5 min read Build an AI Image Generator Website in HTML CSS and JavaScript Create an AI image generator website using HTML, CSS, and JavaScript by developing a user interface that lets users input text prompts and generate images by AI.We incorporated API integration to fetch data, providing users with an effortless and dynamic experience in generating AI-driven images. An 4 min read Like