Commit e2017e8

committed

Random Cats Generator HTML, CSS and JAVASCRIPT

1 parent cac7c70 commit e2017e8Copy full SHA for e2017e8

File tree

+80

-0

lines changed

+80

-0

lines changed

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,29 @@`
	`1`	`+const url = "https://api.thecatapi.com/v1/images/search";`
	`2`	`+const section = document.querySelector(".container");`
	`3`	`+const button = document.querySelector(".btn");`
	`4`	`+`
	`5`	`+button.addEventListener("click", getRandomCats);`
	`6`	`+`
	`7`	`+randomCatPhoto = (json) => {`
	`8`	`+ let photo = json[0].url;`
	`9`	`+ section.classList.add("cats");`
	`10`	`+`
	`11`	`+ let image = document.createElement("img");`
	`12`	`+ image.src = photo;`
	`13`	`+ image.classList.add("random_cats");`
	`14`	`+ image.alt = photo;`
	`15`	`+ section.appendChild(image);`
	`16`	`+};`
	`17`	`+`
	`18`	`+async function getRandomCats() {`
	`19`	`+ section.innerHTML = "";`
	`20`	`+ try {`
	`21`	`+ const response = await fetch(url);`
	`22`	`+ const json = await response.json();`
	`23`	`+ console.log("JSON:", json);`
	`24`	`+ return randomCatPhoto(json);`
	`25`	`+ } catch (e) {`
	`26`	`+ console.log("This is an error");`
	`27`	`+ console.log(e);`
	`28`	`+ }`
	`29`	`+}`

Lines changed: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,18 @@`
	`1`	`+<html lang="en">`
	`2`	`+ <head>`
	`3`	`+ <meta charset="UTF-8" />`
	`4`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`6`	`+ <title>Random Cat Images</title>`
	`7`	`+ <link rel="stylesheet" href="style.css" />`
	`8`	`+ </head>`
	`9`	`+ <body>`
	`10`	`+ <section class="header-content">`
	`11`	`+ <button class="btn">Get Random Cat</button>`
	`12`	`+ </section>`
	`13`	`+`
	`14`	`+ <div class="container"></div>`
	`15`	`+`
	`16`	`+ <script src="app.js"></script>`
	`17`	`+ </body>`
	`18`	`+</html>`

Lines changed: 33 additions & 0 deletions

Comments

(0)