Waifu API

dishamodi0910 · May 29, 2024 · ad22adb · ad22adb
1 parent b8826ff
commit ad22adb
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 0 deletions.
diff --git a/Existing_API_Collection/Waifu API/AnimeWall.jpg b/Existing_API_Collection/Waifu API/AnimeWall.jpg
diff --git a/Existing_API_Collection/Waifu API/index.html b/Existing_API_Collection/Waifu API/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            width: 300px;
+            height: 300px;
+            background: url('AnimeWall.jpg') no-repeat center center;
+            background-size: cover;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .container {
+            padding: 8px;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            background-color: white;
+        }
+        .Anime {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: auto 10px;
+            font-size: 1.125rem;
+            color: #3b82f6; /* blue-500 */
+            border-radius: 0.5rem;
+            border: 1px solid lightblue;
+            padding: 10px;
+        }
+        .quote {
+            font-size: 1.125rem;
+            margin-bottom: 8px;
+        }
+        .anime,
+        .author {
+            font-size: 1rem;
+            color: #333;
+        }
+    </style>
+    <title>Random Anime Quote</title>
+</head>
+<body>
+    <div class="container">
+        <p id="quote" class="quote">Loading...</p>
+        <p id="anime" class="anime"></p>
+        <p id="author" class="author"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Waifu API/logo.png b/Existing_API_Collection/Waifu API/logo.png
diff --git a/Existing_API_Collection/Waifu API/manifest.json 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"
+    }
+}
diff --git a/Existing_API_Collection/Waifu API/readme.md 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
diff --git a/Existing_API_Collection/Waifu API/script.js 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));
+});