How to make Ramdom Photos Section using HTML, JS

By Piyush Gupta
Ramdom Photos
Creating a random photos section using HTML and JavaScript involves dynamically fetching and displaying random images each time the page loads or a button is clicked. For this example, we’ll use the Unsplash API to fetch random images. You’ll need an Unsplash API access key, which you can get by signing up at Unsplash Developer.

HTML

<!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>

 

CSS (styles.css)

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);
}

 

JavaScript (script.js)

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.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.

0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

Recent Posts

  CALL

+91 7905834592

Enquiry Now

piyushmnm@gmail.com

piyush.gupta384