-
Notifications
You must be signed in to change notification settings - Fork 10
/
dogs.js
33 lines (29 loc) · 872 Bytes
/
dogs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export class DogPicture extends HTMLElement {
constructor() {
super();
this.img = document.createElement("img");
this.appendChild(this.img);
}
connectedCallback() {
this.breed = this.getAttribute("breed") || null;
this.loadRandomImage(this.breed);
}
loadRandomImage(breed) {
let url = "https://dog.ceo/api/breeds/image/random";
if (breed) {
url =
"https://dog.ceo/api/breed/" + breed.toLowerCase() + "/images/random";
}
fetch(url)
.then((response) => response.json())
.then((data) => {
this.img.setAttribute("src", data.message);
if (breed) {
this.img.setAttribute("alt", "picture of a cute " + breed + " dog");
} else {
this.img.setAttribute("alt", "picture of a cute dog");
}
});
}
}
customElements.define("dog-picture", DogPicture);