Random Cats Generator HTML, CSS and JAVASCRIPT

HuXn-WebDev · HuXn-WebDev · commit e2017e80fd15 · 2022-09-27T06:03:22.000-07:00
diff --git a/77. Random Cat Images/app.js b/77. Random Cat Images/app.js
@@ -0,0 +1,29 @@
+const url = "https://api.thecatapi.com/v1/images/search";
+const section = document.querySelector(".container");
+const button = document.querySelector(".btn");
+
+button.addEventListener("click", getRandomCats);
+
+randomCatPhoto = (json) => {
+  let photo = json[0].url;
+  section.classList.add("cats");
+
+  let image = document.createElement("img");
+  image.src = photo;
+  image.classList.add("random_cats");
+  image.alt = photo;
+  section.appendChild(image);
+};
+
+async function getRandomCats() {
+  section.innerHTML = "";
+  try {
+    const response = await fetch(url);
+    const json = await response.json();
+    console.log("JSON:", json);
+    return randomCatPhoto(json);
+  } catch (e) {
+    console.log("This is an error");
+    console.log(e);
+  }
+}
diff --git a/77. Random Cat Images/index.html b/77. Random Cat Images/index.html
@@ -0,0 +1,18 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Random Cat Images</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="header-content">
+      <button class="btn">Get Random Cat</button>
+    </section>
+
+    <div class="container"></div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/77. Random Cat Images/style.css b/77. Random Cat Images/style.css
@@ -0,0 +1,33 @@
+body {
+  background: rgb(17, 17, 17);
+}
+
+.header-content {
+  text-align: center;
+}
+
+.btn {
+  background: transparent;
+  border: none;
+  background-color: rgb(216, 34, 74);
+  color: #fff;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+/* JavaScript */
+.cats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.random_cats {
+  width: 40%;
+}
+
+img {
+  max-width: 700px;
+  height: 30rem;
+}
