Consume tu primera API REST

Curso de API REST con Javascript: Fundamentos

Conceptos fundamentales

¿Qué es una API REST?

Flujo de comunicación entre usuarios, frontend y backend

Primeros pasos con fetch

Consume tu primera API REST

Endpoints y query parameters

¿Qué son los HTTP Status Codes?

¿Qué es una API KEY?

Proyecto

Maquetación del proyecto

¿Qué son los Métodos HTTP?

GET: leyendo michis favoritos

POST: guardando michis favoritos

Consultas a la API para escribir HTML dinámico

DELETE: borrando michis favoritos

Headers en peticiones HTTP

¿Qué son los Headers HTTP?

Header de autorización

Header de Content-Type

FormData: publicando imágenes de michis

Bonus

Axios: librerías de JavaScript para consumir APIs

CORS, caché, redirect y tu propio clon de fetch

GraphQL, Web Sockets y Web 3.0: el mundo más allá de REST

Próximos pasos

Toma el Curso Práctico de Consumo de API REST con JavaScript

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 223

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Laura Roa

hace 2 años

😄 Holaa! Esta es mi solución! Gracias a todos porque gracias a sus aportes resolví el reto!!

const URL = 'https://api.thecatapi.com/v1/images/search';


async function myCat () {
    const res = await fetch(URL);
    const data = await res.json();
    const img = document.querySelector('img');
    img.src = data[0].url;
}

const myButton = document.querySelector("button");
myButton.onclick = myCat;

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Square+Peg&display=swap" rel="stylesheet">
    <title>Random Cats with API REST</title>
</head>
<body>
    <header>
        <h1>Random Cats</h1>
    </header>
    <section class="container">
        <img alt="Cat random Picture" class="image">
        <button type="button" class="random-cat-button"> Show me a cat!</button>
    </section>
    <script src="./main.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
html {
    font-size: 62.5%;
}
body {
    font-family: 'Square Peg', cursive;
}
header {
    display: flex;
    justify-content: center;
}
h1 {
    font-size: 8rem;   
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    padding: 20px;
}
.container .image {
    border-radius: 20px;
    margin: 20px;
    width: auto;
    height: 500px;
}
.random-cat-button {
    align-items: center;
    background-color: rgb(228, 164, 94);
    border: 5px solid rgb(249, 151, 66);
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    padding: 12px;
    width: 200px;
    height: auto;
}
.random-cat-button:hover {
    border: 5px solid rgb(228, 164, 94);
    background-color: rgb(227, 141, 67);
}

Carlos Alberto Meneses

hace 2 años

Listo los primeros retos!
Y como soy team dogs voy a completar este curso con esa APi

Fabricio González Guasque

hace 2 años

Mi aporte al reto:

archivo .js : Le agregue que al cargar el DOM se ejecute la función, así ya nos muestra una imagen. Luego la función async, y luego obtengo en la constante reload el boton.
archivo .html : Con una flecha les indico que coloqué como id al boton “reload” que es lo que llamo en el archivo js
navegador : Hice un CSS muy básico para poner todo centrado y un poco de color al botón, quedando así en el navegador.

Luis Tapiero

hace 2 años

https://pokemon-fetch-lt.netlify.app/

Captura de pantalla 2022-09-05 110215.png

Juan Camilo Noreña López

hace 2 años

En vez de usar un botón para recargar la pagina use un input
con estos atributos

<input type="button" value="Recargar" onclick="location.reload()">

y el js queda así

async function getURL () {
    const response = await fetch(URL);
    const data = await response.json();
    const img = document.querySelector('img');
    img.src = data[0].url;
}

getURL();

Alejandro Forero Vanegas

hace 2 años

No es mucho pero es trabajo honesto.

Edmir Galván Vázquez

hace 2 años

Aqui esta mi solucion al reto:D

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <title>Gatitos random</title>
</head>

<body>
    <main>
        <h1 class="title">Gatitos random</h1>
        <img class="img" alt="Foto de un gatito">
        <button class="button" id="anotherImg">Muestrame otra imagen</button>

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

</html>

const URL = 'https://api.thecatapi.com/v1/images/search';
const button = document.getElementById('anotherImg');
const img = document.querySelector('img');

async function getCat() {
   const response = await fetch(URL);
   const data = await response.json();
   img.src = data[0].url;
}

button.onclick = getCat;

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Lato', sans-serif;
}

main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   padding: 20px 0;
}

.img {
   width: 70%;
   height: 500px;
   object-fit: cover;
   border-radius: 10px;
   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.4);
}

.button {
   padding: 10px 15px;
   border: none;
   border-radius: 5px;
   background-color: #f8cb2e;
   font-size: 17px;
   box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.3s;
}

.button:hover {
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

Daniel Gonzalez Herrera

hace 2 años

Hasta ahorita así va el mío! 😃
.

.
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Perritos aleatorios</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Perritos aleatorios</h1>
    <section class="card">
      <p class="card__title" id="title"></p>
      <img class="card__img" alt="Foto perrito aleatorio" />
      <div class="card__info">
        <p id="weight"></p>
        <p id="height"></p>
        <p id="lifeSpan"></p>
      </div>
    </section>
    <button id="button">¡Ver otro perro!</button>
    <script src="./main.js"></script>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  background-color: #13262f;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  margin: 20px 0;
  color: #DB3A34;
  font-weight: 800;
  text-transform: uppercase;
}

.card {
  width: 550px;
  margin: 0 auto;
  background-color: #f2f2f2;
  box-shadow: 0 40px 60px -6px black;
  border-radius: 10px;
}

.card__title {
  font-size: 28px;
  background-color: #DB3A34;
  color: #fff;
  height: 60px;
  line-height: 60px;
  letter-spacing: 3px;
  border-radius: 10px 10px 0 0;
}

.card__img {
 width: 100%;
}

.card__info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 120px;
}

button {
  margin-top: 30px;
  width: 275px;
  height: 50px;
  border-radius: 20px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: #DB3A34;
  opacity: 0.6;
  color: #fff;
  transition: 0.5s;
}

button:hover {
  opacity: 1;
}

const URL = "https://api.thedogapi.com/v1/images/search";
const img = document.querySelector("img");
const title = document.getElementById("title");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const lifeSpan = document.getElementById("lifeSpan");
const button = document.getElementById("button");

// Con promesas
function getDogs() {
  fetch(URL)
    .then((res) => res.json())
    .then((data) => {
      img.src = data[0].url;
      if (data[0].breeds[0]) {
        title.innerText = data[0].breeds[0].name;
        weight.innerText = "Peso: " + data[0].breeds[0].weight.metric + " kg";
        height.innerText = "Altura: " + data[0].breeds[0].height.metric + " cm";
        lifeSpan.innerText =
          "Esperanza de vida: " + data[0].breeds[0].life_span;
      } else {
        title.innerText = "Sin información";
        weight.innerText = "Peso: Sin información";
        height.innerText = "Altura: Sin información";
        lifeSpan.innerText = "Esperanza de vida: Sin información";
      }
    });
}

// Con async/await
async function getDogs2() {
  const res = await fetch(URL);
  const data = await res.json();
  img.src = data[0].url;
  if (data[0].breeds[0]) {
    title.innerText = data[0].breeds[0].name;
    weight.innerText = "Peso: " + data[0].breeds[0].weight.metric + " kg";
    height.innerText = "Altura: " + data[0].breeds[0].height.metric + " cm";
    lifeSpan.innerText = "Esperanza de vida: " + data[0].breeds[0].life_span;
  } else {
    title.innerText = "Sin información";
    weight.innerText = "Peso: Sin información";
    height.innerText = "Altura: Sin información";
    lifeSpan.innerText = "Esperanza de vida: Sin información";
  }
}

button.onclick = getDogs2;

getDogs2();

Vsqz Gabriel

hace 2 años

proyecto creado con vite con plantilla de typescript:

https://vitejs.dev/

Juan Sebastian Espínola

hace 2 años

A mi me gustan más los patitos así que elegí una API de patitos
Dejo la URL aquí por si quieren usarla (cors)
.
HTML

JavaScript

Laura Daniela Aponte Beltrán

hace un año

Para aquellos que se el olvidaron cositas de asincronismo, les dejo mi infografía con lo más importante de cada función asíncrona ✨

Gonzalo Caminos

hace 2 años

Deberían dar un curso sobre como trabajar con APIS y OAUTH… me lo has sacado de la punta de la lengua al tema porque justamente venía pensando que acceder a APIS publicas que no tienen validación es algo relativamente sencillo.

No obstante el mercado y los pedidos que hacen los clientes de determinadas implementaciones hay que usar OAUTH… ojala ese curso llegue pronto!

Saludos.

Carlos López

hace 2 años

no es mucho pero es trabajo Honesto

Leal Brigitte

hace 2 años

Reto cumplido. Creé un boton en HTML con atributo “onclick” para usarlo en JavaScript
HTML

JS

Navegador

Gonzalo Espindola

hace 2 años

Si a alguno le sirve, una api de dragon ball con bastantes personajes para practicar API

Maria Camila Amaya Rubio

hace un año

Estiven Ruiz Arenas

hace 2 años

Así me quedo el reto

Codigo:

console.log('hola')
const URL ='https://api.thecatapi.com/v1/images/search';

const refresh = async() =>{
    const response = await fetch(URL);
    const data = await response.json();
    const img = document.getElementById('bannerImage');
    img.src = data[0].url;
}
const input = document.getElementById('buttoRefresh');
input.onclick = refresh;
refresh()

Isaí Ramírez

hace 2 años

HTML

Js

Emerson David Cabrera Salas

hace 2 años

Soy super fan de los perritos, solucioné mi reto y aroveché para practicar un poco lo que voy aprendiendo de CSS con Tailwind.
Así me quedó:

Por acá el código:
HTML:

Javascript

Nicolás edixon García Piñeros

hace 2 años

Fabio Erik Sosa Morinigo

hace 2 años

Challenge solved => {

async function catRandom() {
	const response = await fetch(API);
	const data = await response.json();
	const img = 
	`
		<img src=${data[0].url} alt=${data[0].id} />
	`
	container.innerHTML = img;
}

try{
	catRandom();
} catch(error) {
	console.log('Hubo un error: ' + error)
}

btn.addEventListener('click', catRandom)

}

Oscar Daniel Bernal Guzman

hace 2 años

Mi aporte sin diseño ni nada y las cicatrices del aprendizaje 😅

Antonio Rafael González Ferrer

hace 2 años

Listo mi reto:

const URL = 'https://api.thedogapi.com/v1/images/search'

const dogButton = document.querySelector('#dogButton')

async function getPicture() {
    let res = await fetch(URL)
    let dog = await res.json()

    const img = document.querySelector('img')
    img.src = dog[0].url
}

dogButton.addEventListener('click', getPicture)

getPicture()

Francisco Quintui

hace 2 años

Sergio Noriega

hace 6 meses

```js const URL = 'https://api.thecatapi.com/v1/images/search'; const button = document.querySelector('#boton'); button.addEventListener('click', async () => { try{ const img = document.getElementsByTagName('img') const response = await fetch(URL); const data = await response.json(); const promise = new Promise((resolve,reject)=>{ resolve(data); }) const result = await promise; img[0].src = result[0].url }catch(error){ console.error(error) } }) ``` ```html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>

Gatitos aleatorios

<button id="boton"> Show me a cat baby</button> <script src="./index.js"></script> </body> </html> ```un programa sencillo pero junte las dos con promesas y async, estoy mejorando en el pensamiento logico de la concurrencia, pero estoy abierto a algunas recomendaciones, para que el codigo sea mas limpio

Daniel Steven Arias Otalora

hace un año

Esta es mi solucion.

main.js

const API='https://dog.ceo/api/breeds/image/random'

async function fetch_dog(url){
    const respose = await fetch(url, { method: "Get" })
    let data=await respose.json()
    data=data.message
    return data
}


/*fetch(API,{method: 'Get'})
.then(res=> res.json())
.then(data =>{
    const img=document.querySelector('img')
    img.src= data.message
})*/

(async()=>{
    try{
        const img=document.querySelector('img')
        console.log(await fetch_dog(API))
        img.src= await fetch_dog(API)
    }catch(error){
        console.log(error)
    }
})()

const btn=document.querySelector('#but')

btn.addEventListener('click',async()=>{const img=document.querySelector('img')
const a=await fetch_dog(API)
console.log(a)
img.src=a})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Dogs</title>
</head>

<body>
    <main class="main">
        <h1>Dogs API</h1>
        <figure class="fig_1">
            <img alt="Personaje">
        </figure>
        <button id="but"> Click to Dog</button>
        <script src="./main.js"></script>
    </main>
</body>

</html>

style.css

img{
    width: 300px;
    height: 300px;
}
.main{
    margin: 0 ;
    padding: 0 ;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#but{
    background-color: aquamarine;
    padding: 5px;
    font-size: 20px;
}

Manuel Cabos

hace un año

👉 codepen.io/cabosmanuel

Codigo con async/await github.com/CabosManuel/js-api-rest
API waifu.pics/docs

Carlos Contreras

