Merge pull request #150 from Chillthrower/master

Dog API
dishamodi0910 · May 26, 2024 · d0cf41f · d0cf41f
2 parents 038b206 + a96c25b
commit d0cf41f
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 0 deletions.
diff --git a/Existing_API_Collection/Dog-API/Dog.png b/Existing_API_Collection/Dog-API/Dog.png
diff --git a/Existing_API_Collection/Dog-API/Dogs.jpg b/Existing_API_Collection/Dog-API/Dogs.jpg
diff --git a/Existing_API_Collection/Dog-API/index.html b/Existing_API_Collection/Dog-API/index.html
@@ -0,0 +1,40 @@
+<!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('Dogs.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);
+        }
+        .Dog {
+            display: inline-flex;
+            margin: auto 10px;
+            font-size: 1.125rem;
+            color: #cc8c2b; /* blue-500 */
+            border-radius: 0.5rem;
+            border: 1px solid rgb(236, 229, 128);
+            padding: 10px;
+            background-color: white;
+        }
+    </style>
+    <title>Random Dog</title>
+</head>
+<body>
+    <div class="container">
+        <p id="DogElement" class="Dog">Loading...</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Dog-API/manifest.json b/Existing_API_Collection/Dog-API/manifest.json
@@ -0,0 +1,12 @@
+{
+    "name": "Dog facts",
+    "version": "0.0.1",
+    "manifest_version": 2,
+    "browser_action": {
+        "default_popup": "index.html",
+        "default_icon": "Dog.png"
+    },
+    "icons": {
+        "128": "Dog.png"
+    }
+}
diff --git a/Existing_API_Collection/Dog-API/readme.md b/Existing_API_Collection/Dog-API/readme.md
@@ -0,0 +1,40 @@
+# Random Dog Facts Extension
+
+This extension generates a random dog fact 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 dog fact.
+
+## Screenshot
+
+Here is what the extension looks like when activated:
+
+![Random Dog Facts Extension Screenshot](screenshot.jpg)
+
+## 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 dog facts.
+
+## 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 dog facts!
diff --git a/Existing_API_Collection/Dog-API/screenshot.jpg b/Existing_API_Collection/Dog-API/screenshot.jpg
diff --git a/Existing_API_Collection/Dog-API/script.js b/Existing_API_Collection/Dog-API/script.js
@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', () => {
+    fetch('https://dogapi.dog/api/v2/facts')
+        .then(response => response.json())
+        .then(DogData => {
+            const DogText = DogData.data[0].attributes.body;
+            const DogElement = document.getElementById('DogElement');
+            DogElement.innerHTML = DogText;
+        })
+        .catch(error => console.error('Error fetching the Dog:', error));
+});