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

-
-
- -
-
- - -
-
- - -
-
-
- - - \ No newline at end of file + + + + Random Cat API + + + + + + +
+

Random Cat API

+
+
+ +
+
+ + + + +
+
+ + +
+
+
+ + + diff --git a/lib/script.js b/lib/script.js index e69de29..f3b4850 100644 --- a/lib/script.js +++ b/lib/script.js @@ -0,0 +1,51 @@ +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"), +}; + +//Part_1 +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); + +//Part_2, Bonus + +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; + }); +}