hace un año

Yo utilicé un event Listener para que se cambiara la imagen al ser clickeada

const URL = 'https://api.thecatapi.com/v1/images/search';
const imgContainer = document.querySelector("#random-cat");
fetch(URL)
    .then(response => response.json())
    .then(data =>{
        imgContainer.src = data[0].url;
    });

imgContainer.addEventListener('click',e=>{
    fetch(URL)
    .then(response => response.json())
    .then(data =>{
        e.target.src = data[0].url;
    });
})

Nicolás Felipe Pinto Vega

hace un año

Aqui esta mi solución al reto:

El HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gatitos Aleatorios</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
        <div class="card-container">
            <h1>Gatitos Aleatorios</h1>
            <div class="img-container">
                <img  alt="Foto de Gatito Aleatorio">
            </div>
            <button type="button">New Cat</button>
        </div>
    </main>
    <script src="./main.js"></script>
</body>
</html>

El CSS:

/* Estilos generales */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}

/* Estilo de la seccion principal */
main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: #fafafa;
}

.card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 500px;
    height: 550px;
    padding: 30px;
    background-color: #e8eaee;
    border-radius: 10px;
    box-shadow: 2px 4px 8px rgba(89, 73, 30, 0.16);
}

.card-container h1{
    padding-bottom: 30px;
    font-size: 3rem;
    text-align: center;
    color: #056;
}

.card-container .img-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.img-container img{
    width: 75%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.card-container button{
    width: 60%;
    height: 45px;
    margin-top: 30px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    background-color: #056;
    color: #fafafa;
    border: none;
    border-radius: 5px;
    box-shadow: 2px 4px 6px rgba(89, 73, 30, 0.16);
}

.card-container button:hover{
    box-shadow: 0px 0px 4px 1px rgba(89, 73, 30, 0.65);
}

el JavcaScript:

const URL = 'https://api.thecatapi.com/v1/images/search';

const catImg = document.querySelector('img');
const catButton = document.querySelector('button');
catButton.addEventListener('click', newCat);

async function newCat(){
    const res = await fetch(URL);
    const data = await res.json();

    catImg.src = data[0].url;
}

//con esta parte se muestra una imagen cuando se carga la página
fetch(URL)
    .then(res => res.json())
    .then(data => {
        const img = document.querySelector('img');
        img.src = data[0].url;
    });

Frandel Corporan Rodríguez

hace un año

<h5>Simple pero funcional</h5>

const url = 'https://dog.ceo/api/breeds/image/random';

const h1 = document.querySelector("h1");
const img = document.querySelector("img");
const btn = document.querySelector("button");

async function newDog(){
   return await fetch(url)
.then(res => res.json())
.then(data => {
img.src = data.message;
h1.textContent = data.status;
});
}
window.addEventListener("load",newDog)
btn.addEventListener("click", newDog);

Kevyn Salvador Posadas Tote

hace un año

Hola a tod@s! Esta es mi solución, estoy utilizando la API de Rick y Morty.

Les dejo por acá el enlace a mi github page
https://ptote.github.io/characters-rick-morty/

Y el enlace a mi repositorio, por si alguien quiere ver el código utilizado.
https://github.com/PTote/characters-rick-morty

const img = document.getElementById("imagen");
const spanName = document.getElementById("nameImg");
const API = "https://rickandmortyapi.com/api/character";

const getRandomValue = () => {
  return Math.floor(Math.random() * 20) + 1;
};

let value = getRandomValue();

const changeValue = () => {
  value = getRandomValue();
  getData(API, value);
};

const fetchData = async (urlAPI) => {
  const response = await fetch(urlAPI);
  return await response.json();
};

const getData = async (urlAPI, value) => {
  try {
    const {image, name} = await fetchData(`${urlAPI}/${value}`);
    
    img?.setAttribute('src', image );

    if(spanName){
      spanName.innerHTML = `Nombre de personaje: ${name}`;
    }

  } catch (error) {
    console.log(error);
  }
};

getData(API, value);

Raymondi Alejandro Ramos Vásquez

hace un año

Me tomo tiempo, pero lo hice, voy a mejorar los estilos otro día 😛
Repositorio

Captura de pantalla 2023-06-16 154142.png

Kevin Pizarro

hace un año

Caramba… vine muy antes al curso de consumir API! Quede muy enredado. Volvere cuando haya cursado los cursos anteriores y pondre mis avances en este mismo comentario!

iGera97

hace un año

Aqui mi aporte:

HTML Y CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gatitos</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }

        html {
            font-size: 62.5%;
        }
        .container {
            display: flex;
            align-items: center;
            align-content: center;
            flex-direction: column;
        }

        h1 {
            font-weight: bold;
        }

        button {
            padding: 10px;
            border: solid 5px blue;
            background-color: aquamarine;
            margin: 10px;
            border-radius: 15px;

        }

        button:hover {
            border: 5px solid rgb(228, 164, 94);
            background-color: rgb(227, 141, 67);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Gatitos aleatorios</h1>
    
        <img alt="Gato aleatorio">

        <div>
            <button type="button">presioname, po favo</button>
        </div>
    
        <script src="./main.js"></script>
    </div>
</body>
</html>

console.log("Hello word");

const URL= "https://api.thecatapi.com/v1/images/search"

/*fetch(URL)
    .then(res => res.json())
    .then(data => {
        const img = document.querySelector("img");
        img.src = data[0].url;
    })
*/

document.addEventListener("DOMContentLoaded",myCat)
async function myCat(){
    const res  = await fetch(URL);
    const data = await res.json();
    const img =  document.querySelector("img");
    img.src = data[0].url;
}

const myButton = document.querySelector("button");
myButton.onclick = myCat;

LUIS MIGUEL OLARTE BELLO

hace un año

Comparto mi solución al reto usando async/await.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <title>Random Cats</title>
</head>
<body>
  <div class='container'>
    <h1>Random Cats</h1>
    <img alt="Random cat photos">
    <button>Reload Cats</button>
    <script src="./index.js"></script>
  </div>
</body>
</html>

Código javascript

const URL = 'https://api.thecatapi.com/v1/images/search';
const button = document.querySelector('button');
const img = document.querySelector('img');

const recargar = async (urlApi)=>{
  try{
    const response = await fetch(urlApi);
    const data = await response.json();
    img.src = data[0].url;
    
  }catch(error){
    console.log(error);
  }
  
};

document.addEventListener('DOMContentLoaded', recargar(URL));
button.addEventListener('click', ()=>{
  recargar(URL)
});

LUIS MIGUEL OLARTE BELLO

hace un año

Les comparto un aporte sobre async/await que nos puede ayudar a comprender un poquito mas

La palabra clave async: Debes colocar la palabra clave async antes de la declaración de una función para indicar que la función contiene código asincrónico y que devolverá una promesa.
La palabra clave await: Dentro de una función async, puedes usar la palabra clave await antes de una expresión que devuelve una promesa. El operador await pausa la ejecución de la función hasta que la promesa se resuelva o se rechace. Mientras tanto, el control se devuelve a la llamada de la función, lo que permite que otras tareas se ejecuten en paralelo.
Promesas: Las expresiones que se pueden usar con await son objetos que implementan la interfaz de promesa. Esto incluye las promesas nativas de JavaScript, así como las promesas devueltas por funciones asíncronas o métodos de API.
Bloqueo no bloqueante: Cuando se encuentra la expresión await, el hilo de ejecución no se bloquea, sino que se mueve a ejecutar otras tareas disponibles en ese momento. Una vez que la promesa se resuelve, la ejecución se reanuda en la línea siguiente y el resultado de la promesa se asigna a la variable o se usa según sea necesario.
Manejo de errores: Puedes usar el bloque try/catch para manejar errores en código async/await. Si una promesa se rechaza mientras está siendo esperada con await, se lanzará una excepción y puedes capturarla con un bloque catch para manejar el error de forma adecuada.

CRISTIAN DARIO AGUDELO PORRAS

hace un año

Mi proyecto para simular que abres un sobre de cartas y vas armando tu baraja con tus favoritas.

nota: el diseño no es mi fuerte!!

Victor Manuel Arroyave Castañeda

hace un año

Captura de pantalla 2023-05-15 200646.png

const API = 'https://api.catboys.com/img';

const buttonActive = document.getElementById('myButton');
buttonActive.addEventListener('click', fetchData);

async function fetchData() {
    try {
        const response = await fetch(API);
        const data = await response.json();
        
        const img = document.querySelector('img');
        img.src = data.url;
    } catch (error) {
        console.log(error);
    }
}

JOSE FABIAN BONILLA GUZMAN

hace un año

les compartio mi forma de manejarlo repositorio online en vez de un boton lo hice dando click en cualquier parte de la card

Ricardo Alfonso Chavez Vilcapoma

hace un año

RETO CUMPLIDO:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>GATOS ALEATORIOS</title>
</head>
<body>
    <main>
        <div class="container-main">
            <h1>GATO MIAU MIAU</h1>
            <img alt="cat-img">
            <button>NEW CAT</button>
            <script src="./main.js"></script>
        </div>
    </main>
</body>
</html>

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    background-image: url(https://e0.pxfuel.com/wallpapers/69/418/desktop-wallpaper-pin-de-trischell-magbuhat-en-cat-phone-fondos-de-gato-empapelado-de-gato-fondo-de-pantalla-de-dibujos-animados-cat-cartoon.jpg);
    background-repeat: repeat;
}
main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container-main{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid black;
    border-radius: 20px;
    background-color: whitesmoke;
}
.container-main h1{
    width:500px;
    font-size: 3rem;
    text-align: center;
}
.container-main img{
    width:500px;
}
.container-main button{
    margin: 16px 0;
    border: none;
    background-color: aquamarine;
    padding: 16px;
    font-weight: bold;
    font-size: 2rem;
    border-radius: 50px;
}

const URL = "https://api.thecatapi.com/v1/images/search";

async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    const img = document.querySelector("img");
    img.src = data[0].url;
}

fetchData(URL);

const button = document.querySelector("button");
button.addEventListener("click",()=>{
    fetchData(URL);
});

Donovan RM

hace un año

Hicimos lo posible:

const URL = 'https://api.thecatapi.com/v1/images/search';
const button = document.querySelector('#reloadButton');

//cambiar por un boton para recargar y usar async y await

async function callURL() {
    try {
        const response = await fetch(URL);
        const data = await response.json();
        const img = document.querySelector('img');
        img.src = data[0].url;
    } catch (error) {
        console.log('Ocurrió un error: ', error); 
    }
  }
callURL();
  
button.addEventListener('click', async () => {
    try{
        const response = await fetch(URL);
        const data = await response.json();
        const img = document.querySelector('img');
        img.src = data[0].url;
    }catch(error){
        console.log('Ocurrió un error: ', error);
    }
});

Juan Omar Palma álvarez

hace un año

![]()

Armando Martínez

hace un año

Este es el diseño que hice, se acepta feedback 🐈🐈🐈.

Estructura HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gatitos aleatorios</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>

    <main>
        <section>
           <h1>Gatitos aleatorios</h1>
           <img alt="Foto de gatito">
           <button  class="btn-brand" role="button" >Giveme a cat!</button>
           <a href="https://getcssscan.com/css-buttons-examples" target="_blank">Credits #55</a>
        </section>    
    </main>
    
    <script src="main.js"></script>
</body>
</html>

CSS:

* {
    font-family: 'Open Sans', sans-serif;
}
main {
    display: flex;
    justify-content: center;
    align-items: center;
}

