<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<style>
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="dogImage"> <img src=""
alt=" "></div>
<button onclick='newdog()'>Click here</button>
<script>
const DogImageDiv = document.getElementById('dogImage')
function newdog(){
fetch('https://dog.ceo/api/breeds/image/random')
.then((response => response.json()))
.then(json =>{
DogImageDiv.innerHTML = `<img src='${json.message}'
height= 300 width= 300 />`
} )
}
</script>
</body>
</html>