diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..d80090f
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6e2b9a4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Harry Potter
+
+
+ Harry Potter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..b1c1415
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,93 @@
+// Goal: Use data returned from one api to make a request to another api and display the data returned
+// user enter in harry potter character name
+// update the current query for the character
+// when name is fully typed, pressing 'enter' will query the API
+// API will return a result
+
+// house of the character populates from 1st api
+// user then sees house of character
+// user then enters house info
+// information on house (colors and founder popuates)
+
+
+
+// completed with the help of software engineer during tech meetup: Taariq Elliot and fellow House Hayden member, Justin Joshi
+
+const requestOptions = {
+ method: "GET",
+ redirect: "follow"
+};
+
+
+let searchQuery = "";
+let allCharacters = [];
+let currentNameQuery = "";
+let filteredCharacters = [];
+let displayedCharacterData = [];
+
+const fetchAllCharacters = async () => {
+ const res = await fetch("https://hp-api.onrender.com/api/characters", requestOptions)
+ allCharacters = await res.json()
+ console.log(allCharacters)
+}
+
+fetchAllCharacters()
+const dataDiv = document.getElementById("data")
+
+
+
+const updateFilteredCharacters = async () => {
+ displayedCharacterData = []
+ searchQuery = input.value;
+ filteredCharacters = allCharacters.filter((character) =>
+ character.name.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+ filteredCharacters.forEach((character) => {
+ const characterData = [character.name, character.house].join(" - ");
+ displayedCharacterData.push(characterData);
+ dataDiv.innerText = displayedCharacterData;
+ });
+
+
+ const characterHouse = filteredCharacters[0].house
+
+ const housesApiUrl = `https://potterapi-fedeperin.vercel.app/en/houses`
+
+ fetch(housesApiUrl)
+ .then(res => res.json()) // parse response as JSON
+ .then(data => {
+ data.forEach((x,i) => {
+ if(data[i].house === characterHouse){
+ document.querySelector('#housedata').innerHTML += `${data[i].colors}`
+ document.querySelector('#housedata').innerHTML += `${data[i].founder}`
+ }
+ })
+ console.log(characterHouse)
+ console.log(data)
+ })
+ .catch(err => {
+ console.log(`error ${err}`)
+ });
+}
+
+
+
+async function getData() {
+ const url = "https://example.org/products.json";
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`Response status: ${response.status}`);
+ }
+
+ const result = await response.json();
+ console.log(result);
+ } catch (error) {
+ console.error(error.message);
+ }
+}
+
+
+
+document.getElementById("btn").addEventListener('click', updateFilteredCharacters)
+