section {
    background: #FCD3DE;
    height: 500px;
    width: 500px;
    border-radius: 20px;
    border-style: dashed;
    border-width: 2px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

section img {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    object-fit: cover;
}

section h1 {
    color: black;
    text-align: center;
    text-shadow: 1px 2px 4px #9883E5;
    font-size: 2rem;
}

section button {
    margin-top: 20px;
}

section a {
    margin-top: 15px;
    margin-bottom: 15px;
}

.btn-brand {
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-brand:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.btn-brand:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

Javascript:

const URL = 'https://api.thecatapi.com/v1/images/search';

const getRandomCat = async function () {
     let result = await fetch(URL);
     console.debug(result)
     let data = await result.json();
     const img = document.querySelector('img');
     img.src = data[0].url;
} 

getRandomCat();

const button = document.querySelector('button');

button.addEventListener('click', getRandomCat);

Llamo a la función para que cargue una imagen al iniciar.

El resultado:

Alejandro Ivan Mendieta

hace un año

Ready

Código:

const API = 'https://api.thecatapi.com/v1/images/search';
const btnCat = document.querySelector('.btnCat');

function catGenerate(jsonData){
  const img = document.querySelector('.imgCat');
  img.src = jsonData[0].url;
}

async function fetchCats(){
    const data = await fetch(API);
    const jsonData = await data.json();
    catGenerate(jsonData);
}

fetchCats();

btnCat.addEventListener('click',fetchCats);

Roger Natividad Pantoja

hace un año

Lo hice en mi forma mar rapido.

😌😉

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gatitos aleatorios</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <section>
    <div>
      <img src="" alt="" id="image">
    </div>
    <button type="button" id="btn">Refrescar</button>
  </section>

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

style.css

*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: papayawhip;
  display: grid;
  place-items: center;
}

section {
  width: 400px;
  height: 350px;
  background-color: limegreen;
  padding: 10px;
  border-radius: 10px;
}

section > div {
  width: 100%;
  height: 290px;
}

section > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section > button {
  width: 100%;
  display: block;
  padding: 10px;
  border: none;
  background-color: salmon;
  cursor: pointer;
  margin-top: 5px;
}

main.js

const button = document.querySelector("#btn");
const imagen = document.querySelector("#image")
const URL_API = "https://api.thecatapi.com/v1/images/search";


button.addEventListener('click', mostrarImagen)

async function mostrarImagen() {
  try {
    const response = await fetch(URL_API);
    const data = await response.json();
    console.log(data);
    imagen.setAttribute('src', data[0].url);
  }catch(err){
    console.log(err)
  }
}

window.addEventListener('DOMContentLoaded', mostrarImagen)

Camilo Andrés Granda Cortés

hace un año

Héctor Galindo

hace un año

const URL = "https://api.thecatapi.com/v1/images/search";
const btn = document.querySelector('button')

btn.addEventListener('click', getCat)
document.addEventListener('DOMContentLoaded', getCat)


async function getCat() {
    try {
        const catsData = await fetch(URL)
        const cats = await catsData.json()
        const img = document.querySelector('img');
        img.src = cats[0].url;

        
    } catch (err) {
        console.error(err)
    }
}

Ivan Cio Toral

hace un año

reto:

Sergio Alejandro González Sánchez

hace un año

Francisco Arturo Leon Velasco

hace un año

Asi fue como hice el reto:

const urlApi = 'https://api.thecatapi.com/v1/images/search';
const btnRefresh = document.getElementById('btn-refresh');
const img_cat_random = document.getElementById('img-cat-random');

const fetchData = async (urlApi) => {
    const response = await fetch(urlApi);
    const data = await response.json();
    return data;
}

const imgRandomCat = async () => {
    try {
        const imgRandom = await fetchData(urlApi);
        img_cat_random.src = imgRandom[0].url;
    } catch (error) {
        console.log(error);
    }
}

btnRefresh.onclick = imgRandomCat;

Alex Chipre

hace 2 años

Mi aporte

Manuel Andres García Vera

hace 2 años

aquí les dejo mi solución no hice énfasis en el CSS porque me dio pereza jajaja pero se cumplió con el reto, tomando en cuenta la forma en como se enseño en el curso de asincronismo

html básico

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Doggies</title>
</head>
<body>
    <h1>do you want to see cute Doggies?</h1>
    <img width ="600" height="600" alt="Random Kitties">
    <script src="./main.js" ></script>

    <button onclick="genImg(api)"> show me more!</button>
</body>
</html>

const api = 'https://api.thedogapi.com/v1';

const imgDoggies = document.querySelector('img');
const button = document.querySelector('button')

async function fetchData(urlApi){
    const response = await fetch(urlApi);
    const data = await response.json();
    return data;
}

const genImg = async (urlApi) => {
    try {
        const imgs = await fetchData(`${urlApi}/images/search`);
        let img = imgs[0].url
        console.log(imgs);
        console.log(img);
        imgDoggies.src = img
    } catch (error) {
        console.log(error);
    }
}

genImg(api);

Franco Moreira

hace 2 años

Aqui les dejo como hice el reto, en codepen pueden ver las lineas de código y modificarlo si quieren
https://codepen.io/francomoreira/pen/OJoLYYv

Misael Mondragón Lenis

hace 2 años

https://animechan.vercel.app/api/random
https://api.jikan.moe/v4/characters

Josue Quevedo Portas

hace 2 años

Mi aporte!!!
.
En mi caso, la API que use es la de platzi, y esta no tiene un generador de imágenes random, por lo que si quería que cada vez que presionara el botón me apareciera una imagen diferente, opte por colocar un contador en el JS que comienza en 0 y cada vez que presiono el botón éste va aumentando en 1, así puedo ir recorriendo el objeto que me devuelve la API.
.
Por si les interesa usar la API que tiene platzi para practicar la encuentran en: API PLATZI
.
.

.
.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./normalize.css">
  <link rel="stylesheet" href="main.css">
  <title>Shopall</title>
</head>
<body>
  <section class="container">
    <h1 class="title">Tienda en linea</h1>
    <button class="btn" id="btn-img">New Product</button>
    <img class="generalimg" alt="Product">
  </section>

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

CSS

:root {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #3c1554;
}

.container {
  width: 60vh;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  color: #e7e7e7;
  font-size: 5rem;
}

.generalimg {
  border-radius: 3rem;
}

#btn-img {
  display: flex;
  margin: 2rem;
  padding: 0 1rem;
  width: 10rem;
  height: 3rem;
  line-height: 3rem;
  border: none;
  border-radius: .4rem;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  background-color: #4c3971;
  cursor: pointer;
}

#btn-img:hover {
  background-color: #674c9b;
}

.generalimg {
  border-radius: 3rem;
  box-shadow: 14px 14px 36px -7px #000000bf;
}

JAVASCRIPT

const API = 'https://api.escuelajs.co/api/v1/products';
const img = document.querySelector('img');

const btnImg = document.querySelector('#btn-img');
btnImg.onclick = nextImg;

count = 0;

async function nextImg() {
  const product = await fetch(API);
  const data = await product.json();

  img.src = data[count].images;
  count++;
}

Sergio Javier Lopez Olivera

hace 2 años

Solución del reto!
.
.

.
Gracias a Fabricio González Guasque por su idea de cargar una imagen apenas se cargue la página

Erick Salas

hace 2 años

Mi aporte

const url = 'https://api.thecatapi.com/v1/images/search';
/* fetch(url)
    .then(response => response.json())
    .then( data => {
            const img = document.querySelector('img');
            img.src = data[0].url;
            
          }) */

async function getCat() {
    const response = await fetch(url);
    const data = await response.json();

    try{
        const img = document.querySelector('img');
                img.src = data[0].url;
    }
    catch(error){
        console.log(error);
    }
}

getCat();

const button = document.getElementById('button');

button.addEventListener('click', () =>{
    getCat();
})

Sebastián Fernández

hace 2 años

Aporte

Captura de pantalla 2022-12-26 153119.png

Edgar Osorio

hace 2 años

const API = 'https://api.thecatapi.com/v1/images/search'

const fetchApi = async (urlApi) => {
    const response = await fetch(urlApi)
    const data = await response.json()
    return data
}

