RickMortyAPI

dishamodi0910 · May 28, 2024 · ae0399e · ae0399e
1 parent 8031f6c
commit ae0399e
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 0 deletions.
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/[email protected]/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>';
+      }
+    });
+  });
+