No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
22H
50M
9S

POST: guardando michis favoritos

10/20
Recursos

Aportes 58

Preguntas 18

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃挕 Recomendaci贸n: mira esta clase al menos 2 veces. En la primera disfruta de mi sufrimiento, mira paso a paso todo lo que hago y r铆ete de los errores que tuve. Luego, la segunda vez, desarrolla los ejercicios, pero adel谩ntate a los errores que comet铆 para que no te pasen tambi茅n a ti.

Y ya que estamos, era en este meme en el que estaba pensando cuando celebramos que, aunque segu铆amos teniendo error, al menos ahora era uno distinto:

Excelente clase, por dos cosas:

  • El contenido.

  • El debbugin.

Lo primero es obvio, pero lo segundo nos muestra como es batallar con un error, algo que nos enfrentaremos diario si nos dedicamos a esto.

Una excelente clase.

Gente si no les agrega en favoritos, revisen que la url de favorites no tenga el ?limit=2

para que les pues traer todos los favoritos que han guardado
Luego me lo agradecen 馃槄

El protagonista de esta clase:

Para utilizar la API KEY de una forma m谩s segura (como la que menciona la documentaci贸n de nuestra API de gatos), lo mejor es guardarla en headers, al momento de realizar el POST a nuestros favoritos, en vez de colocarla directamente en la URL:

//URL de la API
const URL = 'https://api.thecatapi.com/v1/';
const RANDOM = 'images/search';
const LIMIT_RANDOM = '?limit=6';

//URL de favoritos
const FAVORITES = 'favourites';
const key = "ABC123";

