Skip to content

Latest commit

 

History

History
49 lines (38 loc) · 2.6 KB

README.md

File metadata and controls

49 lines (38 loc) · 2.6 KB

Asincronismo y pedidos HTTP - Buscador gatites

Consignas

1. Tabs

Hacer funcionar las tabs, para eso, al hacer click en una tab, debería:

  • sacarle la clase a is-active a todos los li de las tabs
  • agregarsela al li del tab que fue clickead (TIP: usar parentElement para acceder al li)
  • agregar la clase is-hidden a todos los elementos con clase tab-section
  • sacarle la clase is-hidden al elemento cuyo id corresponda con la propiedad href del elemento clickeado

2. Sección Random

Hacer funcionar la sección Random, para eso:

  • al cargar la página y al hacer click en el botón, debería cargar una nueva imagen de un gato
  • usar el siguiente endpoint: https://api.thecatapi.com/v1/images/search/
  • EXTRA: agregarle al botón la clase is-loading antes de hacer el pedido y sacársela cuando se obtiene la respuesta

3. Sección Búsqueda de razas

Hacer la sección Búsqueda de razas, para eso:

  • al hacer click en el botón de búsqueda, obtener el value del input de búsqueda
  • con ese dato, hacer una consulta a https://api.thecatapi.com/v1/breeds/search?q=busqueda, reemplazando busqueda por el value del input
  • con la respuesta, actualizar la tabla para mostrar los nombres de las razas
  • EXTRA: agregarle al botón y al input la clase is-loading antes de hacer el pedido y sacársela cuando se obtiene la respuesta
  • EXTRA: hacer que funcione cuando se da enter al escribir la búsqueda

4. Sección Razas

Hacer funcionar la sección Razas, para eso

  • al cargar la página, cargar la lista de razas con el endpoint: https://api.thecatapi.com/v1/breeds
  • actualizar el select con los nombres de las razas, el option debería tener como value el id de la raza, por ejemplo
    <option value="beng">Bengal</option>
  • Agregarle al primer option el atributo selected
  • cuando se selecciona una raza, actualizar la información con imagen, descripción y temperamento
  • para reaccionar a la selección de una opción en un select, tenemos el evento change. El value de un select es el value del option seleccionado
  • para actualizar la info de una raza, usar el endpoint: https://api.thecatapi.com/v1/breeds/:id, donde :id es el id del value del select, por ejemplo https://api.thecatapi.com/v1/breeds/beng
  • la imagen la obtenemos de https://api.thecatapi.com/v1/images/search?breed_ids=raza_id, donde raza_id es el id de la raza
  • al cargar la página, actualizar la info de la raza con la primera raza de la consulta

Si necesitan modificar el HTML pueden hacerlo