diff --git a/Random-Jokes-Chrome-Extension/README.md b/Random-Jokes-Chrome-Extension/README.md new file mode 100644 index 0000000..29ffc25 --- /dev/null +++ b/Random-Jokes-Chrome-Extension/README.md @@ -0,0 +1,25 @@ +# Random-Jokes-Chrome-Extension + +This is a API based projects that named _Random jokes Generator_. It uses an [JOKE API](https://icanhazdadjoke.com/slack) that gives you a new joke everytime. + +So I integrate it with a extension by which you can click every time and get new joke. + +API Documentation: https://icanhazdadjoke.com/api + +API link: https://icanhazdadjoke.com/slack + +> **In response you will get:** +``` +{ + "attachments": [ + { + "fallback": "My first time using an elevator was an uplifting experience. The second time let me down.", + "footer": " - ", + "text": "My first time using an elevator was an uplifting experience. The second time let me down." + } + ], + "response_type": "in_channel", + "username": "icanhazdadjoke" +} +``` +We are interested in the **_text_** part in the response, so extract it using JS and replace with your HTML and show it to the extension. diff --git a/Random-Jokes-Chrome-Extension/logo1.png b/Random-Jokes-Chrome-Extension/logo1.png new file mode 100644 index 0000000..86762df Binary files /dev/null and b/Random-Jokes-Chrome-Extension/logo1.png differ diff --git a/Random-Jokes-Chrome-Extension/manifest.json b/Random-Jokes-Chrome-Extension/manifest.json new file mode 100644 index 0000000..d22c5bf --- /dev/null +++ b/Random-Jokes-Chrome-Extension/manifest.json @@ -0,0 +1,13 @@ +{ + "name": "Random Jokes", + "version": "0.0.1", + "manifest_version": 2, + "browser_action": { + "default_popup": "popup.html", + "default_icon": "logo1.png" + }, + "icons": { + "128": "logo1.png" + }, + "permissions": ["activeTab"] +} \ No newline at end of file diff --git a/Random-Jokes-Chrome-Extension/popup.css b/Random-Jokes-Chrome-Extension/popup.css new file mode 100644 index 0000000..ea895c5 --- /dev/null +++ b/Random-Jokes-Chrome-Extension/popup.css @@ -0,0 +1,14 @@ +body{ + height: 200px; + width: 400px; + background-color: whitesmoke; +} + +p{ + height: 200px; + width: 400px; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; +} \ No newline at end of file diff --git a/Random-Jokes-Chrome-Extension/popup.html b/Random-Jokes-Chrome-Extension/popup.html new file mode 100644 index 0000000..9baae9a --- /dev/null +++ b/Random-Jokes-Chrome-Extension/popup.html @@ -0,0 +1,14 @@ + + + + + + + + Dad Jokes + + +

Loading...

+ + + \ No newline at end of file diff --git a/Random-Jokes-Chrome-Extension/script.js b/Random-Jokes-Chrome-Extension/script.js new file mode 100644 index 0000000..7e1664c --- /dev/null +++ b/Random-Jokes-Chrome-Extension/script.js @@ -0,0 +1,11 @@ +// https://icanhazdadjoke.com/slack + +fetch('https://icanhazdadjoke.com/slack') + .then(data => data.json()) + .then(jokeData => { + const jokeText = jokeData.attachments[0].text; + let para = document.getElementById('joke'); + para.innerHTML = jokeText; + }) + +