diff --git a/README.md b/README.md
index a9a4cc6..0b9df79 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,8 @@
-# 📊 Project: Simple API 1
+# Harry Potter API
+
+Fun project that connects to a Harry Potter-themed APIS to fetch and display data about characters, houses, spells, etc.
+The aim is to explore working with external APIs and building a fan-oriented app around the magical world of Harry Potter.
-### Goal: Display data returned from an api
+---
-### 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...
-```
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..2416d98
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,41 @@
+* {
+ box-sizing: border-box;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: "Rouge Script", cursive;
+ font-size: 1.3rem;
+ background: black;
+ color: white;
+}
+
+.HogwartsEmblem {
+ display: block;
+ margin: 0 auto;
+ margin-top: 2%;
+ max-width: 20%;
+}
+
+h1{
+ font-size: 2.2rem;
+}
+
+h2{
+ font-size: 1.5rem;
+}
+
+.picture {
+ display: block;
+ border-radius: 10px;
+}
+
+input{
+ background: hsl(148deg 0% 13%);
+ border-radius: 3px;
+}
+
+button {
+ margin: 1%;
+ border-radius: 5px;
+}
\ No newline at end of file
diff --git a/img/Griffindor.png b/img/Griffindor.png
new file mode 100644
index 0000000..ab8ab77
Binary files /dev/null and b/img/Griffindor.png differ
diff --git a/img/Hogwarts.png b/img/Hogwarts.png
new file mode 100644
index 0000000..94ca6fb
Binary files /dev/null and b/img/Hogwarts.png differ
diff --git a/img/Hufflepuff.png b/img/Hufflepuff.png
new file mode 100644
index 0000000..97340db
Binary files /dev/null and b/img/Hufflepuff.png differ
diff --git a/img/Ravenclaw.png b/img/Ravenclaw.png
new file mode 100644
index 0000000..96613a0
Binary files /dev/null and b/img/Ravenclaw.png differ
diff --git a/img/Slytherin.png b/img/Slytherin.png
new file mode 100644
index 0000000..3d449b7
Binary files /dev/null and b/img/Slytherin.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6fc3196
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harry Potter Character & the House
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..692e300
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,25 @@
+document.querySelector('button').addEventListener('click', checkCharacter)
+
+function checkCharacter() {
+ const character = document.querySelector('input').value
+ const url = `https://potterapi-fedeperin.vercel.app/en/characters?search=${character}`
+
+ fetch(url)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+ document.querySelector("h3").innerText = data[0].fullName;
+ document.querySelector(".picture").src = data[0].image;
+ document.querySelector("h2").innerText = data[0].hogwartsHouse;
+
+ const house = data[0].hogwartsHouse;
+ const urlHouse = `https://hp-api.onrender.com/api/characters/house/${house}`
+ fetch(urlHouse)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+ })
+ })
+}
+
+//Michael Kazin helped me with these apis
\ No newline at end of file
+