Design Joke Generator App in HTML CSS & JavaScript (original) (raw)

Last Updated : 21 Apr, 2025

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

• HTML
• CSS
• JavaScript

Approach

• Create the Joke Generator Application UI Structure using HTML Elements like
  ,

  , . 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 `

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: