JSFiddle - React, Tailwind, and code Playground

by dgmouris

HTML

<html>
<head>

</head>
<body>
<h1>
Random Dog Image
</h1>
<img src="" alt="random doggo">
</body>
</html>

JavaScript

let randomDogUrl = "https://dog.ceo/api/breeds/image/random";

const getRandomDogPicture = async () => {    
    // instead of promise.then we await the response of fetch
    let response = await fetch(randomDogUrl, {method: "GET"});
    // instead of .then again, we use await to parse the body
    let json_data = await response.json(); 

    // take a look at the object
    console.log(json_data);

    return json_data.message;
}

// call the async function
(async function() {
  let picture = await getRandomDogPicture();
  document.querySelector("img").src = picture;
})();