From d15ecb9623f7f786c7f77931b37e9e35ef3768bf Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 7 Dec 2022 22:48:07 -0500 Subject: [PATCH 1/2] Part_1, Part_2, Bonus --- .vscode/settings.json | 3 ++ lib/index.html | 79 +++++++++++++++++++++++-------------------- lib/script.js | 68 +++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 37 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/lib/index.html b/lib/index.html index 0e97ce8..ad7d659 100644 --- a/lib/index.html +++ b/lib/index.html @@ -1,39 +1,44 @@ - - - - Random Cat API - - - - - - -
-

Random Cat API

-
-
- -
-
- - -
-
- -
    -
  • 1: Hats
    • -
  • 2: Space
    • -
  • 4: Sunglasses
    • -
  • 5: Boxes
    • -
  • 7: Ties
    • -
  • 14: Sinks
    • -
  • 15: Clothes
    • -
-
-
-
- - - \ No newline at end of file + + + + Random Cat API + + + + + + +
+

Random Cat API

+
+
+ +
+
+ + + + +
+
+ +
    +
  • 1: Hats
    • +
  • 2: Space
    • +
  • 4: Sunglasses
    • +
  • 5: Boxes
    • +
  • 7: Ties
    • +
  • 14: Sinks
    • +
  • 15: Clothes
    • +
+
+
+
+ + + diff --git a/lib/script.js b/lib/script.js index e69de29..e37e0df 100644 --- a/lib/script.js +++ b/lib/script.js @@ -0,0 +1,68 @@ +const view = { + url: "https://api.thecatapi.com/v1/images/search", + randomButton: document.querySelector(".randomButton"), + randomCatImage: document.querySelector(".randomCatImage"), + form: document.querySelector("form"), + input: document.querySelector(".input"), + searchButton: document.querySelector(".searchButton"), + categoryCatImage: document.querySelector(".categoryCatImage"), +}; + +view.randomButton.addEventListener("click", showCat); +function showCat() { + fetch(`${view.url}`) + .then((res) => res.json()) + .then((result) => { + console.log(result); + console.log(result[0]); + view.randomCatImage.src = result[0].url; + }) + .catch((err) => console.log(err)); +} + +view.form.addEventListener("submit", categoryCat); + +// function categoryCat(e) { +// e.preventDefault(); +// console.log(e); +// const { id } = e.target.elements; +// console.log(`ID: ${id.value}`); +// //geting category_id + +// let category_ids = id.value; +// let url = `${view.url}?category_ids=${category_ids}`; +// console.log(url); + +// fetch(url) +// .then((res) => res.json()) +// .then((result) => { +// console.log(result); +// console.log(result[0]); +// view.categoryCatImage.src = result[0].url; +// }); +// } + +function categoryCat(e) { + e.preventDefault(); + console.log(e); + const { id } = e.target.elements; + console.log(`ID: ${id.value}`); + //geting category_id + + let category_ids = id.value; + let url = `${view.url}?category_ids=${category_ids}`; + + if (category_ids === "") { + url = `${view.url}`; + //Console.log https://api.thecatapi.com/v1/images/search + } + console.log(url); + + fetch(url) + .then((res) => res.json()) + .then((result) => { + console.log(result); + console.log(result[0]); + view.categoryCatImage.src = result[0].url; + }); +} From d4637b3a7d8ef0edbba8dc6c7f50980aeac4d387 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 7 Dec 2022 22:54:29 -0500 Subject: [PATCH 2/2] Changed script.js --- lib/script.js | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/lib/script.js b/lib/script.js index e37e0df..f3b4850 100644 --- a/lib/script.js +++ b/lib/script.js @@ -8,6 +8,7 @@ const view = { categoryCatImage: document.querySelector(".categoryCatImage"), }; +//Part_1 view.randomButton.addEventListener("click", showCat); function showCat() { fetch(`${view.url}`) @@ -22,25 +23,7 @@ function showCat() { view.form.addEventListener("submit", categoryCat); -// function categoryCat(e) { -// e.preventDefault(); -// console.log(e); -// const { id } = e.target.elements; -// console.log(`ID: ${id.value}`); -// //geting category_id - -// let category_ids = id.value; -// let url = `${view.url}?category_ids=${category_ids}`; -// console.log(url); - -// fetch(url) -// .then((res) => res.json()) -// .then((result) => { -// console.log(result); -// console.log(result[0]); -// view.categoryCatImage.src = result[0].url; -// }); -// } +//Part_2, Bonus function categoryCat(e) { e.preventDefault();