Skip to content

Commit de94de1

Browse files
PBJIPBJI
authored
Merge pull request #721 from AckermanLevi1/RandomJokeGenerator-AckermanLevi1
Joke Generator Added
2 parents 43b8bfa + 1b95bff commit de94de1

File tree

3 files changed

+210
-0
lines changed

3 files changed

+210
-0
lines changed

‎JokeGenerator/AckermanLevi1/index.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/* common styles */
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
a {
9+
color: #111;
10+
text-decoration: none;
11+
}
12+
13+
.btn {
14+
padding: 10px 20px; /* top-bottom left-right */
15+
margin: 0 5px; /* top-bottom left-right */
16+
font-size: 0.99rem;
17+
border-radius: 3px;
18+
outline: none;
19+
border: none;
20+
color: #fff;
21+
background-color: blue; /* default color */
22+
transition:cubic-bezier(0.39, 0.575, 0.565, 1);
23+
}
24+
25+
.btn:hover {
26+
cursor: pointer; /* hand symbol */
27+
}
28+
29+
/* body */
30+
body {
31+
width: 100vw;
32+
height: 100vh;
33+
overflow: hidden;
34+
font-family: sans-serif;
35+
display: flex;
36+
justify-content: center; /* horizontally center */
37+
align-items: center; /* vertically center */
38+
text-align: center;
39+
}
40+
41+
/* container */
42+
.container {
43+
width: 450px;
44+
padding: 50px 20px; /* top-bottom left-right */
45+
background-color: #fff;
46+
border-radius: 5px;
47+
}
48+
49+
/* h1 */
50+
h1 {
51+
font-size: 1.1rem;
52+
color: #888;
53+
margin-bottom: 20px;
54+
text-decoration: underline;
55+
}
56+
57+
/* .joke-text */
58+
.joke-text {
59+
font-size: 1.8rem;
60+
margin-bottom: 30px;
61+
font-family: monospace;
62+
}
63+
64+
/* .new-joke-btn */
65+
.new-joke-btn {
66+
background-color: #FF0000;
67+
}
68+
69+
/* .tweet-btn link */
70+
.tweet-btn {
71+
background-color: #00ACEE;
72+
}
73+
body {
74+
position: absolute;
75+
top: 0;
76+
left: 0;
77+
right: 0;
78+
bottom: 0;
79+
animation: bg-animation 10s infinite;
80+
}
81+
82+
@-webkit-keyframes bg-animation {
83+
0% {
84+
background-color: red;
85+
}
86+
15% {
87+
background-color: yellow;
88+
}
89+
30% {
90+
background-color: green;
91+
}
92+
45% {
93+
background-color: blue;
94+
}
95+
60% {
96+
background-color: purple;
97+
}
98+
75% {
99+
background-color: pink;
100+
}
101+
90% {
102+
background-color: brown;
103+
}
104+
100% {
105+
background-color: red;
106+
}
107+
}
108+
109+
@keyframes bg-animation {
110+
0% {
111+
background-color: red;
112+
}
113+
15% {
114+
background-color: yellow;
115+
}
116+
30% {
117+
background-color: green;
118+
}
119+
45% {
120+
background-color: blue;
121+
}
122+
60% {
123+
background-color: purple;
124+
}
125+
75% {
126+
background-color: pink;
127+
}
128+
90% {
129+
background-color: brown;
130+
}
131+
100% {
132+
background-color: red;
133+
}
134+
}

‎JokeGenerator/AckermanLevi1/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="index.css" />
7+
<title>Random Joke Generator</title>
8+
</head>
9+
<body>
10+
11+
<!-- container -->
12+
<div class="container">
13+
<!-- heading -->
14+
<h1>Funny Jokes 😆</h1>
15+
<!-- joke text -->
16+
<p class="joke-text">
17+
Joke on the way...
18+
</p>
19+
<!-- buttons -->
20+
<div class="buttons">
21+
<!-- .new-joke Button -->
22+
<button class="btn new-joke-btn">New Joke</button>
23+
<!-- .tweet Button (actually a link). No href initially -->
24+
<a href="" class="btn tweet-btn" target="_blank" rel="noopener noreferrer">Post on X!!</a>
25+
</div>
26+
</div>
27+
28+
29+
<script type="text/javascript" src="index.js"></script>
30+
</body>
31+
</html>

‎JokeGenerator/AckermanLevi1/index.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// grab a reference for necessary HTML elements
2+
// .joke-text
3+
const jokeText = document.querySelector('.joke-text');
4+
// .new-joke-btn
5+
const newJokeBtn = document.querySelector('.new-joke-btn');
6+
// .tweet-btn (link)
7+
const tweetBtn = document.querySelector('.tweet-btn');
8+
9+
// add 'click' eventListener to .new-joke-btn
10+
newJokeBtn.addEventListener('click', getJoke);
11+
12+
// immediately call getJoke()
13+
getJoke();
14+
15+
// getJoke() function definition
16+
function getJoke() {
17+
// make an API request to https://icanhazdadjoke.com/'
18+
fetch('https://icanhazdadjoke.com/', {
19+
headers: {
20+
'Accept': 'application/json'
21+
}
22+
}).then(function(response) {
23+
/* convert Stringified JSON response to Javascript Object */
24+
return response.json();
25+
}).then(function(data) {
26+
/* replace innerText of .joke-text with data.joke */
27+
// extract the joke text
28+
const joke = data.joke;
29+
// do the replacement
30+
jokeText.innerText = joke;
31+
32+
/* make the tweetBtn(.tweet-btn link) work by setting href */
33+
// create tweet link with joke
34+
const tweetLink = `https://twitter.com/share?text=${joke}`;
35+
// set the href
36+
tweetBtn.setAttribute('href', tweetLink);
37+
}).catch(function(error) {
38+
// if some error occured
39+
jokeText.innerText = 'Oops! Some error happened :(';
40+
// removes the old href from .tweet-btn if found any
41+
tweetBtn.removeAttribute('href');
42+
// console log the error
43+
console.log(error);
44+
});
45+
}

0 commit comments

Comments
 (0)