(async () => {
    try {
        const michi = await fetchApi(API)
        const img = document.querySelector('img')
        img.src = michi[0].url
    } catch (error) {
        console.log(error)
    }
})()

const reload = document.querySelector('#reload')
reload.addEventListener('click', () => location.reload())

Yuliam Rivera González

hace 2 años

Mi solución al reto.

//variables

const Url = 'https://api.thecatapi.com/v1/images/search'

//App

const button = document.querySelector("#button")

const fetchData = async (url) => {
  try {
    const res = await fetch(url)
    const data = await res.json()
    const img = document.querySelector("#img")
    img.src = data[0].url
  } catch (error) {
    console.log(error)
  }
}

window.addEventListener("load", fetchData(Url))

button.addEventListener('click', () => {
  fetchData(Url)
})

Juan David Moreno Rodriguez

hace 2 años

excelente clase juan 👾

Alessandra Amicarella

hace 2 años

José Luis Encastin Flores

hace 2 años

https://thecatapi.com/

Lisbeth Quintero

hace 2 años

Mi solución al reto:

const API = "https://api.thecatapi.com/v1/images/search"

async function fetchData(urlApi) {
    const response = await fetch(urlApi);
    const data = await response.json();
    return data
}

(async () => {
    try {
        const image = await fetchData(API)
        console.log(image, 'image dentro del async')
        const img = document.querySelector('img')
        img.src = image[0].url
        const button = document.querySelector('button')
        button.addEventListener('click', _ => {
            location.reload();
})
    }
    catch(error){
    console.error(error)
    }
})();

CSS (Sé que es un asco el estilo, pero fue algo rápido)

body{
    display: grid;
}

h1{
    margin: 0 auto;
    padding: 20px;
    color: darkslateblue;
}
img {
    padding: 20px;
    width: 400px;
    height: auto;
    margin: 0 auto;
    border-radius: 16%;
}
button {
    margin: 0 auto;
    background-color: transparent;
    border-radius: 6px;
    padding: 6px;
    color:coral;
    font-weight: bold;
    border-color:bisque;
}

button:hover{
    cursor: pointer;
}

Paul Francis

hace 2 años

Reto

JavaScript

<code> 
// boton del programa
const button = document.getElementById('buttonPet');

// Url API
const urlAPI = ' https://api.thedogapi.com/v1/images/search';

async function newDog() {
    const respuesta	 = await fetch(urlAPI)
    const data = await respuesta.json()
    const img = document.querySelector('img');
    img.src = data[0].url;
}

button.addEventListener('click', newDog)

HTML

<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perritos Aleatorios</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Gatitos aleatorios</h1>

    <section class="container">
        <img class="image" alt="Foto Gatito aleatorio">
        <button type="button" class="random-cat-button" id="buttonPet">Show new pet</button>
    </section>

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

Jahiker Rojas

hace 2 años

Asi quedaria mi solucion al reto

const URL = "https://api.thecatapi.com/v1/images/search";

const btn = document.querySelector(".btn");

const getKitten = async () => {
  await fetch(URL)
    .then((resp) => resp.json())
    .then((data) => {
      const img = document.querySelector("img");
      img.src = data[0].url;
    })
    .catch((err) => {
      throw new Error(err);
    });
};

getKitten();

btn.addEventListener("click", getKitten.bind(this));

Marcelo Daniel Yudis

hace 2 años

Les comparto como integrè el async/await en mi proyecto de gatitos:


async function traerGatitos(apiURL) {
    const respuesta = await fetch(apiURL);
    const data = await respuesta.json();

    return data[0].url;
}

const mostrarGatitos = async(apiURL) => {
    try {
        const gatetes = await traerGatitos(`${apiURL}`);
         
    } catch (error) {

    }
}

Patrick Jhonatan Hernandez Blanco

hace 2 años

Otra solución distinta a la que vi en los comentarios

Yeferson Olarte Roncancio

hace 2 años

Un poco de estilos

Aquí el código, me ayuda bastante su feedback


...

const getPetImage = async (url: string) => {
  const rta = await fetch(url);
  const data: Dog[] = await rta.json();

  return data[0].url;
};

// Events
button.addEventListener("click", async () => {
  const url = await getPetImage(BASE_URL);

  img.src = url;
});

app.append(header, container);

Carlos Daza

hace 2 años

const URL = ‘https://api.thecatapi.com/v1/images/search’;

Pablo .

hace 2 años

Listo xD

Sebastian Collantes

hace 2 años

Confieso que el reto lo hice solamente creando un input dentro de un form en el HTML para que recargara la pagina al darle submit

Sebastián Andrés Sanhueza Tapia

hace 2 años

Holis, este es mi desafío listo

Ezequiel Dastolfo

hace 2 años

Team Dogs!

David Rivera

hace 2 años

Dejo aca mi solucion al reto del Profe Juan DC

const buttonChange = document.querySelector('button');

const URL = 'https://api.thecatapi.com/v1/images/search';

fetch(URL)
  .then(response => response.json())
  .then(data => {
    const img = document.querySelector('img');
    img.src = data[0].url;
  });


buttonChange.addEventListener('click', changeImg);

function changeImg() {
  location.reload();
}

Alba Cristina Cruz Cortés

hace 2 años

Este es el link de mi repositorio https://github.com/cristinacrs/the-dog-api
Yo utilicé TheDogApi 🐶🐕

Carlos Rubio Gallego

hace 2 años

Reto cumplido!
Le agregué un spinner para mostrar la carga.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso de consumo de API</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    
    <article class="container">
        <img id="img-cat" src="" alt="random cats image">
        <div class="container-spinner">
            <div class="container-spinner-mov">

            </div>
            <p>
                loading
            </p>
        </div>
        <div class="container-button">
            <a href="#" id="get-new-cat">Get new Cat</a>
        </div>
    </article>

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: Verdana;
}
body{
    width: 100vw;
    height: 100vh;
    background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(29,159,59,0.9976365546218487) 50%, rgba(255,255,255,1) 100%);
}

