├── MICHIS.jpg
├── index.html
└── main.js
/MICHIS.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/platzi/consumo-api-rest-javascript/93e7314bec42af1df8f27c88a7bfae28a41c3b26/MICHIS.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Gatitos aleatorios
8 |
9 |
10 | Michis App
11 |
12 |
13 |
14 |
15 | Michis aleatorios
16 |
17 |
18 | ![Foto gatito aleatorio]()
19 |
22 |
23 |
24 |
25 | ![Foto gatito aleatorio]()
26 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | Sube la foto de tu michi
37 |
38 |
42 |
43 |
44 |
45 | Michis favoritos
46 |
47 |
48 | ![Foto gatito aleatorio]()
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const api = axios.create({
2 | baseURL: 'https://api.thecatapi.com/v1'
3 | });
4 | api.defaults.headers.common['X-API-KEY'] = 'c08d415f-dea7-4a38-bb28-7b2188202e46';
5 |
6 | const API_URL_RANDOM = 'https://api.thecatapi.com/v1/images/search?limit=2';
7 | const API_URL_FAVOTITES = 'https://api.thecatapi.com/v1/favourites';
8 | const API_URL_FAVOTITES_DELETE = (id) => `https://api.thecatapi.com/v1/favourites/${id}`;
9 | const API_URL_UPLOAD = 'https://api.thecatapi.com/v1/images/upload';
10 |
11 | const spanError = document.getElementById('error')
12 |
13 | async function loadRandomMichis() {
14 | const res = await fetch(API_URL_RANDOM);
15 | const data = await res.json();
16 | console.log('Random')
17 | console.log(data)
18 |
19 | if (res.status !== 200) {
20 | spanError.innerHTML = "Hubo un error: " + res.status;
21 | } else {
22 | const img1 = document.getElementById('img1');
23 | const img2 = document.getElementById('img2');
24 | const btn1 = document.getElementById('btn1');
25 | const btn2 = document.getElementById('btn2');
26 |
27 | img1.src = data[0].url;
28 | img2.src = data[1].url;
29 |
30 | btn1.onclick = () => saveFavouriteMichi(data[0].id);
31 | btn2.onclick = () => saveFavouriteMichi(data[1].id);
32 | }
33 | }
34 |
35 | async function loadFavouriteMichis() {
36 | const res = await fetch(API_URL_FAVOTITES, {
37 | method: 'GET',
38 | headers: {
39 | 'X-API-KEY': 'c08d415f-dea7-4a38-bb28-7b2188202e46',
40 | },
41 | });
42 | const data = await res.json();
43 | console.log('Favoritos')
44 | console.log(data)
45 |
46 | if (res.status !== 200) {
47 | spanError.innerHTML = "Hubo un error: " + res.status + data.message;
48 | } else {
49 | const section = document.getElementById('favoriteMichis')
50 | section.innerHTML = "";
51 |
52 | const h2 = document.createElement('h2');
53 | const h2Text = document.createTextNode('Michis favoritos');
54 | h2.appendChild(h2Text);
55 | section.appendChild(h2);
56 |
57 | data.forEach(michi => {
58 | const article = document.createElement('article');
59 | const img = document.createElement('img');
60 | const btn = document.createElement('button');
61 | const btnText = document.createTextNode('Sacar al michi de favoritos');
62 |
63 | img.src = michi.image.url;
64 | img.width = 150;
65 | btn.appendChild(btnText);
66 | btn.onclick = () => deleteFavouriteMichi(michi.id);
67 | article.appendChild(img);
68 | article.appendChild(btn);
69 | section.appendChild(article);
70 | });
71 | }
72 | }
73 |
74 | async function saveFavouriteMichi(id) {
75 | const { data, status } = await api.post('/favourites', {
76 | image_id: id,
77 | });
78 |
79 | // const res = await fetch(API_URL_FAVOTITES, {
80 | // method: 'POST',
81 | // headers: {
82 | // 'Content-Type': 'application/json',
83 | // 'X-API-KEY': 'c08d415f-dea7-4a38-bb28-7b2188202e46',
84 | // },
85 | // body: JSON.stringify({
86 | // image_id: id
87 | // }),
88 | // });
89 | // const data = await res.json();
90 |
91 | console.log('Save')
92 |
93 | if (status !== 200) {
94 | spanError.innerHTML = "Hubo un error: " + status + data.message;
95 | } else {
96 | console.log('Michi guardado en favoritos')
97 | loadFavouriteMichis();
98 | }
99 | }
100 |
101 | async function deleteFavouriteMichi(id) {
102 | const res = await fetch(API_URL_FAVOTITES_DELETE(id), {
103 | method: 'DELETE',
104 | headers: {
105 | 'X-API-KEY': 'c08d415f-dea7-4a38-bb28-7b2188202e46',
106 | }
107 | });
108 | const data = await res.json();
109 |
110 | if (res.status !== 200) {
111 | spanError.innerHTML = "Hubo un error: " + res.status + data.message;
112 | } else {
113 | console.log('Michi eliminado de favoritos')
114 | loadFavouriteMichis();
115 | }
116 | }
117 |
118 | async function uploadMichiPhoto() {
119 | const form = document.getElementById('uploadingForm')
120 | const formData = new FormData(form);
121 |
122 | console.log(formData.get('file'))
123 |
124 | const res = await fetch(API_URL_UPLOAD, {
125 | method: 'POST',
126 | headers: {
127 | // 'Content-Type': 'multipart/form-data',
128 | 'X-API-KEY': 'c08d415f-dea7-4a38-bb28-7b2188202e46',
129 | },
130 | body: formData,
131 | })
132 | const data = await res.json();
133 |
134 | if (res.status !== 201) {
135 | spanError.innerHTML = "Hubo un error: " + res.status + data.message;
136 | console.log({data})
137 | } else {
138 | console.log('Foto de michi subida :)')
139 | console.log({data})
140 | console.log(data.url)
141 | saveFavouriteMichi(data.id);
142 | }
143 | }
144 |
145 | loadRandomMichis();
146 | loadFavouriteMichis();
147 |
--------------------------------------------------------------------------------