Skip to content

Anna_Druzhinina_Part1, Part2, Bonus #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
annadruzhinina wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Anna_Druzhinina_Part1, Part2, Bonus #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d15ecb9
Part_1, Part_2, Bonus
annadruzhinina Dec 8, 2022
d4637b3
Changed script.js
annadruzhinina Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
79 changes: 42 additions & 37 deletions lib/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Random Cat API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Random Cat API</h1>
</header>
<main>
<button class="randomButton">Random Cats! Meow!</button>
<div class="randomCat"><img src="" class="randomCatImage"></div>
<form>
<input type="text" class="input" placeholder="Category ID">
<button class="searchButton">Find Cats! Meow!</button>
</form>
<div class="category-keys">
<!-- <h3>Categories</h3> -->
<ul>
<li>1: Hats</li>
<li>2: Space</li>
<li>4: Sunglasses</li>
<li>5: Boxes</li>
<li>7: Ties</li>
<li>14: Sinks</li>
<li>15: Clothes</li>
</ul>
</div>
<div class="categoryCat"><img src="" class="categoryCatImage"></div>
</main>
<script src="script.js"></script>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Random Cat API</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Random Cat API</h1>
</header>
<main>
<button class="randomButton">Random Cats! Meow!</button>
<div class="randomCat"><img src="" class="randomCatImage" /></div>
<form>
<input name="id" type="text" class="input" placeholder="Category ID" />
<!-- <input name="name" type="text" class="input" placeholder="Name" /> -->

<button type="submit" class="searchButton">Find Cats! Meow!</button>
</form>
<div class="category-keys">
<!-- <h3>Categories</h3> -->
<ul>
<li>1: Hats</li>
<li>2: Space</li>
<li>4: Sunglasses</li>
<li>5: Boxes</li>
<li>7: Ties</li>
<li>14: Sinks</li>
<li>15: Clothes</li>
</ul>
</div>
<div class="categoryCat"><img src="" class="categoryCatImage" /></div>
</main>
<script src="script.js"></script>
</body>
</html>
51 changes: 51 additions & 0 deletions lib/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
});
}