Skip to content

Commit 5484c0b

Browse files
AnkushSinghGandhiAnkushSinghGandhi
authored
Merge pull request #2 from Anubhab2002/main
Created Dad-Jokes-Extension
2 parents 688e472 + 01370d2 commit 5484c0b

File tree

6 files changed

+145
-1
lines changed

6 files changed

+145
-1
lines changed

‎README.md‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,19 @@
1-
# jokes-chrome-extension
1+
# jokes-chrome-extension
2+
3+
Developed by **Anubhab Mandal**.
4+
5+
## This is a chrome extension that shows you random jokes from the internet that make your day
6+
7+
A small guide on how to use this extension:
8+
9+
1. Fork the repository to make a personal copy on your GitHub Profile.
10+
2. perform ```git clone <url of the forked repository>```.
11+
3. go to ```chrome://extensions``` on your chrome browser.
12+
4. turn on the developer mode and click on ```load unpacked```.
13+
5. then browse to the directory of the local clone of the project and click on ```open```.
14+
15+
### Hooray, the jokes are all yours now.
16+
17+
# Don't forget to give us a STAR!!
18+
19+
## Visit [Anubhab Mandal](https://github.com/Anubhab2002) for more Projects!

‎joke-icon.png‎

62.9 KB
Loading

‎jokes.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const API_URL = "https://icanhazdadjoke.com"
2+
3+
4+
if (navigator.onLine) {
5+
const request_new_joke = async () => {
6+
const joke = await fetch(API_URL, {
7+
method: "GET",
8+
headers: { "Accept": "application/json" }
9+
})
10+
.then((response) => response.json())
11+
.then((response) => response.joke)
12+
.catch((err) => {
13+
err
14+
})
15+
16+
document.getElementById('joke').innerText = joke
17+
}
18+
19+
document.addEventListener("DOMContentLoaded", () => {
20+
request_new_joke()
21+
})
22+
23+
document.getElementById('new').addEventListener("click", () => {
24+
request_new_joke()
25+
document.getElementById('like').style.backgroundColor = "rgb(88, 221, 245)"
26+
document.getElementById('like').innerText = "Like"
27+
})
28+
document.getElementById('like').addEventListener("click", () => {
29+
document.getElementById('like').style.backgroundColor = "#008CBA"
30+
document.getElementById('like').innerText = "Liked"
31+
})
32+
33+
}
34+
else{
35+
document.getElementById('joke').innerText = "No Internet Connection"
36+
}

‎manifest.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Dad Jokes",
4+
"version": "1.0.0",
5+
"description": "Random lame jokes that make your day",
6+
"action": {
7+
"default_popup": "popup.html",
8+
"default_icon": "joke-icon.png"
9+
},
10+
"icons": {
11+
"16": "joke-icon.png",
12+
"32": "joke-icon.png",
13+
"48": "joke-icon.png",
14+
"128": "joke-icon.png"
15+
}
16+
}

‎popup.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
width: 300px;
3+
background-color:cornsilk;
4+
}
5+
.ml {
6+
margin: auto;
7+
text-align: center;
8+
}
9+
.title {
10+
text-align: center;
11+
}
12+
.container {
13+
height: 200px;
14+
position: relative;
15+
border: 3px solid green;
16+
}
17+
.joke {
18+
text-align: justify;
19+
top: 40%;
20+
font-size: 15px;
21+
padding: 10px;
22+
}
23+
.al-auto {
24+
margin: 0;
25+
position: absolute;
26+
bottom: 10%;
27+
left: 50%;
28+
-ms-transform: translate(-50%, -50%);
29+
transform: translate(-50%, -50%);
30+
}
31+
32+
.button {
33+
background-color: #4CAF50; /* Green */
34+
border: none;
35+
color: white;
36+
padding: 5px;
37+
text-align: center;
38+
text-decoration: none;
39+
display: inline-block;
40+
font-size: 16px;
41+
font-weight: bold;
42+
}
43+
.button1 {background-color: #4CAF50;}
44+
.button2 {background-color: rgb(88, 221, 245);}

‎popup.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
9+
<link rel="stylesheet" href="popup.css">
10+
11+
<title>Dad Jokes Extension</title>
12+
</head>
13+
14+
<body>
15+
<h1 class="ml title">Dad Joke of the Moment</h1>
16+
17+
<div class="container">
18+
<h3 class="joke" id="joke"></h3>
19+
<div class="al-auto">
20+
<button id="like" class="button button2">Like</button>
21+
<button id="new" class="button button1">New Joke</button>
22+
</div>
23+
</div>
24+
<p class="ml">
25+
&copy; <a href="https://github.com/CodeVisors/dad-jokes-extension" style="text-decoration: none; color:blue;">CodeVisors</a> 2021
26+
</p>
27+
</body>
28+
29+
<script src="jokes.js"></script>
30+
</html>

0 commit comments

Comments
 (0)