Welcome to the tutorial for today. We're going to make a Random Joke Generator today. We'll be using HTML, CSS and JavaScript for this. In this tutorial, we use a Joke API.
With each button click, a joke is randomly displayed by the joke generator. For this JavaScript project, you require a basic understanding of ES6. JavaScript intermediates will find this tutorial to be very helpful. Let's get the project underway.
JavaScript has been utilized to establish a connection with the API, obtain jokes, and dynamically modify the joke content on your website. With every click of the "Get New Joke" button, a new, funny joke is retrieved. To add to the fun, we've included a "Copy Joke" button that makes it simple for you to copy your preferred jokes to the clipboard and share them with loved ones.
Key Features
The "Random Joke Generator" project provides several features to make the user experience interesting and amusing:
Generate Random Jokes: The project's main feature is the ability to create jokes at random with just one click. Every time a user clicks the "Get New Joke" button, they can quickly access a new, funny joke.
Interactive User Interface: The project features a visually stunning and interactive user interface. It has an emoji for extra fun, a prominent "Random Joke Generator" heading, and a special joke container for the jokes.
Copy to Clipboard: By using the "Copy Joke" button, users can save their favorite jokes to the clipboard. They can easily save jokes for later or share the humor with friends thanks to this feature.
API Integration: To retrieve random jokes, the application establishes a connection with the "icanhazdadjoke.com" API. This integration guarantees a steady stream of amusing and new content.
CSS Styling: The application's visual appeal is improved using CSS, which draws users in and makes them feel welcome.
Simple Integration: To add a little humor and interaction, you can incorporate this project with ease into your website, app, or other web-based projects.
Low Maintenance: Because jokes are pulled from an external API, the project requires very little maintenance. This makes it easy for you to maintain the freshness of your content.
Random Joke Generator Using HTML, CSS and JavaScript
The HTML portion is where we start. To begin, insert the code given below into your HTML file.
A wrapper containing other elements makes up the HTML code. One of the emojis inside the wrapper is laughing. I've utilized the &128514 Unicode laughing emoji. The emoji in question is a wrapper for a span element. The joke is shown in the p element, which comes after the span. The button with the id btn is the last addition. The text "Get New Joke" appears on the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="jokes">
<h1>Joke App</h1>
<span>😂</span>
<p id="jokeText">Fetching a joke...</p>
<button id="newJokeBtn">Get New Joke</button>
<button id="copyJokeBtn">Copy Joke</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
We then incorporate styles into our generator. Paste the following code into your stylesheet's style.css after copying it.
* {
margin: 0;
padding: 0;
box-shadow: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.jokes {
margin-top: 30px;
}
.jokes h1 {
font-size: 2.5em;
color: #444;
margin-bottom: 10px;
}
span{
display: block;
text-align: center;
font-size: 100px;
}
#jokeText {
height: 110px;
width: 400px;
margin: auto;
padding: 15px;
text-align: start;
font-size: 1.2em;
color: #333;
margin-bottom: 20px;
overflow-y: scroll;
border: 2px solid #eae0e0;
border-radius: 10px;
box-shadow: 0px 2px 6px 0px;
}
#newJokeBtn,
#copyJokeBtn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
margin: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#newJokeBtn:hover,
#copyJokeBtn:hover {
background-color: #3e8e41;
}
@media (max-width: 600px) {
.jokes h1 {
font-size: 2.8em;
}
#jokeText {
height: 180px;
width: 80%;
}
}
Next, we use JavaScript to give this generator more functionality. Paste the following code into your JavaScript file after copying it.
const MAX_CHARACTERS = 250;
const joke = document.getElementById('jokeText');
const jokeBtn = document.getElementById('newJokeBtn');
const cpyBtn = document.getElementById('copyJokeBtn');
// Fetch a joke from an external API
async function getJoke() {
try {
const response = await fetch('https://sv443.net/jokeapi/v2/joke/programming,coding');
const data = await response.json();
const truncatedJoke = data.joke.slice(0, MAX_CHARACTERS);
joke.textContent = data.joke;
} catch (error) {
console.error('Error fetching joke:', error);
joke.textContent = 'Failed to fetch joke. Please try again.';
}
}
// Copy the joke to clipboard
function copyJoke() {
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!');
}
// Event listeners
jokeBtn.addEventListener('click', getJoke);
cpyBtn.addEventListener('click', copyJoke);
// Initial joke fetch
getJoke();