Resilient-Labs · sprim0 · Oct 7, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Harry Potter</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+    <h1>Harry Potter</h1>
+
+    <label></label>
+
+    <label id="character"> Enter Character: </label>
+    <input id="input" type="text" placeholder="character">
+
+    <button id="btn">Enter</button>
+    <div id="chardata"></div>
+
+    <!-- <select>
+        <option value="Gryffindor">Gryffindor</option>
+        <option value="Hufflepuff">Hufflepuff</option>
+        <option value="Ravenclaw">Ravenclaw</option>
+        <option value="Slytherin">Slytherin</option>
+    </select>  -->
+
+
+    <div id="data"></div>
+    <div id="housedata"></div>
+
+
+    <script type="text/javascript" src="js/main.js"></script>
+
+<body>
+
+</body>
+
+</html>
diff --git a/js/main.js 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)
+