From 0c81a44f9d84a1ccb9104286b3ca81d7626551b3 Mon Sep 17 00:00:00 2001
From: alpakas96 <jhurleyfilm@gmail.com>
Date: Wed, 7 Dec 2022 15:11:25 -0500
Subject: [PATCH 1/3] part 1

---
 lib/script.js         |  5 +++++
 lib/swapi_api_example | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 lib/swapi_api_example

diff --git a/lib/script.js b/lib/script.js
index e69de29..ef527b0 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -0,0 +1,5 @@
+let catAPI = "https://api.thecatapi.com/v1/images/search"
+
+
+//part 1 
+console.log(fetch(catAPI))
diff --git a/lib/swapi_api_example b/lib/swapi_api_example
new file mode 100644
index 0000000..8b15fce
--- /dev/null
+++ b/lib/swapi_api_example
@@ -0,0 +1,43 @@
+const url = "https://swapi.dev/api/people";
+const form = document.querySelector("form");
+const h1 = document.querySelector("h1");
+const container = document.querySelector(".container");
+
+form.addEventListener("submit", handleSubmit);
+
+function handleSubmit(e) {
+  e.preventDefault();
+
+  const { id } = e.target.elements;
+
+  fetch(`${url}/${id.value}`)
+    .then((res) => res.json())
+    .then((data) => {
+      displayCharacters(data);
+    })
+    .catch((err) => console.log("oops something went wrong", err));
+}
+
+function displayCharacters(character) {
+  const characterHTML = `
+  <div>
+    <h1>${character.name}</h1>
+    <p>Hair color: ${character.hair_color}</p>
+    <p>Height: ${character.height}</p>
+  </div>
+  `;
+
+  container.insertAdjacentHTML("beforeend", characterHTML);
+}
+white_check_mark
+eyes
+raised_hands
+
+
+
+
+
+
+
+
+

From 5618d7b584852cc7f68f9ef3002142d953f0c25d Mon Sep 17 00:00:00 2001
From: alpakas96 <jhurleyfilm@gmail.com>
Date: Wed, 7 Dec 2022 17:45:25 -0500
Subject: [PATCH 2/3] part 2 now working

---
 lib/script.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/script.js b/lib/script.js
index ef527b0..d70c8fe 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -1,5 +1,17 @@
 let catAPI = "https://api.thecatapi.com/v1/images/search"
+let randomCatButton = document.querySelector(".randomButton");
+let container = document.querySelector(".randomCatImage ");
 
+// fetch(catAPI) returns a random image, and passes it to display random cat as (randomCat) in part 2
+randomCatButton.addEventListener("click", displayRandomCat)
+console.log(randomCatButton); 
+//part2 - NOT WORKING 
+async function displayRandomCat(){
+    let request = await fetch(catAPI);
+    const randomCat = await request.json();
+    console.log(randomCat);
+    const imageURL = randomCat[0].url;
+    container.src = imageURL;
+    console.log('hi');
+}
 
-//part 1 
-console.log(fetch(catAPI))

From 5f920c095f47a4d2b87bf7c597132c36d871ebc9 Mon Sep 17 00:00:00 2001
From: alpakas96 <jhurleyfilm@gmail.com>
Date: Thu, 8 Dec 2022 09:11:28 -0500
Subject: [PATCH 3/3] added comments

---
 lib/script.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/script.js b/lib/script.js
index d70c8fe..e1d61c3 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -5,11 +5,14 @@ let container = document.querySelector(".randomCatImage ");
 // fetch(catAPI) returns a random image, and passes it to display random cat as (randomCat) in part 2
 randomCatButton.addEventListener("click", displayRandomCat)
 console.log(randomCatButton); 
-//part2 - NOT WORKING 
+//part2 -  WORKING - walked through via Noah
 async function displayRandomCat(){
+    //using await because the fetch is not instantaneous nor necessarily fast. It could take a while:
     let request = await fetch(catAPI);
+    //using .json() to change the data being sent to a format js can interact with. must still use away as the original fetch may not be complete:
     const randomCat = await request.json();
     console.log(randomCat);
+    //accessing the image object in an array sent by the server: 
     const imageURL = randomCat[0].url;
     container.src = imageURL;
     console.log('hi');