Skip to content

Commit efef811

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1920 from mdvadiyatnaqvi/main
Random Joke Generator
2 parents 13463da + 22890ee commit efef811

4 files changed

Lines changed: 95 additions & 0 deletions

File tree

‎Projects/Random Joke Generator/Readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Random Joke Generator main folder and readme file created

‎Projects/Random Joke Generator/index.html‎

Lines changed: 22 additions & 0 deletions
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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Random Joke Generator</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Your Joke Here... 😆</h1>
14+
<p class="joke-text">Joke Loading...</p>
15+
<div class="button">
16+
<button class="btn new-joke-btn">New Joke</button>
17+
</div>
18+
</div>
19+
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎Projects/Random Joke Generator/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const jokeText = document.querySelector('.joke-text');
2+
const newJokeBtn = document.querySelector('.new-joke-btn');
3+
newJokeBtn.addEventListener('click', getJoke);
4+
getJoke();
5+
6+
function getJoke() {
7+
fetch('https://icanhazdadjoke.com/', {
8+
headers: {
9+
'Accept': 'application/json'
10+
}
11+
}).then(function(response) {
12+
return response.json();
13+
}).then(function(data) {
14+
const joke = data.joke;
15+
jokeText.innerText = joke;
16+
});
17+
}

‎Projects/Random Joke Generator/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
width: 100vw;
8+
height: 100vh;
9+
overflow: hidden;
10+
background-color: #303244;
11+
font-family: sans-serif;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
text-align: center;
16+
}
17+
.container {
18+
width: 450px;
19+
padding: 50px 20px;
20+
background-color: #ffe0ba;
21+
border-radius: 10px;
22+
box-shadow: 10px 10px 10px rgba(178, 178, 178, 0.6);
23+
}
24+
.btn {
25+
padding: 10px 20px;
26+
margin: 0 5px;
27+
font-size: 0.99rem;
28+
border-radius: 3px;
29+
outline: none;
30+
border: none;
31+
color: #fff;
32+
background-color: blue;
33+
}
34+
h1 {
35+
font-size: 1.1rem;
36+
color: #888;
37+
margin-bottom: 20px;
38+
}
39+
40+
.btn:hover {
41+
cursor: pointer;
42+
}
43+
.new-joke-btn {
44+
background-color: #ff7c7c;
45+
}
46+
.new-joke-btn:hover {
47+
background-color: #9bff7c;
48+
color: black;
49+
}
50+
51+
.joke-text {
52+
font-size: 1.8rem;
53+
margin-bottom: 30px;
54+
font-family: monospace;
55+
}

0 commit comments

Comments
 (0)