From 710165af7dee5a6f582ccb38f424733ba987d737 Mon Sep 17 00:00:00 2001
From: sdmantha <sdangelcake@gmail.com>
Date: Wed, 7 Dec 2022 22:59:29 -0500
Subject: [PATCH 1/4] it's not working'

---
 .vscode/settings.json |  3 +++
 lib/index.html        |  2 ++
 lib/script.js         | 16 ++++++++++++++++
 3 files changed, 21 insertions(+)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/lib/index.html b/lib/index.html
index 0e97ce8..880627f 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -14,7 +14,9 @@
             <h1>Random Cat API</h1>
         </header>
         <main>
+            <form>
             <button class="randomButton">Random Cats! Meow!</button>
+        </form>
             <div class="randomCat"><img src="" class="randomCatImage"></div>
             <form>
                 <input type="text" class="input" placeholder="Category ID">
diff --git a/lib/script.js b/lib/script.js
index e69de29..f549091 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -0,0 +1,16 @@
+const url = "https://api.thecatapi.com/v1/images/search";
+let header={
+"x-api-key":
+"live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
+}
+const catButton = document.querySelector(`.randomButton`);
+catButton.addEventListener('click', handleClick)
+
+function handleClick(){
+    fetch(url, {header})
+    .then((res) => res.json())
+    .then ((res) => {
+        let randImage = document.querySelector(".randomCatImage");
+        randImage.src = res[0].url;
+    });
+}
\ No newline at end of file

From 8d4451d6f57c7cc5fc8709357b5ba4ba3b1f68d4 Mon Sep 17 00:00:00 2001
From: sdmantha <sdangelcake@gmail.com>
Date: Tue, 13 Dec 2022 19:03:18 -0500
Subject: [PATCH 2/4] got it to console sucess

---
 lib/script.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/lib/script.js b/lib/script.js
index f549091..caa30d9 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -1,16 +1,27 @@
+//https://github.com/jdabank/random-cat-api
 const url = "https://api.thecatapi.com/v1/images/search";
 let header={
 "x-api-key":
 "live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
 }
 const catButton = document.querySelector(`.randomButton`);
-catButton.addEventListener('click', handleClick)
+// catButton.addEventListener('click', handleClick)
 
-function handleClick(){
-    fetch(url, {header})
-    .then((res) => res.json())
-    .then ((res) => {
-        let randImage = document.querySelector(".randomCatImage");
-        randImage.src = res[0].url;
-    });
-}
\ No newline at end of file
+const catImage= document.querySelector('.categoryCatImage')
+
+// const
+// function handleClick(){
+//     fetch(url, {header})
+//     .then((response) => response.json())
+//     .then ((data) => {
+//         let randImage = document.querySelector(".randomCatImage");
+//         randImage.src = res[0].url;
+//     });
+fetch(url,{header}) 
+  .then((response) => response.json())
+  .then((result) => {
+    console.log('Success:', result);
+  })
+  .catch((error) => {
+    console.error('Error:', error);
+  });

From ef64526856474d3827de335c119a3f37f715f10a Mon Sep 17 00:00:00 2001
From: sdmantha <sdangelcake@gmail.com>
Date: Tue, 13 Dec 2022 19:35:44 -0500
Subject: [PATCH 3/4] got the console to generate a new api cat but have not
 been able to show a new button

---
 lib/script.js | 59 ++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/lib/script.js b/lib/script.js
index caa30d9..e8ffcf3 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -1,13 +1,14 @@
-//https://github.com/jdabank/random-cat-api
-const url = "https://api.thecatapi.com/v1/images/search";
-let header={
-"x-api-key":
-"live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
-}
-const catButton = document.querySelector(`.randomButton`);
-// catButton.addEventListener('click', handleClick)
+// //https://github.com/jdabank/random-cat-api
+// const url = "https://api.thecatapi.com/v1/images/search";
+// let header={
+// "x-api-key":
+// "live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
+// }
+// const catButton = document.querySelector(`.randomButton`);
+// // let randomButton= document.getElementId('randomButtonClick')
+// let image= document.getElementById('image')
 
-const catImage= document.querySelector('.categoryCatImage')
+// const catImage= document.querySelector('.categoryCatImage')
 
 // const
 // function handleClick(){
@@ -17,11 +18,35 @@ const catImage= document.querySelector('.categoryCatImage')
 //         let randImage = document.querySelector(".randomCatImage");
 //         randImage.src = res[0].url;
 //     });
-fetch(url,{header}) 
-  .then((response) => response.json())
-  .then((result) => {
-    console.log('Success:', result);
-  })
-  .catch((error) => {
-    console.error('Error:', error);
-  });
+
+
+// catButton.addEventListener('click', function(){
+//     fetch(url,{header}) 
+//   .then((response) => response.json())
+//   .then((result) => {
+//     console.log('Success:', result);
+//   })
+//   .catch((error) => {
+//     console.error('Error:', error);
+// })
+// })
+
+
+// fetch(url,{header}) 
+//   .then((response) => response.json())
+//   .then((result) => {
+//     console.log('Success:', result);
+//   })
+//   .catch((error) => {
+//     console.error('Error:', error);
+//   }):
+
+const url = "https://api.thecatapi.com/v1/images/search";
+let header={
+"x-api-key":
+"live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"}
+
+fetch(url, header)
+    .then(res => res.json())
+    .then(data => console.log(data))
+    .catch(error => console.log("ERROR"))
\ No newline at end of file