const res = await fetch(URL+FAVORITES, {
            method: 'POST',
            headers: {
                'x-api-key': key,
                'content-type': 'application/json'
            },

Muy buena clase
Que bueno que lo dejen as铆, muestra realmente c贸mo es todo el proceso de programar en verdad. Aunque a veces no podamos mantener la actitud de Juan y nos gane el bug 馃樄

Me gustan las clases de Juan DCG, son como si estuviera hablando con el, tom谩ndonos un refresco en el barrio

Recomiendo usar .innerText para solo incrustar texto en el span

const errorNode = document.querySelector('#error');
        errorNode.innerText = `Error: ${error.message}`;

Para estructurar mejor el c贸digo pueden usar esta nomenclatura de variables apra el fetch

const querystring = {
    image_id: 'sdsd',
}

const options = {
    method: 'POST',
    headers: { 'content-type': 'application/json' }, // tipo de archivo de la solicitud
    body: JSON.stringify(querystring),
}

const response = await fetch(URL_FAVORITES, options);

A veces el querystring se usa como data o simplemente query pero como ya estamos usando data entonces usamos querystring

Una forma de tener varios botones haciendo lo mismo, sin usar onclick es la siguiente

document.addEventListener("click", function(event){
    if (event.target.className == "random__button"){
        saveFavorite();
    }
}, false);

Le ponemos a todos lo botones la misma clase.
Y le decimos a js que escuche en todo el documento. Cuando el click venga de la clase que nosotros queremos tiene que hacer tal cosa. En este caso ejecutar la funci贸n de guardar en favoritos.
Si el click viene de un bot贸n con otra clase no hace nada.

Fijense que si en la URL de favoritos tienen el limite=2 se les va a complicar en visualizar los guardados!

Recuerden hacer console.log() de TODO lo que sea necesario para ayudarles a entender la l贸gica de un proceso que vayan implementando. Para m铆 ha sido la mejor manera de identificar errores l贸gicos, me ha ahorrado much铆simo tiempo.

Hola , Si estan teninedo problemas para hacer la peticion POST talvez se deba a que el API_KEY debe ir en el headers.
Almenos ese es un problema que yo tuve, porque al pareser el servodor no encontraba muy seguro el madarla por un QueryParameter. Y daba un error 404.

headers: {
 "x-api-key": "tu_personal_API_KEY",
 "Content-Type": "application/json",
}

Si no les muestra el mensaje de error usando data.message pueden intentar con await res.text()

Mantener la actitud gatuna fue el gran aprendizaje de esta clase! Gracias Juan!

Am茅 esta clase

Hay algo que no entiendo, cuando hacemos post, donde se guarda toda esta informacion?
Subi a github pages, y abrio la misma pagina con los mismo elementos que guarde en mi localhost.

RIP la reina de Inglaterra

Recuerden quitar el limit=2, en el EndPoint de favourites.

Realmente tuve el mismo error del 鈥榟eaders鈥 y al final me toc贸 buscarlo鈥 para que luego en el video lo dijera jaja
Dejo el c贸digo para qui茅n pueda ayudarle.
.

HTML

<!-- ... -->

<section id="randomCats">
    <h2>Random Cats</h2>
    <span id="error"></span>
    <article>
      <img class="cat-image" alt="Foto de gatito 1" style="width:28rem">
      <button onclick="saveAFavouriteCat()">Save to favorites</button>
    </article>
    <article>
      <img class="cat-image" alt="Foto de gatito 2" style="width:28rem">
      <button onclick="saveAFavouriteCat()">Save to favorites</button>
    </article>
    <article>
      <img class="cat-image" alt="Foto de gatito 3" style="width:28rem">
      <button onclick="saveAFavouriteCat()">Save to favorites</button>
    </article>
    <button onclick="pickACat()">Pick another CAThino</button>
  </section>
  
  <section id="favoriteCats">
    <h2>favorites Cats</h2>
    <article>
      <img alt="Foto de gatito fav" style="width:28rem">
      <button>Remove from favorites</button>
    </article>
  </section>

<!-- ... -->

.
JS

const API_URL = "https://api.thecatapi.com/v1";
const API_KEY = "98c9e40c-8dfb-4e9b-91d0-6c38bdf23707";
const endpoints = {
  API_URL_LIMIT_SEARCH: (limit = 3) =>
    `${API_URL}/images/search?limit=${limit}&api_key=${API_KEY}`,
  API_URL_FAVOURITES: `${API_URL}/favourites?api_key=${API_KEY}`,
};

const spanError = document.getElementById("error");

const pickACat = async (url = endpoints.API_URL_LIMIT_SEARCH(3)) => {
  const response = await fetch(url);

  try {
    const data = await response.json();
    const imgTags = document.querySelectorAll(".cat-image");
    imgTags.forEach((element, key) => (element.src = data[key].url));
  } catch (error) {
    if (response.status !== 200)
      return (spanError.innerText = "An error has occurred," + data.message);
  }
};

const pickAFavouriteCat = async (url = endpoints.API_URL_FAVOURITES) => {
  const response = await fetch(url);
  const data = await response.json();

  console.log(
    "response pick favourites >>>",
    response,
    data ? data : "no data"
  );
};

const saveAFavouriteCat = async (url = endpoints.API_URL_FAVOURITES) => {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      image_id: "agrs",
    }),
  });
  const data = await response.json();

  console.log("save", response);

  if (response.status !== 200)
    return (spanError.innerText = "An error has occurred," + data.message);
};

pickACat();
pickAFavouriteCat();

no quiero ofender pero , no entiendo mucho a este profesor.
habla muy rapido , y haces mucha vueltas.

jajaja rayos, xD, esta clase estuvo muy chida B)

Al final de todo experiment茅 dos errores juntos, el 404 y el 405 correspondientes a que no encontraba el enlace para API_URL_FAVOURITES

Despues de revisar me di cuenta que tenia mal el enlace, el siguiente es el correcto (SIN INCLUIR LIMIT=2):

const API_URL_FAVOURITES=鈥https://api.thecatapi.com/v1/favourites?api_key=live_IsosBZPWVknBjuAzHHN9nUnHgRniy2ZjMAydCAkUmwxKDWIjREXIxsU5Hf3MzU2v

Una manera de ver los errores mas especifico, es con la ayuda de la consola -> network:

A los que no les carga el mensaje el Error en el span (me inclu铆a), CREO que no se termina ejecutando porque el siguiente llamado tiene await y como nunca termina llegando se queda la funci贸n ahi. intente poniendo el IF antes del res.json() y funciono. ojo CREO 馃憖

