How to make Ramdom Photos Section using HTML, JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Photos</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!--Uisng lorem Picsum website for pics-->
    <h1><u> Random Photos </u></h1>
    <div class="img-container">
      <img src="https://picsum.photos/300?random=1" />
      <img src="https://picsum.photos/300?random=2" />
      <img src="https://picsum.photos/300?random=3" />
      <img src="https://picsum.photos/300?random=4" />
    </div>
    <button class="btn">Load More</button>
    <script src="index.js"></script>
  </body>
</html>

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(245, 175, 89);
}

.img-container {
  text-align: center;
}

h1 {
  color: white;
  font-size: 40px;
  font-family: cursive;
}

.img-container img {
  margin: 10px;
  border: 15px solid white;
  border-radius: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  background-color: rgb(188, 194, 194);
  width: 300px;
  height: 300px;
  cursor: zoom-in;
}

.img-container img:hover {
  filter: grayscale();
}

.btn {
  background-color: blue;
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  border: none;
  font-family: cursive;
  font-size: 15px;
  margin: 15px;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(0.8);
}

const imgContainerEl = document.querySelector(".img-container");
const btnEl = document.querySelector(".btn");

btnEl.addEventListener("click", () => {
  additionalImages();
});

function additionalImages() {
  for (let i = 0; i < 10; i++) {
    const newImageEl = document.createElement("img");
    const number = Math.floor(Math.random() * 2000);
    newImageEl.src = "https://picsum.photos/300?random=" + number;
    imgContainerEl.appendChild(newImageEl);
  }
}

Explanation

1. HTML Structure:
   • The HTML structure includes a container with a title, a div with the ID photo-grid for displaying the photos, and a button for loading more photos.
2. CSS Styling:
   • The .photo-grid class uses CSS Grid to create a responsive grid layout for the photos.
   • The img elements within the grid are styled with rounded corners and a box shadow.
   • The button is styled for a modern look with hover effects.
3. JavaScript Functionality:
   • The accessKey variable stores your Unsplash API access key.
   • When the DOM content is loaded, the loadRandomPhotos function is called to fetch and display random photos.
   • The loadPhotosButton is set up with an event listener to load more photos when clicked.
   • The loadRandomPhotos function fetches 10 random photos from the Unsplash API and appends them to the photo-grid div.

Replace 'YOUR_UNSPLASH_ACCESS_KEY' with your actual Unsplash API access key. This script fetches random photos from Unsplash and displays them in a grid layout, allowing users to load more photos by clicking the button.