Skip to content

Commit 784ffba

Browse files
vaibhava17vaibhava17
authored
Merge pull request #88 from vk0812/jokes
Joke Generator
2 parents 2c3718a + 656f193 commit 784ffba

File tree

6 files changed

+228
-0
lines changed

6 files changed

+228
-0
lines changed

‎easy/Jokes/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Hacktoberfest 2022 - JavaScript Easy Programs
2+
3+
## Joke Generator
4+
5+
### Description
6+
This project will generate random dad jokes using API links. For this you need to have a basic idea about HTML CSS and JavaScript. Look at the images below to see how the project finally looks.
7+
8+
### Image Example
9+
![Image-1](./images/Screenshot%201.png)
10+
![Image-2](./images/Screenshot%202.png)
11+
12+
### Maintainer
13+
- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
14+
- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
15+
16+
### License
17+
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../LICENSE) file for details**
18+
19+
### Happy Coding! :smile:

‎easy/Jokes/app.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const url = 'https://icanhazdadjoke.com/';
2+
3+
const btn = document.querySelector('.btn');
4+
const result = document.querySelector('.result');
5+
6+
btn.addEventListener('click', () => {
7+
fetchDadJoke();
8+
});
9+
10+
const fetchDadJoke = async () => {
11+
result.textContent = 'Loading...';
12+
try {
13+
const response = await fetch(url, {
14+
headers: {
15+
Accept: 'application/json',
16+
'User-Agent': 'learning app',
17+
},
18+
});
19+
if (!response.ok) {
20+
throw new Error(' error');
21+
}
22+
const data = await response.json();
23+
24+
result.textContent = data.joke;
25+
} catch (error) {
26+
console.log(error.message);
27+
result.textContent = 'There was an error...';
28+
}
29+
};
30+
31+
fetchDadJoke();

‎easy/Jokes/images/Screenshot 1.png‎

62.8 KB
Loading

‎easy/Jokes/images/Screenshot 2.png‎

60.8 KB
Loading

‎easy/Jokes/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Dad Jokes</title>
8+
<link rel="stylesheet" href="./styles.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<button class="btn">random dad jokes</button>
13+
<p class="result">
14+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
15+
unde quibusdam quia ex asperiores consectetur quis maxime corporis
16+
suscipit expedita.
17+
</p>
18+
</div>
19+
<script src="./app.js"></script>
20+
</body>
21+
</html>

‎easy/Jokes/styles.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
*,
2+
::after,
3+
::before {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--primary-100: hsl(21, 94%, 87%);
9+
--primary-200: hsl(21, 80%, 74%);
10+
--primary-300: hsl(21, 65%, 59%);
11+
--primary-400: hsl(21, 57%, 50%);
12+
/* primary/main color */
13+
--primary-500: hsl(21, 62%, 45%);
14+
--primary-600: hsl(21, 77%, 34%);
15+
--primary-700: hsl(21, 81%, 29%);
16+
--primary-800: hsl(21, 84%, 25%);
17+
--primary-900: hsl(21, 91%, 17%);
18+
19+
/* grey */
20+
--grey-50: #f8fafc;
21+
--grey-100: #f1f5f9;
22+
--grey-200: #e2e8f0;
23+
--grey-300: #cbd5e1;
24+
--grey-400: #94a3b8;
25+
--grey-500: #64748b;
26+
--grey-600: #475569;
27+
--grey-700: #334155;
28+
--grey-800: #1e293b;
29+
--grey-900: #0f172a;
30+
/* rest of the colors */
31+
--black: #222;
32+
--white: #fff;
33+
--red-light: #f8d7da;
34+
--red-dark: #842029;
35+
--green-light: #d1e7dd;
36+
--green-dark: #0f5132;
37+
38+
--smallText: 0.7em;
39+
/* rest of the vars */
40+
--backgroundColor: var(--grey-50);
41+
--textColor: var(--grey-900);
42+
--borderRadius: 0.25rem;
43+
--letterSpacing: 1px;
44+
--transition: 0.3s ease-in-out all;
45+
--max-width: 1120px;
46+
--fixed-width: 600px;
47+
--fluid-width: 90vw;
48+
/* box shadow*/
49+
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
50+
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
51+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
52+
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
53+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
54+
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
55+
0 10px 10px -5px rgba(0, 0, 0, 0.04);
56+
}
57+
58+
body {
59+
background: var(--backgroundColor);
60+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
61+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
62+
font-weight: 400;
63+
line-height: 1.75;
64+
color: var(--textColor);
65+
}
66+
67+
p {
68+
margin-bottom: 1.5rem;
69+
max-width: 40em;
70+
}
71+
72+
h1,
73+
h2,
74+
h3,
75+
h4,
76+
h5 {
77+
margin: 0;
78+
margin-bottom: 1.38rem;
79+
font-family: var(--headingFont);
80+
font-weight: 400;
81+
line-height: 1.3;
82+
text-transform: capitalize;
83+
letter-spacing: var(--letterSpacing);
84+
}
85+
86+
h1 {
87+
margin-top: 0;
88+
font-size: 3.052rem;
89+
}
90+
91+
h2 {
92+
font-size: 2.441rem;
93+
}
94+
95+
h3 {
96+
font-size: 1.953rem;
97+
}
98+
99+
h4 {
100+
font-size: 1.563rem;
101+
}
102+
103+
h5 {
104+
font-size: 1.25rem;
105+
}
106+
107+
small,
108+
.text-small {
109+
font-size: var(--smallText);
110+
}
111+
112+
a {
113+
text-decoration: none;
114+
}
115+
ul {
116+
list-style-type: none;
117+
padding: 0;
118+
}
119+
120+
.img {
121+
width: 100%;
122+
display: block;
123+
object-fit: cover;
124+
}
125+
.btn {
126+
cursor: pointer;
127+
color: var(--white);
128+
background: var(--primary-500);
129+
border: transparent;
130+
border-radius: var(--borderRadius);
131+
letter-spacing: var(--letterSpacing);
132+
padding: 0.375rem 0.75rem;
133+
box-shadow: var(--shadow-1);
134+
transition: var(--transition);
135+
text-transform: capitalize;
136+
display: inline-block;
137+
}
138+
.btn:hover {
139+
background: var(--primary-700);
140+
box-shadow: var(--shadow-3);
141+
}
142+
/*
143+
===============
144+
Jokes
145+
===============
146+
*/
147+
148+
.container {
149+
width: 90vw;
150+
max-width: 700px;
151+
margin: 0 auto;
152+
padding-top: 5rem;
153+
}
154+
155+
.result {
156+
font-size: 1.5rem;
157+
}

0 commit comments

Comments
 (0)