.container{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 600px;
}
.container img{
    width: 100%;
    max-width: 400px;

    /* position: relative;
    left: 50%;
    transform: translateX(-50%); */
    
    max-height: 90%;
    border-radius: 10%;
}
.container-button{
    /* width: 100%;
    height: 10%; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.container-button a{
    margin-top: 15px;
    color: #2e9f4c;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    border-radius: 5%;
    padding: 10px;
    filter: drop-shadow(2px  2px 10px #000);
}

.container-spinner{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.container-spinner p{
    position: absolute;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
}

.container-spinner-mov{
    position: absolute;
    width: 100px;
    height: 100px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    border-radius: 100%;
    animation: spinner 1s infinite;
    
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }

Javascript

const API = 'https://api.thecatapi.com/v1/images/search';

const img = document.querySelector('#img-cat');
const button = document.querySelector('#get-new-cat');
const spinner = document.querySelector('.container-spinner');


const getNewCat = async () =>{
    img.style.opacity ='0';
    spinner.style.display ='flex';
    const res = await fetch(API);
    const data = await  res.json();
    img.src = data[0].url;
    img.style.opacity ='1';
    spinner.style.display ='none';
}

try{
    getNewCat()
    button.addEventListener('click',getNewCat)
}catch(err){
    console.log(err)
}

César Augusto Cortés Labrada

hace 2 años

Hola, este es mi aporte al reto.

const button = document.querySelector("div button");
button.addEventListener("click", reloadCatPicture);

const API = "https://api.thecatapi.com/v1/images/search";

async function reloadCatPicture(){

    try{
        const response = await fetch(API);
        let data = await response.json();
        const div = document.querySelector(".show");
        div.innerHTML= `<img src="${data[0].url}" alt="Cat picture">`;
         
    }
    catch(e){
        console.log("Error happened", e);
    }
    

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <script src="./apiRest.js" defer></script>
    <title>Cats</title>
</head>
<body>
    <h1>Ramdon cats</h1>
    <div>
        <button>Show cats</button>
    </div>
    <div class="show">

    </div>
</body>
</html>

CSS

div{
    margin-bottom: 20px;
}
.show img{
    width: 500px;
    height: 500px;
    object-fit: cover;
}

RubenSH

hace 2 años

No fue tan difícil como creí 😄

Captura de pantalla de 2022-09-27 15-19-47.png

Andrés Argote

hace 2 años

Captura de Pantalla 2022-09-20 a las 16.55.46.png

Remix Zapata

hace 2 años

Así me quedó la página de gatitos! (Cualquier parecido con la realidad es pura coincidencia!😅)

Código del botón:

Rubén Ernesto Aragón Gil

hace 2 años

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>Repositorio de:</h1>
    <div>
        <img alt="Fotos de kuisitos">
    </div>
    <div>
        <button id="reload">Nuevo kuisito 🐈</button>
    </div>
    <script src="./main.js"></script>
</body>
</html>

CSS

body {
    padding: 0;
    margin: 0;
}
h1 {
    display: flex;
    justify-content: center;
}
div {
    display:flex;
    justify-content: center;
}
img { 
    width: 400px;
    height: 70vh;
}
button {
    margin:15px;
    display: flex;
    justify-item: center;
}

const URL = 'https://api.thecatapi.com/v1/images/search';
const botonReiniciar = document.getElementById('reload');

fetch(URL)
    .then(res => res.json())
    .then(data => {
        const img = document.querySelector('img');
        img.src = data[0].url;
    });

botonReiniciar.addEventListener('click', reiniciarJuego);

function reiniciarJuego() {
    location.reload()
}

Paula Inés Cudicio

hace 2 años

Aquí va mi aporte!! 🥰

Ivo Piccinini

hace 2 años

https://ivo-piccinini.github.io/Random-Cats/
Reto cumplido!

Juan Fernando Yepes Muñoz

hace 2 años

Sin perritu

Con perritu

Así quedo el código en JS

const API = 'https://api.thedogapi.com/v1/images/search';

const dogInfo = async () => {
    
    const response = await fetch(API);
    const transform = await response.json();
    const data = transform[0].url;

    const renderDog = () => {

        const figure = document.querySelector('img');
        figure.setAttribute('class', 'dog-img')
        figure.src = data;
    
    }

    renderDog()   
}

const btn = document.querySelector('.research')
btn.addEventListener('click', dogInfo)

Diego Alvaro Parra Abad

hace 2 años

Adjunto el detalle de los retos.

let url = 'https://api.thecatapi.com/v1/images/search';

function fetchURL (URL) {
    return fetch(URL)
            .then(response => response.json());
}

async function fetchCatInfo (URL) {
    const result = await fetchURL(URL);
    const img = document.querySelector('img');
    img.src = result[0].url;
}

//Mostrar otro gato cuando se cargue la página
fetchCatInfo(url);

//Mostrar otro gato cuando se de clic en el botón.
let btn = document.querySelector('#btn-change');
btn.addEventListener('click', async (e) => {
    e.preventDefault();
    await fetchCatInfo(url);
});

Gonzalo Ceron Denetro

hace 2 años

Este es mi aporte, este es el link del proyecto.

HTML

<h1>Consumo de API</h1>
<p>Para este mini proyecto lo que vamos hacer es consumir la <a href="https://docs.thedogapi.com/">API The Dog</a> para comenzar el uso de API REST.</p>
<p>En Codepen va a estar creada una carpeta sobre el consumo de API´s Rest</p>

<button>Random Dog</button>

<div class="img-container">
  <img alt="Imagen de un perro" id="img-container">    
</div>

CSS

h1, p {
  text-align: center;
  font-family: Arial;
}
button {
  display: block;
  width: 150px;
  padding: 6px 0;
  margin: 20px auto;
  font-size: 20px;
  font-family: Arial;
  font-weight: bold;
  border: 2px solid orange;
  background: white;
  color: orange;
  border-radius: 10px;
  transition: 450ms all ease;
  cursor: pointer;
}
.img-container {
  width: 350px;
  margin: 20px auto;
}
.img-container img {
  width: 100%;
  border-radius: 2%;
  box-shadow: -1px 2px 12px 6px #443838;
}

button:hover {
  background: orange;
  color: white;
}

const URL = "https://api.thedogapi.com/v1/images/search";
let imgContainer = document.querySelector('img');
let btn = document.querySelector('button');

btn.addEventListener('click', function(){
  fetchData()
})

//USANDO ASYNC AWAIT
fetchData()
async function fetchData(){
  let response = await fetch(URL);
  let data = await response.json();
  let dogUrl = await data[0].url
  
  imgContainer.src = dogUrl;
}

Andres_Chuj

hace 2 años

mi codigo

const URL = 'https://api.thecatapi.com/v1/images/search';
const boton = document.querySelector('button');

boton.addEventListener('click', randomCats);
window.addEventListener('load', randomCats);


async function randomCats(){
  const fechData = await fetch(URL); 
  const data = await fechData.json();
  const image = document.querySelector('img');
  image.src = data[0].url;
}

Edwin Garcia Quiterio

hace 2 años

const URL = 'https://api.thecatapi.com/v1/images/search';

getCat();

async function getCat(){
    let res = await fetch(URL);
    let data = await res.json();
    console.log(data);
        const img = document.querySelector('img');
        img.src = data[0].url;
}

Victor Hugo Cruz Carballo

hace 2 años

console.log('hello');

const URL = 'https://api.thedogapi.com/v1/images/search';

// fetch(URL)
//   .then(response => response.json())
//   .then(data => {
//     const img = document.querySelector('img');
//     img.src = data[0].url;
// })

const fetchData =async (urlApi)=>{
  const res = await fetch(urlApi);
  const data = await res.json();
  return data;
};

const anotherFn = async (urlApi) =>{
  try {
    const imgUrl = await fetchData(urlApi);
    const data = imgUrl[0].url;
    console.log(data);
    const img = document.querySelector('img');
    img.src = data;
    return data;
  } catch (error) {
    console.log(error);
  }
};

anotherFn(URL);

Daniel Santos Q C

hace 2 años

mi solución al reto

Captura de Pantalla 2022-08-25 a las 5.44.52 p.m..png

en el .js

function refresh() {
  const button = document.querySelector('button');
  let img = document.querySelector('img');
  button.disabled = true
  const URL = "https://api.thecatapi.com/v1/images/search";
  fetch(URL)
  .then(res => res.json())
  .then(data => {      
    img.src = data[0].url;
    console.log(data[0])
    button.disabled = false
  })  
}
refresh();

en el .html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Random Cat</title>
</head>
<body>
  <div>
    <h1>Random Cat</h1>
    <button type="button" onclick="refresh()"> Refresh </button>
  </div>
  <img alt="foto del gatito" width="250px" height="200px">

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

Ayda Yineth Montoya Henao

hace 2 años

😄

Bernardo Di Leo

hace 2 años

Mi repo de Github con el Proyecto!!
GITHUB
![]()

Rony1710

hace 2 años

Griger Ratia

hace 2 años

Muy buena clase de inicio!!

Jeison David Redondo Laiton

hace 2 años

Aqui esta mi reto:

HTML:

<body>
    <h1>Gatitos Aleatorios</h1>

    <button onclick="recargar()">Recarga</button>
    <figure class="img-class">
        <img alt="Foto Gatito Aleatoria" >
    </figure>
    
</body>

JavaScript

const cImg = (link) => {
    fetch(link)
    .then(res => res.json())
    .then(data => {
        const img = document.querySelector('img');
        img.src = data[0].url;
    });
};

const recargar = async () => {
    const URL2 = 'https://api.thecatapi.com/v1/images/search';

    try{
        await cImg(URL2);    
    } catch(error){
        console.error(error)
    }
}

cImg(URL);

Isaak Nico

hace 2 años

Creo que esta no era la Api de gatos 😖

Juan Pablo Ospina Restrepo

hace 2 años

Este es mi solución y aporte.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    
    <title>pokedex</title>
</head>
<body>
    <header>

    </header>
    <main>
        <div class="container">
            <div class="container-title">
                <h1>Pokedex</h1>
            </div>
            <div class="container-img">
                <img id="poke-img" alt="">
            </div>
            <div id="poke-name" class="container-name">
                
            </div>
        </div>
        <div class="container-btn">
            <div id="btn-change" >Change</div>
        </div>
    </main>
    <footer>

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

CSS

/*
    1. Posicionamiento
    2. Modelo de caja
    3. Tipografia
    4. Visuales
    5. Otros
*/
:root{
    --VeryDarkBlue: #222831;
    --DarkBlue: #393E46;
    --Blue: #00ADB5;
    --white: #EEEEEE;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

html{
    font-size: 62.2%;
    font-family: "Roboto", sans-serif;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 1.5rem;
}
main{
    width: 100;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    place-content: center;
    place-items: center;
    color: var(--Blue);
    background: var(--VeryDarkBlue);
}
.container{
    min-width: 40rem;
    max-width: 60rem;
    height: 50rem;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    border: .1rem solid var(--DarkBlue);
    border-radius: 2rem;
    overflow: hidden;
}
.container-title{
    width: 100%;
    height: 10rem;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    font-size: 2.4rem;
    border-block-end: .1rem solid var(--DarkBlue);
    background: var(--white);
}
.container-img{
    width: 100%;
    height: 30rem;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    border-block-end: .1rem solid var(--DarkBlue);
}
img{
    width: 42%;
    max-height: 30rem;;
    object-fit: cover;
}
.container-name{
    width: 100%;
    height: 10rem;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    font-size: 2rem;
    background: var(--white);
}
#container-btn{
    width: 100%;
    
}

#btn-change{
    padding: 1.5rem 4rem;
    border: .1rem solid var(--Blue);
    border-radius: 1rem;
    font-size: 2rem;
    font-weight: 700;
    background-color: var(--white);
    cursor: pointer;
}
#btn-change:hover{
    border: .1rem solid  var(--white);
    color: var(--white);
    background-color: var(--Blue);
}


