forked from hariom1616/Tech-Inventory
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Laugh.html
113 lines (102 loc) · 4.12 KB
/
Laugh.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Click to get a random, funny joke and brighten your day with humor!">
<title>Funny Joke Generator - Laugh Now!</title>
<style>
/* Body styling for basic appearance */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
text-align: center;
margin-top: 100px;
}
/* Styling the main joke container */
.container {
background-color: #ffeb3b;
padding: 30px;
border-radius: 12px;
display: inline-block;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: background-color 0.5s ease, transform 0.5s ease;
max-width: 400px;
width: 90%;
}
/* Styling for the joke text */
#funnyMessage {
font-size: 1.7em;
color: #333;
margin-bottom: 20px;
opacity: 0;
transition: opacity 0.5s ease;
}
/* Styling for the button */
#jokeButton {
padding: 12px 25px;
font-size: 1.1em;
color: #fff;
background-color: #f44336;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Button hover effect for better interactivity */
#jokeButton:hover {
background-color: #d32f2f;
transform: scale(1.1);
}
/* Animation for container bounce effect */
.animate-bounce {
animation: bounce 1s ease infinite;
}
/* Keyframes for bounce animation */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
</style>
</head>
<body>
<!-- Main container with joke display and button -->
<div class="container animate-bounce">
<!-- Joke message with aria-live for screen readers -->
<div id="funnyMessage" aria-live="polite">Click the button to see something funny!</div>
<!-- Button to trigger the joke display -->
<button id="jokeButton" onclick="showFunnyMessage()">Make me laugh!</button>
</div>
<script>
// Array of jokes to be displayed randomly
const messages = [
"Why did the scarecrow win an award? Because he was outstanding in his field!",
"I'm reading a book on anti-gravity. It's impossible to put down!",
"Parallel lines have so much in common. It's a shame they’ll never meet.",
"Did you hear about the mathematician who’s afraid of negative numbers? He'll stop at nothing to avoid them!",
"Why don’t scientists trust atoms? Because they make up everything!"
];
// Function to display a random joke
function showFunnyMessage() {
// Select a random joke from the array
const message = messages[Math.floor(Math.random() * messages.length)];
const funnyMessageElement = document.getElementById('funnyMessage');
// Update joke text and make it visible
funnyMessageElement.innerText = message;
funnyMessageElement.style.opacity = 1;
// Change container color randomly
const colors = ['#ffeb3b', '#4caf50', '#2196f3', '#f44336', '#9c27b0'];
document.querySelector('.container').style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
// Add a slight shake effect for fun
document.querySelector('.container').style.transform = 'scale(1.05)';
setTimeout(() => {
document.querySelector('.container').style.transform = 'scale(1)';
}, 200);
}
</script>
</body>
</html>