Skip to content

Commit d752612

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #964 from yashwanthvarma18/RandomJokeGenerator-yashwanthvarma18
Random Joke Generator-yashwanthvarma18
2 parents deafbaf + bbd560b commit d752612

File tree

3 files changed

+110
-0
lines changed

3 files changed

+110
-0
lines changed

‎JokeGenerator/yashwanthvarma18/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Merriweather:wght@700&family=Montserrat:wght@200&family=Oswald:wght@200;500&family=Poppins:wght@300&family=Signika:wght@300&family=Teko:wght@500&family=Titillium+Web:wght@600&display=swap" rel="stylesheet">
10+
<title>JOKE GENERATOR</title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1>🤪 Joke Generator 🤪</h1>
15+
<button id="generateJoke">Get Joke</button>
16+
<div class="joke-container">
17+
<p id="jokeText"></p>
18+
</div>
19+
</div>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎JokeGenerator/yashwanthvarma18/script.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const apiKey = 'b27527bd72mshb1130221132428bp13b2d2jsn3c6f2c71ffcf'; // Replace with your JokeAPI key
2+
const jokeText = document.getElementById('jokeText');
3+
const generateJokeButton = document.getElementById('generateJoke');
4+
5+
generateJokeButton.addEventListener('click', getJoke);
6+
7+
function getJoke() {
8+
fetch(`https://v2.jokeapi.dev/joke/Any?format=txt&key=${apiKey}`)
9+
.then(response => response.text())
10+
.then(data => {
11+
12+
jokeText.innerText = data;
13+
})
14+
.catch(error => {
15+
jokeText.innerText = 'Failed to fetch a joke. Please try again later.';
16+
});
17+
}

‎JokeGenerator/yashwanthvarma18/style.css

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background-image: url('https://images4.alphacoders.com/133/1330757.png');
5+
background-size: cover;
6+
margin: 0;
7+
padding: 0;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
color: #fff;
13+
}
14+
15+
.container {
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
align-items: center;
20+
background-color: rgba(0, 0, 0, 0.3); /* Grayish background with 50% opacity */
21+
border-radius: 10px;
22+
box-shadow: 0 0 10px rgba(206, 192, 192, 0.2);
23+
backdrop-filter: blur(5px); /* Apply a blur effect */
24+
padding: 20px;
25+
max-width: 400px;
26+
margin: 0 auto;
27+
height: 300px; /* Fixed height for the box */
28+
overflow-y: auto; /* Allow vertical scrolling if needed */
29+
text-align: center; /* Left-align text */
30+
font-family: 'Bebas Neue', sans-serif;
31+
font-family: 'Fjalla One', sans-serif;
32+
font-family: 'Merriweather', serif;
33+
font-family: 'Montserrat', sans-serif;
34+
font-family: 'Oswald', sans-serif;
35+
font-family: 'Poppins', sans-serif;
36+
font-family: 'Signika', sans-serif;
37+
font-family: 'Teko', sans-serif;
38+
font-family: 'Titillium Web', sans-serif;/* Use a monospace font for proper text alignment */
39+
}
40+
41+
h1 {
42+
margin-top: 6 0px;
43+
color: #fff;
44+
}
45+
46+
button {
47+
background-color: #007BFF;
48+
color: #fff;
49+
border: none;
50+
padding: 8px 16px;
51+
font-size: 18px;
52+
border-radius: 5px;
53+
cursor: pointer;
54+
margin-top: 5px;
55+
transition: transform 0.2s ease; /* Add transition for smooth scaling */
56+
}
57+
58+
button:hover {
59+
background-color: #0056b3;
60+
transform: scale(1.05); /* Scale up by 10% on hover */
61+
}
62+
63+
.joke-container {
64+
margin-top: 3px;
65+
}
66+
67+
#jokeText {
68+
font-size: 18px;
69+
color: #fff;
70+
line-height: 1.2; /* You can adjust this value as needed for spacing */
71+
}

0 commit comments

Comments
 (0)