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;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,29 @@ @@
 +consturl="https://api.thecatapi.com/v1/images/search";
 +constsection=document.querySelector(".container");
 +constbutton=document.querySelector(".btn");
++
 +button.addEventListener("click",getRandomCats);
++
 +randomCatPhoto=(json)=>{
 +letphoto=json[0].url;
 +section.classList.add("cats");
++
 +letimage=document.createElement("img");
 +image.src=photo;
 +image.classList.add("random_cats");
 +image.alt=photo;
 +section.appendChild(image);
 +};
++
 +asyncfunctiongetRandomCats(){
 +section.innerHTML="";
 +try{
 +constresponse=awaitfetch(url);
 +constjson=awaitresponse.json();
 +console.log("JSON:",json);
 +returnrandomCatPhoto(json);
 +}catch(e){
 +console.log("This is an error");
 +console.log(e);
 +}
 +}
-Original file line number
+Diff line change
@@ @@ -0,0 +1,18 @@ @@
 +<htmllang="en">
 +<head>
 +<metacharset="UTF-8" />
 +<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
 +<metaname="viewport" content="width=device-width, initial-scale=1.0" />
 +<title>Random Cat Images</title>
 +<linkrel="stylesheet" href="style.css" />
 +</head>
 +<body>
 +<sectionclass="header-content">
 +<buttonclass="btn">Get Random Cat</button>
 +</section>
++
 +<divclass="container"></div>
++
 +<scriptsrc="app.js"></script>
 +</body>
 +</html>