diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..f8d2896 Binary files /dev/null and b/.DS_Store differ diff --git a/complex-api-bootcamp b/complex-api-bootcamp new file mode 160000 index 0000000..87166f1 --- /dev/null +++ b/complex-api-bootcamp @@ -0,0 +1 @@ +Subproject commit 87166f11af24e8600719e5c39fe68e7cf722661f 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..5c5ba7a --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + GOT + + + +

Find Your Game of Thrones Character!

+ + + + + +

+ + +
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..093eefa --- /dev/null +++ b/js/main.js @@ -0,0 +1,50 @@ +// Goal: Use data returned from one api to make a request to another api and display the data returned +// User enters GOT character +// listen for on'click +// fetch for the character info (first name, last name) from 1st API + +// once information show up, a second api will populate a character's image. + + +const select = document.getElementById('characters'); + const nameDisplay = document.querySelector('h2'); + const img = document.getElementById('charImg'); + + select.addEventListener('change', function() { + const charName = select.value; + + fetch('https://thronesapi.com/api/v2/Characters') + .then(function(response) { return response.json(); }) + .then(function(data) { + for (let i = 0; i < data.length; i++) { + if (data[i].fullName === charName) { + nameDisplay.innerText = data[i].fullName; + img.src = data[i].imageUrl; + } + } + return fetch('https://api.gameofthronesquotes.xyz/v1/characters'); + }) + .then(function(response) { return response.json(); }) + .then(function(data2) { + console.log(data2); + }) + .catch(function(err) { + console.error('Error:', err); + }); + }); +// completed with the help of Angie, Sylvie, chatgpt and MJ + + + + + + + + + + + + + + +