From 6c0ce2e560d741bf68f0ef02ac029f947e57b4f0 Mon Sep 17 00:00:00 2001 From: sprim0 Date: Tue, 7 Oct 2025 02:20:40 -0400 Subject: [PATCH] done --- .DS_Store | Bin 0 -> 6148 bytes css/styles.css | 0 index.html | 38 ++++++++++++++++++++ js/main.js | 93 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 131 insertions(+) create mode 100644 .DS_Store create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d80090f36262689c34dbd135e35a7578d34035db GIT binary patch literal 6148 zcmeHK!EVz)5S>lZ)~2eI0|+iimbgYCl}d=j#ZA)#2QD?DhZd!A9Z`eptzw5%iX!<6 zd<;kagx`TTyIa(xTQJkEMUYR00|Wf+>U2s46|b|U@3)JQ_Aeu5BM&I0oDv$-CAH~{N;;=(CFlD} zPK`dU&a0l@78B2k3wL&Y#1~mwl%38`RjW7F);GKjZ_|4po#|Orj>>7#A5D(fdaHF7 zU-d`vyL3DoHXrWkyd0(Zcw!RLWQ>sG!!%FytgokeQkdMx4tT!j51WtY^B28tE9mwX ztzh2W*=Ys6&dbHZ_Z~fa{_0@(DLc>g7efLm9CRaF4zJ)VI%d0{qe-6W`~z%`_3422 zX_p4{2G|B^$ueo`8=|fg4O2uI5C(*SyJf&#W!~o9E+exG1H!;PWPtC70LmCTtSp+V z1C1#GfDO2fpl^QufdM;!p~K1|JP>75fi_jS5<|J#LD_VShc3RdXwylVl`)T7S-A>D zxza-gCY)4gQCeX@7+7YYZp|jY|NDQh|Cf`*5(b2U|B3|Hh`W$ qSvan;_$LJ&^AsbNpW-J_Bk%{@0fr7Mi||0?N5Ie^jWF;}8Tbv+F?Rm| literal 0 HcmV?d00001 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) +