// URL de la api
const API = 'https://pokeapi.co/api/v2/pokemon';

// CAPTURARA elemento del DOM con el que se va a interactura
const pokeImg = document.getElementById('poke-img');
const pokeName = document.getElementById('poke-name');
const btnChange = document.getElementById('btn-change');

// RENDER data en el HTML
const renderPoke = (dataJson) => { 
    console.log(dataJson.name)
    pokeName.innerHTML = `<p>${dataJson.name || 'Faile name'}</p>`
    pokeImg.src = dataJson.sprites.other.dream_world.front_default
}
// GET data de la api
async function pokeRandom (api) {
    const response = fetch(api)
    const data = (await response).json()
    return data
}

// EXECUTE getdata y render data
async function randomPokedex(api){    
    try {
        const data = await pokeRandom(api)
        renderPoke(data)
    } catch (error) {
        console.error(error)
    }
}
// GENERATOR Random IdPoke y llamado al execute
const randomClick = () => { 
    const pokeIdRandom = Math.floor(Math.random() * 20);
    const urlAPI = `${API}/${pokeIdRandom}`
    randomPokedex(urlAPI)
}

// EJECUCION INICIAL AL CARGAR LA WEB
randomClick()

// AGREGAR EVENTO PARA EL BUTTON DE CAMBIAR
btnChange.addEventListener('click',randomClick);

Yangetze González

hace 2 años

Mi tarea 😃

Stephany Plaza

hace 2 años

No es el mas lindo pero lo hice ! 😃

Les dejo el código por si les sirve 😃

const URL = "https://api.thedogapi.com/v1/images/search";

async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  const img = document.querySelector("img");
  img.src = data[0].url;
}

fetchData(URL);

const btn = document.getElementById("btn-dogs");

btn.addEventListener("click", () => {
  return fetchData(URL);
});