Skip to content

Instantly share code, notes, and snippets.

@pteacher

pteacher/fetch.html

Created October 20, 2022 04:24
Show Gist options
  • Save pteacher/ddcb380e59688f020b22e493deafc487 to your computer and use it in GitHub Desktop.
Save pteacher/ddcb380e59688f020b22e493deafc487 to your computer and use it in GitHub Desktop.
Download ZIP
Fetch API example with public-api for dogs (AIU COM21 students)
Raw
fetch.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" defer>
function loadData() {
fetch('https://dog.ceo/api/breeds/image/random')
.then((response) => response.json())
.then((data) => {
console.log(data);
document.getElementById("data").innerHTML = data.message;
document.getElementById("doggy").src = data.message;
});
}
</script>
</head>
<body onload="loadData()">
<button onclick="loadData()">LOAD SOME DATA</button>
<div id="data">
</div>
<img src="" alt="" id="doggy" style="width: 200px; height: 200px; object-fit: cover;">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment