No tienes acceso a esta clase

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

Consume tu primera API REST

3/20
Recursos

Aportes 202

Preguntas 12

Ordenar por:

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

o inicia sesi贸n.

馃槃 Holaa! Esta es mi soluci贸n! Gracias a todos porque gracias a sus aportes resolv铆 el reto!!

JS

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);
}

Peque帽a soluci贸n con la API de Pokemon

Pokemon API

Repositorio

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

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 鈥渞eload鈥 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.

No es mucho pero es trabajo honesto.

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();

proyecto creado con vite con plantilla de typescript:

https://vitejs.dev/

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;
}

JS

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();

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);
}

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

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

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 鉁

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.

Reto cumplido. Cre茅 un boton en HTML con atributo 鈥渙nclick鈥 para usarlo en JavaScript
HTML

JS

Navegador

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()

HTML

Js

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

no es mucho pero es trabajo Honesto

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)

}

Mi aporte sin dise帽o ni nada y las cicatrices del aprendizaje 馃槄

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()

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;
}

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;
    });
})

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;
    });
<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);

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

JS

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);

Me tomo tiempo, pero lo hice, voy a mejorar los estilos otro d铆a 馃槢
Repositorio

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!

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>

JS

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; 

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)
});

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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

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!!

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);
    }
}

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

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>

  • CSS
*{
    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;
}

  • JS
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);
});

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);
    }
});

![]()

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:

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);


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)
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)
    }
}



reto:

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;

Mi aporte

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>

JS

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);

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

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++;
}

Soluci贸n del reto!
.
.


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

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();
})

Aporte

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())

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)
})

excelente clase juan 馃懢

Mi soluci贸n al reto:

JS

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;
}

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>

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));

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) {

    }
}

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

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);

Listo xD

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

Holis, este es mi desaf铆o listo

Team Dogs!

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();
} 

Este es el link de mi repositorio https://github.com/cristinacrs/the-dog-api
Yo utilic茅 TheDogApi 馃惗馃悤

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>
  • CSS
*{
    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)
}

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;
}

No fue tan dif铆cil como cre铆 馃槃

As铆 me qued贸 la p谩gina de gatitos! (Cualquier parecido con la realidad es pura coincidencia!馃槄)

C贸digo del bot贸n:

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;
}

JS

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()
}

Aqu铆 va mi aporte!! 馃グ

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)

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);
});

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;
}

JS

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;
}

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;
}
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;
}
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);

mi soluci贸n al reto

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>

馃槃

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

Muy buena clase de inicio!!

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);

Creo que esta no era la Api de gatos 馃槚

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);
}

JS


// 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);


Mi tarea 馃槂

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);
});