index.html

<!DOCTYPE html>
<html>
<head>
  <title>Dog Gallery</title>
  <style>
    /* CSS styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
    }

    .gallery-item {
      width: 300px;
      margin: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .gallery-item img {
      width: 100%;
      height: auto;
    }
  </style>
  <script>
    // JavaScript code
    document.addEventListener("DOMContentLoaded", function() {
      var gallery = document.getElementById("gallery");

      // Make AJAX request to fetch multiple random dog images
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "https://dog.ceo/api/breeds/image/random/3");
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          var images = response.message;

          // Loop through the images and create gallery items
          for (var i = 0; i < images.length; i++) {
            var galleryItem = document.createElement("div");
            galleryItem.className = "gallery-item";

            var img = document.createElement("img");
            img.src = images[i];
            img.alt = "Dog " + (i + 1);

            galleryItem.appendChild(img);
            gallery.appendChild(galleryItem);
          }
        }
      };
      xhr.send();
    });
  </script>
</head>
<body>
  <h1>Dog Gallery</h1>

  <div class="gallery" id="gallery">
    <!-- Images will be dynamically added here -->
  </div>
</body>
</html>