Tell me a Joke Project-III
Welcome to the Random Joke Generator, a fun and simple web project that brings a smile to your face! If you’ve just watched my video, you already know how easy it is to create this entertaining project using HTML, CSS, and JavaScript.
Project Features: The application will have the following features:
1. The application will have a list of jokes stored in a file.
2. The application will have a function to display a random joke.
About the Project
This project generates a random joke every time you visit the page. The webpage is designed with Bootstrap 5 for a clean and modern look. The jokes are stored in an array, and JavaScript selects one randomly to display on the screen.
Features
Simple & Clean UI – Styled with Bootstrap for a professional look.
Dynamic Content – Jokes change every time you reload the page.
Fully Responsive – Works well on different screen sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<title>Random Joke Generator</title>
<style>
.container{
width: 50%;
margin: 0 auto;
background-color: aliceblue;
margin-top: 250px;
padding-top: 25px;
padding-bottom: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#"><b>Jokes</b></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><b>Home</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><b>Services</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><b>About us</b></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container bg-gray">
<figure class="text-center">
<blockquote class="blockquote">
<p id="joke">Loading joke...</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const jokes = [
"Why don't scientists trust atoms? Because they make up everything!",
"What do you call fake spaghetti? An impasta!",
"Why did the scarecrow win an award? Because he was outstanding in his field!",
"Why don’t skeletons fight each other? They don’t have the guts.",
"What did one wall say to the other? I'll meet you at the corner!",
"Why do cows have hooves instead of feet? Because they lactose!",
"What did the grape do when he got stepped on? Nothing, he just let out a little wine!",
"Why was the math book sad? Because it had too many problems.",
"What do you call cheese that isn't yours? Nacho cheese!",
"Why couldn't the bicycle stand up by itself? It was two-tired!"
];
document.getElementById("joke").innerText = jokes[Math.floor(Math.random() * jokes.length)];
</script>
</body>
</html>
I hope you enjoyed this project! Feel free to customize it, add more jokes, or even integrate an API for endless fun. Let me know in the comments how you improved it!