<script>
document.getElementById('generateButton').addEventListener('click', function() {
fetch('https://dog.ceo/api/breeds/image/random')
.then(response => response.json()) // Parse the JSON response
.then(data => {
// Extract the dog image URL from the JSON object
const dogImageUrl = data.message;
// Create an img element and set its src attribute to the dog image URL
const img = document.createElement('img');
img.src = dogImageUrl;
img.alt = 'Random Dog';
img.style.maxWidth = '550px';
img.style.maxHeight = '550px';
// Clear any existing images and append the new one to the container
const dogImageContainer = document.getElementById('dogImageContainer');
dogImageContainer.innerHTML = '';
dogImageContainer.appendChild(img);
})
.catch(error => {
console.error('Failed to fetch dog image:', error);
});
});
</script>
<script src="app.js"></script>