Al final agregu茅 una funci贸n que genera un ID 煤nico para cada usuario y lo guarda en el local Storage, logre hacerlo gracias a la documentaci贸n 馃槃

estaba fallando hasta que averigue que me di cuenta que 鈥榓pplication/json鈥 estaba con una sola 鈥榩鈥.

suele pasar

Hola, quisiera decir que llevaba horas en internet tratando en entender qu茅 estaba haciendo mal, me hace feliz que solo tuve que ver esta clase y pude hacer lo que necesitaba 馃槂 No iba a tomar el curso, pero ahora estar谩 en mi lista por supuesto.

As铆 quedo mi funci贸n de guardar

async function saveFavoritesDogs (id){
        // console.log(id);
        var option = { 
            method:'POST', 
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify( {image_id: id})
        }
        const res = await fetch (endpoint.URL_API_FAVOURITES, option)
        console.log(res)
        const data = await res.json();
        console.log(data);
        if (res.status == 200) {
            Swal.fire({
                icon: 'success',
                title: 'Agregado a favoritos',
                text: `El id de su perro favorito es ` + data.id
            })
            dogsFovurites (data.id)    
        }
    }

Despu茅s de agregar a favoritos, se recarga la siguiente funci贸n donde mostramos los ultimos 4 favoritos.

async function dogsFovurites (subId) {
        let favDogs = d.querySelector('#favDogs');
        const res = await fetch(`${endpoint.URL_API_FAVOURITES}?sub_id=`+subId)
        console.log(res);
        const data = await res.json();
        try {
            let data_nuevo = data.slice(data.length-4);
            let datos_fav = `
            ${data_nuevo.map (dog_fav =>
                ` 
                <div class="col mb-3 me-2 ms-3" style="float: left;">
                    <div class="card " style="width: 18rem;" >
                        <img src="${dog_fav.image.url}" class="card-img-top img_cambia" alt="..." width="300" height="200">
                        <div class="card-body">
                           <button type="button" id="" class="btn btn-primary">${dog_fav.id}</button>
                        </div>
                    </div>
                </div>
                `)}`;
                favDogs.innerHTML = datos_fav.replace(/,/g,"") 
        } catch (error) {
            const errorNode = document.querySelector('#error');
            errorNode.innerText = `Error: ${error.message}`;
        }
    }

Cuando hagamos un fetch y queramos usar una opci贸n que no sea por defecto (GET), tendremos que especificarselo como segundo argumento, para ello utilizaremos un objeto:

const res = await fetch(API_URL_FAVOURITE,{})

quedando algo como esto:

async function saveFavouriteMichis() {
  const res = await fetch(API_URL_FAVOURITE, 
	{
    method: 'POST',
    headers: {},
		body:{}
	})
				

Header

'Content-Type': 'application/json',

Body

Para mandarle la informaci贸n al servidor:

body {
       image_id: 45
      }

Como no sabemos si en el backen recibir谩 bien un JSON, usaremos el m茅todo JSON.stringify() para poder enviar texto plano, quedandonos el body de la siguiente manera:

una cosita si uds al momento de darle clic a los botones de agregar a Favorito y no les agrega pa麓nada, verifiquen que no tengan el End Poin de
limit=2, si no puede acumular una basta cantidad de Michis al momento que lo quiten

Para los que est茅n empleando la API de Fake Store de Platzi, pueden hacerlo as铆 como un ejemplo:
.
.


.
.
Ahora hay que ver si el producto se recibi贸 correctamente:
.
.

01:20 thecatapiqueen, que en ~paz~ descanse.

que gran clase!

quitad el limit=2 para favoritossssss

Super esta clase, cada vez me queda m谩s claro como funcionan estas consultas. Juan DC best teacher.

Les dejo un michi para alegrarles el d铆a.

me representa

Muy bueno que hayan dejado el proceso de depuraci贸n para ver posibles errores con los que nos podamos encontrar nosotros. No todo sale perfecto cuando se programa.

Yo le agregue esta funciona al codigo para que no se repitieran las imagenes

async function verifyFavoriteDoggos(doggo) {

    const response =  await fetch(API_URL_FAVORITE, {
        headers: {
            "content-type": "application/json",
            "x-api-key": "9c42b774-25a9-4da5-afff-079782d20982",
        },
    })

    const data = await response.json()
    const image = doggo.url || doggo.image.url;
    let band = false

    data.forEach(doggoImage => {
        if (doggoImage.image.url === image) {
            band = true
        }
    })

    if(band) {
        saveFavoriteDog({
            'band':  true
        })
    } else {
        saveFavoriteDog({'id': doggo.id})
    }
}

y la funcion de guardar lo envolvie en esta logica

async function saveFavoriteDog({ id, band = false }) {
    console.log(band)
    if (band === false) {
        const response = await fetch(`${API_URL_FAVORITE}`, {
            method: "POST",
            headers: {
                "content-type": "application/json",
                "x-api-key": "9c42b774-25a9-4da5-afff-079782d20982",
            },
            body: JSON.stringify({
                'image_id': id
            })
        })

        if (response.status !== 200) {
            spanError.innerHTML = "Ha ocurrido un error 馃槗"
            setTimeout(() => {
                spanError.innerHTML = ""
            }, 2000)

        } else {
            spanError.innerHTML = "Doggo guardado correctamente 馃挌"
            setTimeout(() => {
                spanError.innerHTML = ""
            }, 2000)
        }

    } if (band) {
        spanError.innerHTML = "El doggo ya se habia guardado 馃惗"
        setTimeout(() => {
            spanError.innerHTML = ""
        }, 2000)
    }
}

Si encuentran una forma de refactorizar estaria muy agradezido

muy buena la clase,
me gusto los errores se siente muy real la clase, eso es lo que nos vamos a encontrar muchas veces, errores y errores, y es genial ver que no es algo de que enojarse, es parte de nuestro trabajo y aprendizaje que tengamos errores y corregirlos,

Me sent铆 identificado

Les comparto este post para reforzar la sintaxis de las solicitudes con POST
justo aqui

Excelente debugging!

Todo funcionando

const API_URL_RANDOM = 'https://api.thecatapi.com/v1/images/search?limit=2&' //url que nos da imagenes randoms

const API_URL_getFavourites = 'https://api.thecatapi.com/v1/favourites' //url de nuestras imagenes favs
 
const API_KEY = '?api_key=f8bba90a-ad5e-480b-834b-bb39c63aaec6' //api key para hacer solicitudes http

const imageRandom = document.getElementById('image1')

const secondImageRandom = document.getElementById('image2')

const refreshButton = document.getElementById('refresh')

const fetch_api = async () => {

    const request = await fetch(`${API_URL_RANDOM}${API_KEY}`) //url de imagenes randoms
    const response = await request.json()
    console.log('random')
    console.log(response)
    const img = document.querySelectorAll('.img')

    //por cada imagen que coincida con el query selector le asignaremos la imagen que nos sale de la API 
    img.forEach((image, index) => {

        image.src = response[index].url
    })
}

const fetch_api_favourites = async () => {

    const error = document.querySelector('#error')
    const request = await fetch(`${API_URL_getFavourites}${API_KEY}`) //concatenamos la ruta
    try {

        const response = await request.json() //convertimos a un json manipulable, objeto
        console.log('favs')
        console.log(response)
        const img = document.querySelector('.favourite')
        img.src = response[0].image.url //estamos diciendole que el src de la img ser谩 la imagen que nos trae la API

    } catch(err) {

        error.classList.remove('none')
        error.classList.add('alert', 'alert-danger')
        error.textContent = `Error ${request.status}. ${err.message}`//pasamos el status code y el mensaje
    }
}

const saveFavouritesMichis = async () => {

    const saveFavourites = await fetch(API_URL_getFavourites + API_KEY, {

        method: 'POST', //declaraci贸n del metodo http
        headers: {

            'Content-Type': 'application/json' //declaramos el tipo de dato que enviaremos
        },

        //convertimos a json el dato que enviaremos ya que no sabemos si podr谩 leer javascript puro
        body: JSON.stringify({

            image_id: "a8s" //id de la imagen del cat
        })   
    })

    console.log(saveFavourites) //debugeamos que nos tira la api favourites, que es un arreglo en si

}


window.addEventListener('DOMContentLoaded', () => {

    window.addEventListener('load', fetch_api)
    window.addEventListener('load', fetch_api_favourites)
    refreshButton.addEventListener('click', fetch_api)
    imageRandom.addEventListener('click', saveFavouritesMichis)
    secondImageRandom.addEventListener('click', saveFavouritesMichis)

})

alguien pudo imprimir el span error? actualmente no he podido ver la forma de que imprima estos errores

3:42 le informo que el nombre de la constante de michis random tiene un error tipogr谩fico es API_URL_FAVOTITES y seria favourites

A la segunda vez que v铆 la clase entend铆 como resolver los errores鈥 se siente bien cambiar de error jajajaja鈥

Query string: limit 馃敟

Tengo una duda respecto al porqu茅 al quitarle el l铆mite a mi const API_URL_FAVORITES me imprime 100 favoritos y al fijar un l铆mite de 2 imprime 2 favoritos. Tambi茅n al cambiar el image_id: "dje" por cma o cualquier otro valor no se guarda como favoritos鈥 Dejo mi c贸digo.

const query_string = ["?", "limit=2"].join("");
const API_KEY = [
  "&", //?
  "api_key=",
  "lover_W59yADfRT3YY5Q43cP78HvD8XNGH80daxZBiTzY",
].join("");

const API_URL_RANDOM = `https://api.thecatapi.com/v1/images/search${query_string}${API_KEY}`;
const API_URL_FAVORITES = `https://api.thecatapi.com/v1/favourites${query_string}${API_KEY}`;

async function load_random() {
  const request_failed = document.createElement("span");
  const container = document.querySelector(".container");
  try {
    const response = await fetch(API_URL_RANDOM);

    if (response.status === 200) {
      const data = await response.json();

      console.log("Random");
      console.log(data);
      container.innerHTML = "";
      let n_buttons = 1;

      data.map((img) => {
        const content = document.createElement("figure");
        content.innerHTML = `
        <img src="${img.url}" alt="Kitten pictures">
        <img class="save btn${n_buttons++}" onclick="save_favorites()" src="./heart.svg" alt="Heart icon">
        `;
        container.append(content);
      });
    } else {
      request_failed.innerText = `Request failed. Status code: ${response.status}`;
      container.append(request_failed);
    }
  } catch (e) {
    request_failed.innerText = `An error occurred: ${e.message}`;
    container.append(request_failed);
  }
}

async function load_favorites() {
  const container = document.querySelector(".container");
  const request_failed = document.createElement("span");

  try {
    const response = await fetch(API_URL_FAVORITES);

    if (response.status === 200) {
      const data = await response.json();

      console.log("Favorites");
      console.log(data);
    } else {
      request_failed.innerText = `Request failed. Status code: ${response.status}`;
      container.append(request_failed);
    }
  } catch (e) {
    request_failed.innerText = `An error occurred: ${e.message}`;
    container.append(request_failed);
  }
}

async function save_favorites() {
  const favorite_cat = document.querySelector(".favorite__cat");
  const request_failed = document.createElement("span");

  try {
    const response = await fetch(API_URL_FAVORITES, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        image_id: "dje", //cma.jpg
      }),
    });

    if (response.status === 200) {
      const data = await response.json();
      //console.log('Save');
      console.log('Save ', response);
      console.log(data);
    } else {
      request_failed.innerText = `Request failed. Status code: ${response.status}`;
      favorite_cat.append(request_failed);
    }
  } catch (e) {
    request_failed.innerText = `An error occurred: ${e.message}`;
    favorite_cat.append(request_failed);
  }
}

load_random();
load_favorites();
//save_favorites();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Kittens</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Random Kittens</h1>
    <main id="random">
      <h2>Kittens List</h2>
      <section class="container">
        <!-- 
        <figure>
          <img id="img1" width="150" alt="Random kittens" />
          <img class="save" src="./heart.svg" alt="Heart icon">
        </figure> -->
      </section>

      <button class="reload" onclick="load_random()">Random</button>
    </main>

    <section class="favorites" id="favorites">
      <h2>Kittens Favorites</h2>
      <div class="favorite__cat">
        <!-- 
        <figure>
          <img id="img1" width="150" alt="Random kittens" />
          <button class="delete">Delete</button>
        </figure> -->
      </div>
    </section>

    <script src="./main.js"></script>
  </body>
</html>

Hice este proyecto con el conocimiento adquirido hasta esta clase, aun esta en desarrollo, de momento solo muestra las im谩genes random y se puede guardar en favoritos.
Aca dejo en el link https://draekk.github.io/dog-tynder/ y el repositorio.

Favoritos

Al d铆a de hoy la documentaci贸n docs.thecatapi.com no funciona. Una lastima ya que gran parte de este curso se basa en esa api y se me dificulta encontrar un igual.

la verdad esta clase ha generado confusi贸n, la he visto mas de una vez

EXCELENTE CLASE MAGISTRAL PROFESOR

Apliqu茅 lo aprendido en mi proyecto, as铆 va quedando.

Les quiero compartir mi 鈥減eque帽o error鈥 que me tomo 2 horas en darme cuenta, me preguntaba y preguntaba porque mi c贸digo solo dejaba agregar 2 im谩genes, yo pensaba que hab铆a hecho mal la solicitud y por eso no me agregaba nada m谩s, me sent铆a frustrado y decid铆 mejor darme un descanso y cenar algo. Y para mi sorpresa cuando regreso me doy cuenta que mi 鈥渆rror鈥 era esta l铆nea:

const API_URL_FAVORITES = 'https://api.thedogapi.com/v1/favourites?limit=2&api_key=$(API_KEY)';      

En donde le dec铆a a la API que solo me traiga 2 objetos de la lista de favoritos鈥 馃槄
Y cuando le quite el l铆mite me tope con que hab铆a agregado mas de 45 objetos 馃檧 jajaja



solo vengo a comentar que lastimosamente la reina isabel ya no podr谩 consultar sus michis favoritos

No he visto la clase y ya me estoy riendo de los comentarios

Hola! Si tienen un problema con la API y el error es 401, recomiendo mandar la API key por los headers.

let page = 1

const API_URL = 鈥https://api.thecatapi.com/v1/images/search?limit=3

const API_URL_FAVOTITES = 鈥https://api.thecatapi.com/v1/favourites鈥;

const FAVORITE = 鈥https://api.thecatapi.com/v1/favourites

const spanError = document.getElementById(鈥渆rror鈥)

async function reload() {

const res = await fetch(API_URL)
const data = await res.json()


if(res.status !== 200) {
    spanError.innerHTML = "Hubo un error " + res.status
}


console.log(data)    
const img = document.getElementById("gatosAleatorios")
const img2 = document.getElementById("gatosAleatorios1")
const img3 = document.getElementById("gatosAleatorios2")


img.src = data[0].url
img2.src = data[1].url
img3.src = data[2].url

page = page + 1

}

async function loadFavoriteMichis() {
let res = await fetch(API_URL_FAVOTITES, {
headers: {
鈥楥ontent-Type鈥: 鈥榓pplication/json鈥,
鈥榵-api-key鈥: 鈥榣ive_WkVpnsibKmaXplhj8nhpCvosA2a7UuAQ3HV6Z39O2rZcWrIMEXsMqZGnzXX3vNeX鈥
}
})
let data = await res.json()
console.log(data)
}

//ERROR DE LA ULTIMA CLASE, POR AHORA PARECE QUE EL ERROR SE ENCUENTRA EN NO TENER BIEN LA URL.
async function saveFavoriteCat() {

    const res = await fetch(API_URL_FAVOTITES, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json', 
            'x-api-key': 'live_WkVpnsibKmaXplhj8nhpCvosA2a7UuAQ3HV6Z39O2rZcWrIMEXsMqZGnzXX3vNeX'
        },
        body: JSON.stringify({
            image_id: '199',
        })
    })

    loadFavoriteMichis()

    if(res.status !== 200) {
        spanError.innerHTML = "Hubo un error " + res.status
    }



console.log('favorite cats')


console.log(res)

}

reload()