dishamodi0910 · Chillthrower · May 26, 2024 · May 28, 2024
diff --git a/Existing_API_Collection/RickMortyAPI/Rick-And-Morty.jpeg b/Existing_API_Collection/RickMortyAPI/Rick-And-Morty.jpeg
diff --git a/Existing_API_Collection/RickMortyAPI/index.html b/Existing_API_Collection/RickMortyAPI/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Random Rick and Morty Character</title>
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      padding: 20px;
+      background-image: url('Rick-And-Morty.jpeg');
+      background-size: cover;
+      background-position: center;
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    img {
+      max-width: 100%;
+      height: auto;
+      margin-bottom: 10px;
+    }
+    .text-black {
+      color: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="text-black">
+    <h1 class="text-3xl font-bold mb-4">Random Rick and Morty Character</h1>
+    <button id="generateButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Generate Character</button>
+    <div id="characterInfo" class="mt-4"></div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/RickMortyAPI/logo.png b/Existing_API_Collection/RickMortyAPI/logo.png
diff --git a/Existing_API_Collection/RickMortyAPI/manifest.json 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"
+    }
+}
diff --git a/Existing_API_Collection/RickMortyAPI/script.js 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 = `
+          <h2>${characterName}</h2>
+          <img src="${characterImage}" alt="${characterName}">
+        `;
+
+        characterInfo.innerHTML = '';
+        characterInfo.appendChild(characterElement);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        characterInfo.innerHTML = '<p>Failed to fetch character data.</p>';
+      }
+    });
+  });
+
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' //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));
+});