Skip to content

Commit aa50c27

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #102 from jugeshraghav/chuckNorrisJokes
Chuck Norris jokes
2 parents c36a725 + 2f6b3c5 commit aa50c27

File tree

5 files changed

+180
-0
lines changed

5 files changed

+180
-0
lines changed

‎Chuck-Norris-Jokes/ChuckNorris.png

61 KB
Loading

‎Chuck-Norris-Jokes/Readme.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Welcome 🖐 to the Chuck Norris Joke Generator
2+
It is a simple API integrated joke generator. We can generate jokes by selecting a category of jokes. Hope you people will enjoy reading the jokes.
3+
4+
![Default View](ChuckNorris.png)
5+
6+
7+
## 💻Tech Stack
8+
<br>
9+
10+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
11+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
12+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
13+
14+
<br>
15+
16+
### How to use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Click on different categories and read the jokes.
29+
30+
<br>
31+
32+
## Happy Coding!

‎Chuck-Norris-Jokes/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Chuck Norris</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
14+
<body>
15+
<h3>Chuck Norries</h3>
16+
<div id="box1">
17+
<button id="btn1"></button>
18+
<button id="btn2"></button>
19+
<button id="btn3"></button>
20+
<button id="btn4"></button><br>
21+
<button id="btn5"></button>
22+
<button id="btn6"></button>
23+
<button id="btn7"></button>
24+
<button id="btn8"></button><br>
25+
<button id="btn9"></button>
26+
<button id="btn10"></button>
27+
<button id="btn11"></button>
28+
<button id="btn12"></button><br>
29+
<button id="btn13"></button>
30+
<button id="btn14"></button>
31+
<button id="btn15"></button>
32+
<button id="btn16"></button>
33+
</div>
34+
35+
36+
37+
<p>Selected Category:</p>
38+
<p id="text"></p>
39+
<div id="box2">
40+
<p id="joke"></p>
41+
<script src="index.js"></script>
42+
</div>
43+
<p id="footer">New Joke</p>
44+
<hr>
45+
46+
</body>
47+
48+
</html>

‎Chuck-Norris-Jokes/index.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
let buttons = document.querySelectorAll("button");
3+
let text = document.querySelector("#text");
4+
let joke = document.querySelector("#joke");
5+
let url = "https://api.chucknorris.io/jokes/categories";
6+
7+
fetch(url)
8+
.then(response => {
9+
return response.json()
10+
})
11+
.then(newdata =>{
12+
buttons[0].innerText = newdata[0];
13+
buttons[1].innerText = newdata[1];
14+
buttons[2].innerText = newdata[2];
15+
buttons[3].innerText = newdata[3];
16+
buttons[4].innerText = newdata[4];
17+
buttons[5].innerText = newdata[5];
18+
buttons[6].innerText = newdata[6];
19+
buttons[7].innerText = newdata[7],
20+
buttons[8].innerText = newdata[8];
21+
buttons[9].innerText = newdata[9];
22+
buttons[10].innerText = newdata[10];
23+
buttons[11].innerText = newdata[11];
24+
buttons[12].innerText = newdata[12];
25+
buttons[13].innerText = newdata[13];
26+
buttons[14].innerText = newdata[14];
27+
buttons[15].innerText = newdata[15];
28+
buttons[16].innerText = newdata[16]
29+
});
30+
31+
32+
33+
for (item of buttons) {
34+
item.addEventListener('click', (e) => {
35+
let category = e.target.innerText;
36+
37+
let url1 = `https://api.chucknorris.io/jokes/random?category=${category}`;
38+
fetch(url1)
39+
.then(response => {
40+
return response.json()
41+
})
42+
.then(data =>{
43+
text.innerText = category;
44+
joke.innerText = data.value;
45+
});
46+
})};
47+

‎Chuck-Norris-Jokes/style.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
*{
2+
margin-bottom:1rem;;
3+
padding:0;
4+
text-align:center;
5+
}
6+
7+
div{
8+
width:22rem;
9+
height:15rem;
10+
text-align:center;
11+
margin:auto;
12+
margin-bottom:1.5rem;
13+
padding:10px;
14+
}
15+
#box1{
16+
background-color:lightslategrey;
17+
display:flex;
18+
flex-wrap:wrap;
19+
justify-content:space-evenly;
20+
}
21+
#box2{
22+
background-color:blue;
23+
}
24+
25+
h3{
26+
font-size:30px
27+
}
28+
button{
29+
width:5rem;
30+
height:2rem;
31+
margin:0.2rem;
32+
border:none;
33+
border-radius:5px;
34+
box-shadow:1px 1px rgb(95, 92, 92);
35+
font-size:1rem;
36+
}
37+
38+
p{
39+
display:inline-block;
40+
font-size:20px;
41+
}
42+
p#joke{
43+
color:white;
44+
font-size:1.5rem;
45+
margin:30px;
46+
}
47+
#footer{
48+
color:blue;
49+
font-size:1rem;
50+
}
51+
hr{
52+
width:10rem;
53+
}

0 commit comments

Comments
 (0)