diff --git a/Existing_API_Collection/Waifu API/AnimeWall.jpg b/Existing_API_Collection/Waifu API/AnimeWall.jpg new file mode 100644 index 0000000..684b2d9 Binary files /dev/null and b/Existing_API_Collection/Waifu API/AnimeWall.jpg differ diff --git a/Existing_API_Collection/Waifu API/index.html b/Existing_API_Collection/Waifu API/index.html new file mode 100644 index 0000000..7bf90ca --- /dev/null +++ b/Existing_API_Collection/Waifu API/index.html @@ -0,0 +1,53 @@ + + + + + + + Random Anime Quote + + +
+

Loading...

+

+

+
+ + + diff --git a/Existing_API_Collection/Waifu API/logo.png b/Existing_API_Collection/Waifu API/logo.png new file mode 100644 index 0000000..6e1ef94 Binary files /dev/null and b/Existing_API_Collection/Waifu API/logo.png differ diff --git a/Existing_API_Collection/Waifu API/manifest.json b/Existing_API_Collection/Waifu API/manifest.json new file mode 100644 index 0000000..fb0a367 --- /dev/null +++ b/Existing_API_Collection/Waifu API/manifest.json @@ -0,0 +1,12 @@ +{ + "name": "Anime Quote", + "version": "0.0.1", + "manifest_version": 2, + "browser_action": { + "default_popup": "index.html", + "default_icon": "logo.png" + }, + "icons": { + "128": "logo.png" + } +} \ No newline at end of file diff --git a/Existing_API_Collection/Waifu API/readme.md b/Existing_API_Collection/Waifu API/readme.md new file mode 100644 index 0000000..5f6f4bf --- /dev/null +++ b/Existing_API_Collection/Waifu API/readme.md @@ -0,0 +1,59 @@ +# Random Anime Quote Extension + +This extension generates a random Anime quote whenever it is clicked. + +## Installation Instructions + +1. **Open your browser**: Launch your preferred web browser (e.g., Chrome, Edge). + +2. **Enable Developer Mode**: + - Navigate to the extensions page. You can typically do this by typing `chrome://extensions/` in the address bar for Chrome or `edge://extensions/` for Edge. + - Toggle the **Developer mode** switch in the top right corner of the extensions page. + +3. **Load the Extension**: + - Click on the **Load unpacked** button. + - In the file dialog that appears, navigate to the directory where your project files are located and select the folder containing `manifest.json`. + +4. **Activate the Extension**: + - After loading the extension, an icon will appear in the extensions toolbar. + - Click on this icon to generate and view a random Anime quote. + +## Obtaining the API Key + +To fetch Anime quotes, you need an API key from Waifu.it. Follow these steps to get your API key: + +1. **Visit Waifu.it**: Open your web browser and go to [Waifu.it](https://waifu.it/). +2. **Sign Up or Log In**: If you don't have an account, sign up for a new one. If you already have an account, log in. +3. **Generate API Key**: Once logged in, navigate to the API section of the website. There you will find an option to generate a new API key. Copy this key, as you will need it for your extension. + +## Adding the API Key + +1. **Edit `script.js`**: Open the `script.js` file in a text editor. +2. **Insert API Key**: Locate the placeholder for the API key and insert your key. It should look something like this: + ```javascript + headers: { + 'Authorization': 'YOUR-API-KEY' + } + ``` +3. **Save the File**: Save your changes to `script.js`. + +## Project Structure + +- `manifest.json`: The manifest file that contains metadata about the extension. +- `index.html`: The HTML file for the extension's popup interface. +- `script.js`: The JavaScript file that handles the logic to fetch and display random Anime quotes. + +## Screenshot + +Here is what the extension looks like when activated: + +![Random Anime Quote Extension Screenshot](screenshot.jpg) + +## Additional Information + +- Ensure all necessary files (`manifest.json`, `index.html`, `script.js`, and any additional assets) are in the same directory. +- If you make any changes to the code, you will need to reload the extension by clicking the reload icon next to the extension on the extensions page. + +--- + +Enjoy your random Anime quotes! \ No newline at end of file diff --git a/Existing_API_Collection/Waifu API/screenshot.jpg b/Existing_API_Collection/Waifu API/screenshot.jpg new file mode 100644 index 0000000..b2f7f16 Binary files /dev/null and b/Existing_API_Collection/Waifu API/screenshot.jpg differ diff --git a/Existing_API_Collection/Waifu API/script.js b/Existing_API_Collection/Waifu API/script.js new file mode 100644 index 0000000..b14e42f --- /dev/null +++ b/Existing_API_Collection/Waifu API/script.js @@ -0,0 +1,22 @@ +document.addEventListener('DOMContentLoaded', () => { + fetch('https://waifu.it/api/v4/quote', { + headers: { + 'Authorization': 'YOUR-API-KEY' // Get API key from https://waifu.it/ + } + }) + .then(response => response.json()) + .then(AnimeData => { + const quote = AnimeData.quote; + const anime = AnimeData.anime; + const author = AnimeData.author; + + const quoteElement = document.getElementById('quote'); + const animeElement = document.getElementById('anime'); + const authorElement = document.getElementById('author'); + + quoteElement.innerHTML = `"${quote}"`; + animeElement.innerHTML = `Anime: ${anime}`; + authorElement.innerHTML = `Author: ${author}`; + }) + .catch(error => console.error('Error fetching the Anime:', error)); +});