diff --git a/Existing_API_Collection/RickMortyAPI/Rick-And-Morty.jpeg b/Existing_API_Collection/RickMortyAPI/Rick-And-Morty.jpeg new file mode 100644 index 0000000..8988576 Binary files /dev/null and b/Existing_API_Collection/RickMortyAPI/Rick-And-Morty.jpeg differ diff --git a/Existing_API_Collection/RickMortyAPI/index.html b/Existing_API_Collection/RickMortyAPI/index.html new file mode 100644 index 0000000..dd637eb --- /dev/null +++ b/Existing_API_Collection/RickMortyAPI/index.html @@ -0,0 +1,39 @@ + + + + + + Random Rick and Morty Character + + + + +
+

Random Rick and Morty Character

+ +
+
+ + + + diff --git a/Existing_API_Collection/RickMortyAPI/logo.png b/Existing_API_Collection/RickMortyAPI/logo.png new file mode 100644 index 0000000..479b464 Binary files /dev/null and b/Existing_API_Collection/RickMortyAPI/logo.png differ diff --git a/Existing_API_Collection/RickMortyAPI/manifest.json b/Existing_API_Collection/RickMortyAPI/manifest.json new file mode 100644 index 0000000..869240a --- /dev/null +++ b/Existing_API_Collection/RickMortyAPI/manifest.json @@ -0,0 +1,12 @@ +{ + "name": "Rick and Morty", + "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/RickMortyAPI/script.js b/Existing_API_Collection/RickMortyAPI/script.js new file mode 100644 index 0000000..6c6bc1e --- /dev/null +++ b/Existing_API_Collection/RickMortyAPI/script.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', function() { + const generateButton = document.getElementById('generateButton'); + const characterInfo = document.getElementById('characterInfo'); + + generateButton.addEventListener('click', async function() { + const randomId = Math.floor(Math.random() * 826) + 1; + const apiUrl = `https://rickandmortyapi.com/api/character/${randomId}`; + + try { + const response = await fetch(apiUrl); + const data = await response.json(); + + const characterName = data.name; + const characterImage = data.image; + + const characterElement = document.createElement('div'); + characterElement.innerHTML = ` +

${characterName}

+ ${characterName} + `; + + characterInfo.innerHTML = ''; + characterInfo.appendChild(characterElement); + } catch (error) { + console.error('Error fetching data:', error); + characterInfo.innerHTML = '

Failed to fetch character data.

'; + } + }); + }); + \ No newline at end of file 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..4c0ddfd --- /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! 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..93a06f9 --- /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' //Go through readme file for the website url + } + }) + .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)); +});