Resilient-Labs · medinag-codes · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025 · Apr 1, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,22 +1,16 @@
-# 📊 Project: Complex API 2
+# My Complex API Project
+This is a website I made to get searched Harry Potter Character and a random spell
 
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+**Link to project:** []
 
-### How to submit your code for review:
+![Complex API 2](/images/Complex%20API%202%20-%20Return.png)
 
-- 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!
+## How It's Made:
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+**Tech used:** HTML, CSS, JavaScript, API
+
+This is a website I made using the Potter API and the HP API 
+
+## Lessons Learned:
+
+I learned how to fetch data using nested APIs. I also learned a lot about CORS restrictions after many trials and errors with other various APIs
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,69 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+body{
+    height: 100vh;
+    background-image: url(https://i.pinimg.com/736x/c8/98/1f/c8981fed4fe843c24306885616bb45b1.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    color: white;
+}
+
+header{
+    height: 100px;
+    color: goldenrod;
+    background-color: rgb(112, 79, 60);
+    font-size: 2rem;
+    text-align: center;
+    border-bottom: 3px solid goldenrod;
+}
+
+.sorting{
+    align-self: center;
+    display: flex;
+    justify-content: center;
+    width: 50%;
+    height: 50px;
+    display: flex;
+    margin-top: 15px;
+    gap: 5px;
+}
+
+input{
+    height: 30px;
+    width: 25%;
+
+}
+
+button{
+    height: 30px;
+    border-radius: 5px;
+    background-color: goldenrod;
+}
+
+.decision{
+    margin-top: 50px;
+}
+h2{
+    font-size: 2rem;
+    text-align: center;
+}
+
+h4{
+    font-size: 1.2rem;
+    text-align: center;
+}
+
+h3{
+    font-size: 1.8em;
+}
+
+.houseWizards{
+    margin-top: 150px;
+}
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/Complex API 2 - Return.png b/images/Complex API 2 - Return.png
diff --git a/images/Complex API 2.png b/images/Complex API 2.png
diff --git a/images/sortingHat.jpg b/images/sortingHat.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta charset="utf-8">
+    	<meta name="description" content="This is where your description goes">
+    	<meta name="keywords" content="one, two, three">
+        <link rel="stylesheet" href="css/style.css">
+		<title>Harry Potter API</title>
+	</head>
+	<body>
+		<header>
+			<h1>The World of Wizarding</h1>
+		</header>
+		<div class="sorting">
+			<input type="text" value="" placeholder="First Name">
+			<button>Get Sorted</button>
+		</div>
+
+		<div class="decision">
+			<h2></h2>
+			<h4></h4>
+		</div>
+
+		<div class="houseWizards">
+			<h3></h3>
+			<section id="housemates"></section>
+		</div>
+
+		<script src="js/main.js"></script>
+	</body>
+</html> 
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,44 @@
+document.querySelector('button').addEventListener('click', getWizard)
+const section = document.querySelector('section')
+
+function getWizard(){
+    const name = document.querySelector('input').value
+    const url = `https://potterapi-fedeperin.vercel.app/en/houses/random`
+
+    document.querySelector('input').value = ""
+    document.querySelector('section').innerHTML = ""
+
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+            const house = data.house
+            document.querySelector('h2').innerText = `${name} is sorted to ${house}!`
+            document.querySelector('h4').innerText = `Mascot: ${data.emoji}`
+
+            const housemateUrl = `https://hp-api.onrender.com/api/characters/house/${house}`
+
+            fetch(housemateUrl)
+            .then(res => res.json())
+            .then(housemate => {
+            console.log(housemate)
+            for(let i = 0; i < 5; i++){
+                let img = document.createElement('img')
+                console.log(img)
+                img.src = housemate[i].image
+                section.appendChild(img)
+                img.style.height = '325px'
+                img.style.margin = '10px'
+                img.style.borderRadius = '10px'
+                document.querySelector('h3').innerText = "Some great wizards in your house:"
+            }
+            })
+            .catch(err => {
+                console.log(`error ${err}`)
+            });
+
+        })
+        .catch(err => {
+            console.log(`error ${err}`)
+    });
+}