Random Image Generator using JavaScript

Last Updated : 26 Jul, 2024

In this article, we will learn how to generate random images in fixed intervals using only HTML, CSS, and JavaScript.

Approach: The pictures which are going to be generated randomly on the website should be stored in the form of an array, these pictures are then displayed to the user within a regular time interval. We use the setInterval() function which is an in-built function of JavaScript to set a timer between the images to display and we will use the floor(Math.random()*pics.length) method to generate a random number between 0 and the length of the array that is assigned to the images to display randomly.

Below is the step-by-step implementation of the above approach.

Step 1: In your HTML page, create an empty section that will contain the randomly generated pictures.

index.html

<!DOCTYPE html> <html>  <head>     <style>         * {             margin: 0%;             padding: 0%;             box-sizing: border-box;             font-family: Arial, Helvetica, sans-serif;         }          body {             background: rgba(120, 16, 180, 0.767);             height: 100%;             background-position: center;             background-repeat: no-repeat;             background-size: cover;         }          .container {             margin: 1.5vh 20vw;             margin-top: 10vh;             text-align: center;             background: rgb(39, 188, 209);             background: linear-gradient(118deg,                 rgba(39, 188, 209, 0.9783263647255778) 0%,                 rgba(6, 14, 101, 1) 100%);             opacity: 0.9;             color: white;             padding: 10px 10vw;             border-radius: 20px;             min-height: 15vh;         }          h1 {             text-transform: uppercase;         }          section {             height: 50vh;             width: 100%;             margin-top: -50px;             background-position: center;             background-repeat: no-repeat;         }     </style>  </head>  <body>     <div class="container">         <br>         <h1>Geeks For Geeks Courses</h1><br>         <p>             With the idea of imparting programming              knowledge, Mr. Sandeep Jain, an IIT              Roorkee alumnus started a dream,             GeeksforGeeks. Whether programming              excites you or you feel stifled,              wondering how to prepare for interview             questions or how to ace data structures              and algorithms, GeeksforGeeks is a              one-stop solution.         </p>         <br><br><br>         <section></section>         <br>     </div> </body>  </html>

Output:

Step 2: In JavaScript, create an array of image links. The images inside the array are to be generated randomly on the webpage. We will call the indexes of this array randomly using Math.random function to be displayed.

Create a JavaScript variable to store a random value calculated by using the Math library i.e. Math.floor(Math.random()*pics.length). It is going to generate a random number between 0 and the length of the pics array, this would be assigned to the images inside the pics array to display them randomly.

setInterval() is an in-built function of JavaScript which is used to set a timer between the images to display. It has 2 parameters, the function that needs to be executed, and the time interval between each generation.

Now combine all the JS codes in your HTML code.

index.html

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title> Image Generator</title>     <style>         * {             margin: 0%;             padding: 0%;             box-sizing: border-box;              font-family: Arial, Helvetica, sans-serif;         }          body {             background: rgba(120, 16, 180, 0.767);             height: 100%;             background-position: center;             background-repeat: no-repeat;             background-size: cover;         }          .container {             margin: 1.5vh 20vw;             margin-top: 10vh;             text-align: center;             background: rgb(39, 188, 209);             background: linear-gradient(118deg,                     rgba(39, 188, 209, 0.9783263647255778) 0%,                     rgba(6, 14, 101, 1) 100%);             opacity: 0.9;             color: white;             padding: 10px 10vw;             border-radius: 20px;             min-height: 15vh;         }          h1 {             text-transform: uppercase;         }          section {             height: 50vh;             width: 100%;             margin-top: -50px;             background-position: center;             background-repeat: no-repeat;         }     </style> </head>  <body>     <div>         <br>         <h1>Geeks For Geeks Courses</h1><br>         <p>            With the idea of imparting programming knowledge,             Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream,            GeeksforGeeks. Whether programming excites you or you             feel stifled, wondering how to prepare for interview            questions or how to ace data structures and algorithms,             GeeksforGeeks is a one-stop solution.         </p>          <br><br><br>         <section></section>         <br>     </div>     <script>         const pics = [             'url( "https://media.geeksforgeeks.org/wp-content/uploads/20200316135008/red7.png")',             'url( "https://media.geeksforgeeks.org/wp-content/uploads/20200316135014/yellow3.png")',             'url( "https://media.geeksforgeeks.org/img-practice/[email protected]")',             'url( "https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-course-overview-image.png")',             'url( "https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png")',             'url( "https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png")',             'url( "https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png")'         ];         const pic = document.querySelector('section');          function showImage() {             var a = Math.floor(Math.random() * pics.length);             var img = pics[a];             pic.style.backgroundImage = img;         }          setInterval(showImage, 1000);     </script> </body>  </html>

Output:

How to Generate a Random Password using JavaScript?

archita2k1

Improve

Article Tags :

Random Image Generator using JavaScript

Similar Reads