Skip to content

Commit

Permalink
Working with API with Dog API
Browse files Browse the repository at this point in the history
  • Loading branch information
@kacperwalter
kacperwalter committed Mar 14, 2021
1 parent 0a3c119 commit 306e964
Show file tree
Hide file tree
Showing 14 changed files with 11,336 additions and 0 deletions.
83 changes: 83 additions & 0 deletions JS/samuraj-programowania/nodejs/api-gallery/dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Document</title>

</head>
<body>

<main class="app">
<header>
<div class="container">
<h1>Good Doggos</h1>
</div>
</header>
<section>
<div class="container">
<h2>Featured Doggo</h2>
<div class="featured-dog">
<div class="featured-dog__wrapper">
<div class="featured-dog__background"></div>
<div class="featured-dog__image">
<img src="" alt="">
</div>
</div>
<div class="featured-dog__description">
<p>Here you can see very good doggo</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>All Doggos</h2>
<p>Click on any breed to select next cute doggos.</p>
<div class="tiles">

</div>
</div>
</section>
</main>

<!-- <main class="app">
<header>
<div class="container">
<h1>Good Doggos</h1>
</div>
</header>
<section>
<div class="container">
<h2>Featured Doggo</h2>
<div class="featured-dog">
<div class="featured-dog__wrapper">
<div class="featured-dog__background"></div>
<div class="featured-dog__image">
<img src="" alt="">
</div>
<div class="spinner">
<div class="spinner__content"></div>
</div>
</div>
<div class="featured-dog__description">
<p>Here you can see very good doggo!</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>All doggos</h2>
<p>Click an any breed to select next cute doggos.</p>
<div class="tiles">
</div>
</div>
</section>
</main> -->

<script type="text/javascript" src="/main.bundle.js"></script></body>
</html>
1 change: 1 addition & 0 deletions JS/samuraj-programowania/nodejs/api-gallery/dist/main.bundle.js
View file

Large diffs are not rendered by default.

83 changes: 83 additions & 0 deletions JS/samuraj-programowania/nodejs/api-gallery/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Document</title>

</head>
<body>

<main class="app">
<header>
<div class="container">
<h1>Good Doggos</h1>
</div>
</header>
<section>
<div class="container">
<h2>Featured Doggo</h2>
<div class="featured-dog">
<div class="featured-dog__wrapper">
<div class="featured-dog__background"></div>
<div class="featured-dog__image">
<img src="" alt="">
</div>
</div>
<div class="featured-dog__description">
<p>Here you can see very good doggo</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>All Doggos</h2>
<p>Click on any breed to select next cute doggos.</p>
<div class="tiles">

</div>
</div>
</section>
</main>

<!-- <main class="app">
<header>
<div class="container">
<h1>Good Doggos</h1>
</div>
</header>
<section>
<div class="container">
<h2>Featured Doggo</h2>
<div class="featured-dog">
<div class="featured-dog__wrapper">
<div class="featured-dog__background"></div>
<div class="featured-dog__image">
<img src="" alt="">
</div>
<div class="spinner">
<div class="spinner__content"></div>
</div>
</div>
<div class="featured-dog__description">
<p>Here you can see very good doggo!</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>All doggos</h2>
<p>Click an any breed to select next cute doggos.</p>
<div class="tiles">
</div>
</div>
</section>
</main> -->

</body>
</html>
89 changes: 89 additions & 0 deletions JS/samuraj-programowania/nodejs/api-gallery/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import '../sass/style.scss';

class Doggo {
constructor() {
this.apiUrl = 'https://dog.ceo/api';
this.imgEl = document.querySelector('.featured-dog img');
this.backgroundEl = document.querySelector('.featured-dog__background');
this.tilesEl = document.querySelector('.tiles');

this.init();
}

listBreeds() {
return fetch(`${this.apiUrl}/breeds/list/all`)
.then(response => response.json())
.then(data => data.message)
}

getRandomImage() {
return fetch(`${this.apiUrl}/breeds/image/random`)
.then(resp => resp.json())
.then(data => data.message);
}

getRandomImageByBreed(breed) {
return fetch(`${this.apiUrl}/breed/${breed}/images/random`)
.then(resp => resp.json())
.then(data => data.message);
}

addBreed(breed, subBreed) {
let name;
let type;

if (typeof subBreed === 'undefined') {
name = breed;
type = breed;
} else {
name = `${breed} ${subBreed}`;
type = `${breed}/${subBreed}`;
}

const tile = document.createElement('div');
tile.classList.add('tiles__tile');

const tileContent = document.createElement('div');
tileContent.classList.add('tiles__tile-content');
tileContent.innerText = name;
tile.addEventListener('click', () => {
this.getRandomImageByBreed(type)
.then(src => {
this.imgEl.setAttribute('src', src);
this.backgroundEl.style.background = `url("${src}")`;
})
})

tile.appendChild(tileContent);
this.tilesEl.appendChild(tile);
}

showAllBreeds() {
this.listBreeds()
.then(breeds => {
for (const breed in breeds) {
if (breeds[breed].length ===0) {
this.addBreed(breed);
} else {
for (const subBreed of breeds[breed]) {
this.addBreed(breed, subBreed);
}
}
}
})
}

init() {
this.getRandomImage()
.then(src => {
this.imgEl.setAttribute('src', src);
this.backgroundEl.style.background = `url("${src}")`;
});

this.showAllBreeds();
}
}

document.addEventListener('DOMContentLoaded', () => {
new Doggo();
});

0 comments on commit 306e964

Please sign in to comment.