Resilient-Labs · johnzapata0313 · Oct 9, 2025 · Oct 26, 2025 · Oct 26, 2025
diff --git a/Digimon Complex/Digimon Complex/Index.html b/Digimon Complex/Digimon Complex/Index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Random Digimon Viewer 🎮</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <h1>Chose your random Digimon</h1>
+  <button id="getDigimon">Get Random Digimon</button>
+
+  <div id="digimonInfo">
+    <h2 id="name"></h2>
+    <img id="image" src="" alt="" width="">
+    <p id="level"></p>
+  </div>
+
+  <div id="videoContainer">
+    <h3>Check your Digimon out!</h3>
+    <iframe id="video" width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
+  </div>
+
+  <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/Digimon Complex/Digimon Complex/css/style.css b/Digimon Complex/Digimon Complex/css/style.css
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Bangers', cursive;
+  background-image: url('../images/digimon-world-file-island-1.jpg');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  color: #333;
+  position: relative;
+}
+
+/* //pulled from google gemini  */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: -1;
+}
+
+h1 {
+  color: #fff;
+  text-align: center;
+  margin: 30px 0;
+  font-size: 2.8rem;
+  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
+  letter-spacing: 2px;
+}
+
+/* Button Styles */
+#getDigimon {
+  background-color: #ff6b6b;
+  color: white;
+  border: 8px solid #f5f5dc;
+  padding: 15px 40px;
+  font-size: 1.3rem;
+  font-weight: bold;
+  border-radius: 50px;
+  cursor: pointer;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  margin-bottom: 30px;
+  letter-spacing: 1px;
+}
+
+#getDigimon:hover {
+  background-color: #6a0273;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+#getDigimon:active {
+  transform: translateY(0);
+}
+
+#digimonInfo {
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 10px solid #f5f5dc;
+  border-radius: 20px;
+  padding: 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+  margin-bottom: 30px;
+  backdrop-filter: blur(10px);
+}
+
+#digimonInfo h2 {
+  color: #667eea;
+  font-size: 2.2rem;
+  margin-bottom: 20px;
+  letter-spacing: 1px;
+}
+
+#digimonInfo img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+  margin: 20px 0;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+#digimonInfo p {
+  font-size: 1.3rem;
+  color: #555;
+  font-weight: bold;
+}
+
+/* Video Container */
+#videoContainer {
+  background-color: rgba(255, 255, 255, 0.95);
+  border: 10px solid #f5f5dc;
+  border-radius: 20px;
+  padding: 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+  backdrop-filter: blur(10px);
+}
+
+#videoContainer h3 {
+  color: #667eea;
+  margin-bottom: 20px;
+  font-size: 1.7rem;
+  letter-spacing: 1px;
+}
+
+#video {
+  border-radius: 10px;
+  width: 100%;
+  max-width: 420px;
+  height: 315px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  #getDigimon {
+    padding: 12px 30px;
+    font-size: 1.1rem;
+    border: 6px solid #f5f5dc;
+  }
+
+  #digimonInfo h2 {
+    font-size: 1.7rem;
+  }
+
+  #digimonInfo,
+  #videoContainer {
+    border: 8px solid #f5f5dc;
+  }
+
+  #video {
+    height: 250px;
+  }
+}
diff --git a/Digimon Complex/Digimon Complex/images/digimon-world-file-island-1.jpg b/Digimon Complex/Digimon Complex/images/digimon-world-file-island-1.jpg
diff --git a/Digimon Complex/Digimon Complex/js/main.js b/Digimon Complex/Digimon Complex/js/main.js
@@ -0,0 +1,36 @@
+//used chat gpt to debug issue with YouTube API connecting to project
+const url = "https://digimon-api.vercel.app/api/digimon";
+const YOUTUBE_API_KEY = "AIzaSyDzKJzXm6w8k8v69KqATGY0NZTFCT94sl8"; // your key
+const YOUTUBE_API = "https://www.googleapis.com/youtube/v3/search";
+
+document.getElementById("getDigimon").addEventListener("click", function() {
+  // Step 1: Fetch random Digimon
+  fetch(url)
+    .then(response => response.json()) //parse response as JSON
+    .then(digimonList => {
+      const random = Math.floor(Math.random() * digimonList.length);
+      const digimon = digimonList[random];
+
+      // Display Digimon info
+      document.getElementById("name").textContent = digimon.name;
+      document.getElementById("level").textContent = "Level: " + digimon.level;
+      document.getElementById("image").src = digimon.img;
+
+      // Step 2: Fetch YouTube video
+      const searchTerm = encodeURIComponent(digimon.name + " Digimon battle");
+      const youtubeUrl = `${YOUTUBE_API}?part=snippet&q=${searchTerm}&type=video&maxResults=1&key=${YOUTUBE_API_KEY}`;
+
+      return fetch(youtubeUrl);
+    })
+    .then(res => res.json()) //parse response as JSON
+    .then(youtubeData => {
+      if (youtubeData.items && youtubeData.items.length > 0) {
+        const videoId = youtubeData.items[0].id.videoId;
+        document.getElementById("video").src = `https://www.youtube.com/embed/${videoId}`;
+      } else {
+        document.getElementById("video").src = "";
+        document.getElementById("videoContainer").innerHTML = "<p>No video found.</p>";
+      }
+    })
+    .catch(error => console.error("Error randomizing Digimon:", err));
+});
diff --git a/Digimon Complex/Index.html b/Digimon Complex/Index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Random Digimon Viewer 🎮</title>
+</head>
+<body>
+  <h1>Chose your random Digimon</h1>
+  <button id="getDigimon">Get Random Digimon</button>
+
+  <div id="digimonInfo">
+    <h2 id="name"></h2>
+    <img id="image" src="" alt="" width="">
+    <p id="level"></p>
+  </div>
+
+  <div id="videoContainer">
+    <h3>Check your Digimon out!</h3>
+    <iframe id="video" width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
+  </div>
+
+  <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/Digimon Complex/js/main.js b/Digimon Complex/js/main.js
@@ -0,0 +1,35 @@
+const url = "https://digimon-api.vercel.app/api/digimon";
+const YOUTUBE_API_KEY = "AIzaSyDzKJzXm6w8k8v69KqATGY0NZTFCT94sl8"; // your key
+const YOUTUBE_API = "https://www.googleapis.com/youtube/v3/search";
+
+document.getElementById("getDigimon").addEventListener("click", function() {
+  // Step 1: Fetch random Digimon
+  fetch(url)
+    .then(response => response.json()) //parse response as JSON
+    .then(digimonList => {
+      const random = Math.floor(Math.random() * digimonList.length);
+      const digimon = digimonList[random];
+
+      // Display Digimon info
+      document.getElementById("name").textContent = digimon.name;
+      document.getElementById("level").textContent = "Level: " + digimon.level;
+      document.getElementById("image").src = digimon.img;
+
+      // Step 2: Fetch YouTube video
+      const searchTerm = encodeURIComponent(digimon.name + " Digimon battle");
+      const youtubeUrl = `${YOUTUBE_API}?part=snippet&q=${searchTerm}&type=video&maxResults=1&key=${YOUTUBE_API_KEY}`;
+
+      return fetch(youtubeUrl);
+    })
+    .then(res => res.json())
+    .then(youtubeData => {
+      if (youtubeData.items && youtubeData.items.length > 0) {
+        const videoId = youtubeData.items[0].id.videoId;
+        document.getElementById("video").src = `https://www.youtube.com/embed/${videoId}`;
+      } else {
+        document.getElementById("video").src = "";
+        document.getElementById("videoContainer").innerHTML = "<p>No video found.</p>";
+      }
+    })
+    .catch(error => console.error("Error randomizing Digimon:", err));
+});
diff --git a/README.md b/README.md
@@ -1,22 +1,5 @@
-# 📊 Project: Complex API 
+# Digimon Complex Selector
 
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+![9120027A-5733-4128-BB53-B8AEAA5BFA78](https://github.com/user-attachments/assets/b57066a5-3b92-405d-be04-a9b833cbb524)
 
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+Digimon API with the YouTube API. Users click a button to generate a random Digimon from the complete roster, which dynamically displays the Digimon's name, image, and level on the page. The app then automatically searches YouTube for battle footage of that specific Digimon and embeds the video directly into the interface, allowing users to see their randomly selected Digimon in action. Built with vanilla JavaScript using asynchronous fetch requests, the project handles API calls sequentially—first retrieving a random Digimon from the Digimon API, then using that data to query the YouTube API for relevant video content. The responsive design features a nostalgic Digimon World-inspired background with styled cards and an anime-themed font to create an immersive experience for fans.