diff --git a/Digimon Complex/Digimon Complex/Index.html b/Digimon Complex/Digimon Complex/Index.html new file mode 100644 index 0000000..401cfd7 --- /dev/null +++ b/Digimon Complex/Digimon Complex/Index.html @@ -0,0 +1,26 @@ + + + + + + Random Digimon Viewer 🎮 + + + +

Chose your random Digimon

+ + +
+

+ +

+
+ +
+

Check your Digimon out!

+ +
+ + + + \ No newline at end of file diff --git a/Digimon Complex/Digimon Complex/css/style.css b/Digimon Complex/Digimon Complex/css/style.css new file mode 100644 index 0000000..531d30e --- /dev/null +++ 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; + } +} \ No newline at end of file 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 new file mode 100644 index 0000000..b9814b9 Binary files /dev/null and b/Digimon Complex/Digimon Complex/images/digimon-world-file-island-1.jpg differ diff --git a/Digimon Complex/Digimon Complex/js/main.js b/Digimon Complex/Digimon Complex/js/main.js new file mode 100644 index 0000000..e204ba7 --- /dev/null +++ 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 = "

No video found.

"; + } + }) + .catch(error => console.error("Error randomizing Digimon:", err)); +}); diff --git a/Digimon Complex/Index.html b/Digimon Complex/Index.html new file mode 100644 index 0000000..0f4d5bf --- /dev/null +++ b/Digimon Complex/Index.html @@ -0,0 +1,25 @@ + + + + + + Random Digimon Viewer 🎮 + + +

Chose your random Digimon

+ + +
+

+ +

+
+ +
+

Check your Digimon out!

+ +
+ + + + \ No newline at end of file diff --git a/Digimon Complex/js/main.js b/Digimon Complex/js/main.js new file mode 100644 index 0000000..5f720a4 --- /dev/null +++ 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 = "

No video found.

"; + } + }) + .catch(error => console.error("Error randomizing Digimon:", err)); +}); diff --git a/README.md b/README.md index d8d6388..d673418 100644 --- 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.