diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..9b4eec8
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 83ce771..276173e 100644
--- 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:
+
-- 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
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..2e8aa60
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/Complex API 2 - Return.png b/images/Complex API 2 - Return.png
new file mode 100644
index 0000000..6d1fcf1
Binary files /dev/null and b/images/Complex API 2 - Return.png differ
diff --git a/images/Complex API 2.png b/images/Complex API 2.png
new file mode 100644
index 0000000..c493669
Binary files /dev/null and b/images/Complex API 2.png differ
diff --git a/images/sortingHat.jpg b/images/sortingHat.jpg
new file mode 100644
index 0000000..bd01db9
Binary files /dev/null and b/images/sortingHat.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..79cdf48
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+ Harry Potter API
+
+
+
+
The World of Wizarding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..a4fcf99
--- /dev/null
+++ 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}`)
+ });
+}
\ No newline at end of file