From 3ca16e1d21ff2cd130cb686a5020de551f83e7bf Mon Sep 17 00:00:00 2001
From: sdmantha <sdangelcake@gmail.com>
Date: Wed, 14 Dec 2022 08:43:54 -0500
Subject: [PATCH 4/4] got it to work

---
 lib/index.html |   3 +-
 lib/script.js  | 105 ++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 79 insertions(+), 29 deletions(-)

diff --git a/lib/index.html b/lib/index.html
index 880627f..5ed24e2 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html>
     <head>
@@ -14,9 +15,7 @@
             <h1>Random Cat API</h1>
         </header>
         <main>
-            <form>
             <button class="randomButton">Random Cats! Meow!</button>
-        </form>
             <div class="randomCat"><img src="" class="randomCatImage"></div>
             <form>
                 <input type="text" class="input" placeholder="Category ID">
diff --git a/lib/script.js b/lib/script.js
index e8ffcf3..64d7991 100644
--- a/lib/script.js
+++ b/lib/script.js
@@ -1,23 +1,4 @@
-// //https://github.com/jdabank/random-cat-api
-// const url = "https://api.thecatapi.com/v1/images/search";
-// let header={
-// "x-api-key":
-// "live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
-// }
-// const catButton = document.querySelector(`.randomButton`);
-// // let randomButton= document.getElementId('randomButtonClick')
-// let image= document.getElementById('image')
 
-// const catImage= document.querySelector('.categoryCatImage')
-
-// const
-// function handleClick(){
-//     fetch(url, {header})
-//     .then((response) => response.json())
-//     .then ((data) => {
-//         let randImage = document.querySelector(".randomCatImage");
-//         randImage.src = res[0].url;
-//     });
 
 
 // catButton.addEventListener('click', function(){
@@ -41,12 +22,82 @@
 //     console.error('Error:', error);
 //   }):
 
-const url = "https://api.thecatapi.com/v1/images/search";
-let header={
-"x-api-key":
-"live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"}
+// const url = `https://api.thecatapi.com/v1/images/search`
+// let header={
+// "x-api-key":
+// "live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"}
+// const randomButton= document.querySelector('.randomButton')
+// const kittyIMG= document.querySelector('.categoryCatImage')
+// const apiKey= "live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
+
+// randomButton.addEventListener("click", function(){
+
+//     fetch(url, {header}) 
+//     .then((response) => response.json())
+// .then((response) => { kittyIMG.src = `${response[0].url}`})
+// })
+
+// const url = `https://api.thecatapi.com/v1/images/search`
+
+// const randomButton = document.querySelector('.randomButton')
+
+// const kittyIMG = document.querySelector('.categoryCatImage')
+
+
+// randomButton.addEventListener('click', function(){
+
+//     fetch(url, {header}) 
+//     .then((response) => response.json())
+// .then((response) => { kittyIMG.src = `${response[0].url}`})
+
+// const apiKey = 'live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd'
+// let header = {
+//     "x-api-key": 'live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd'
+// }
+// const url = `https://api.thecatapi.com/v1/images/search`
+// const randomButton = document.querySelector('.randomButton')
+// const kittyIMG = document.querySelector('.categoryCatImage')
+
+
+// randomButton.addEventListener('click', function(){
+
+//     fetch(url, {header}) 
+//     .then((response) => response.json())
+// .then((response) => { kittyIMG.src = `${response[0].url}`})
+
+// })
+
+// const apiKey = 'live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd'
+
+// const url = `https://api.thecatapi.com/v1/images/search/?api_key=${live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd}`
+
+// const randomButton = document.querySelector('.randomButton')
+
+// const kittyIMG = document.querySelector('.categoryCatImage')
+
+
+// randomButton.addEventListener('click', function(){
+
+//     fetch(url) 
+//     .then((response) => response.json())
+// .then((response) => { kittyIMG.src = `${response[0].url}`})
+
+// })
+
+const url= "https://api.thecatapi.com/v1/images/search"
+let header = {
+   "x-api-key":
+   "live_c7NFwQNovYorkhRwoYbtV1ytRgM1c7I3KmWGi5ucgGsnk1aBvtmJfe4HDV36SJzd"
+}
+const catButton = document.querySelector(`.randomButton`);
+catButton.addEventListener('click', handleClick)
+//click is just the name of it( it can be press or buttun etc)
 
-fetch(url, header)
-    .then(res => res.json())
-    .then(data => console.log(data))
-    .catch(error => console.log("ERROR"))
\ No newline at end of file
+function handleClick() {
+fetch(url, {header})
+    .then((res) => res.json())
+    .then((res) => {
+        let randImage = document.querySelector(".randomCatImage");
+        randImage.src = res[0].url;
+    });
+}
\ No newline at end of file