<button id="request">Get random animals</button>
<br/>
<img id="cat"/>
<img id="dog"/>
<img id="fish"/>
function findRandomImgPromise(tag) {
const apiKey = 'a89c66e48519481ab448a3f8356e635c';
const endpoint = `https://api.giphy.com/v1/gifs/random?api_key=${apiKey}&tag=${tag}`;
return fetch(endpoint)
.then(rs => rs.json())
.then(data => data.data.fixed_width_small_url);
}
$('#request').click(async () => {
const imgUrl = await findRandomImgPromise('cat');
$('#cat').attr('src', imgUrl);
});
This Pen doesn't use any external CSS resources.