<button id="get-random-cat" name="Show a random cat">Cat</button>
<button id="get-random-dog" name="Show a random dog">Dog</button>
<button id="get-error" name="Show an error">Error</button>
<img id="pet-img" src="" width="400" alt="Image of a cat or dog" />body {
padding: 1rem;
}
button {
cursor: pointer;
font-size: 16px;
padding: 10px;
margin-bottom: 1rem;
}
img {
display: block;
max-width: 100%
}const handleAPIError = error => {
const { status } = error.response;
switch (status) {
case 400:
console.log("Error: invalid request");
break;
case 401:
console.log("Error: not authenticated");
break;
case 404:
console.log("Error: unknown endpoint");
break;
case 500:
console.log("Error: server problems");
break;
default:
console.log("Error: something went wrong")
}
throw error;
}
async function getRandomDog() {
const response = await axios
.get("https://dog.ceo/api/breeds/image/random")
.catch(handleAPIError);
return response;
}
async function getRandomCat() {
const response = await axios
.get("https://api.thecatapi.com/v1/images/search")
.catch(handleAPIError);
return response;
}
const a = error => { console.log(error); throw error;}
async function getRandomError() {
const response = await axios
.get("https://api.thecatapi.com/not/a/valid/endpoint")
.catch(handleAPIError);
return response;
}
function displayRandomCat() {
getRandomCat().then(response => {
document.getElementById('pet-img').setAttribute('src', response.data[0].url);
})
}
function displayRandomDog() {
getRandomDog().then(response => {
document.getElementById('pet-img').setAttribute('src', response.data.message);
})
}
function displayError() {
getRandomError().catch(error => {
alert("Something went wrong :(");
})
}
document.getElementById('get-random-cat').addEventListener('click', displayRandomCat);
document.getElementById('get-random-dog').addEventListener('click', displayRandomDog);
document.getElementById('get-error').addEventListener('click', displayError);
External CSS
This Pen doesn't use any external CSS resources.