Skip to content

Latest commit

 

History

History
68 lines (47 loc) · 3.38 KB

README.md

File metadata and controls

68 lines (47 loc) · 3.38 KB
Raw

Pick a Random Image with JavaScript

As you advance your skills as a web developer, you'll need to incorporate the three essential web languages: HTML, CSS, and JavaScript. While this class has been concentrating on HTML and CSS to create structure and style, adding a splash of JavaScript can add some additional functionality to your pages.

  • HTML lays the groundwork by structuring web content. It defines the bones of a webpage—the headings, paragraphs, images, and links. Think of it as the architectural blueprint for your digital space.

  • CSS steps in to add style and aesthetics. It paints the walls, arranges the furniture, and ensures a visually pleasing experience. With CSS, we transform raw HTML into a polished, user-friendly interface.

  • JavaScript, however, can be a dynamic force that adds more dynamic elements into our static web pages. When users click buttons, submit forms, or change the content, JavaScript orchestrates the show.


In this coding exercise you will write some basic JavaScript that will show a random image each time a page is loaded. This is surprisingly complicated when compared to adding an image with HTML.

Here's how this JavaScript works:

Vaiables used in this script:

  • imageList - An array (list) of all the images it can choose from
  • randomizer - A random number between 0 and the number of items in the array -1
  • randomPick - The information taken from the randomly chosen item in the array
  • imgElement - The HTML element that has been given the id name of "randomImage"
  1. The first part creates an array of image sources. An array is a list of data that can be accessed by in a variety of different ways. In this example the array has been given the name of "images":
var imageList = [
   "example1.jpg",
   "example2.jpg",
   "example3.jpg"
];

2. The second part generates a random number based on the number of items listed in the array. `Math.random()` returns a random number between 0 and 1. `Math.floor()` rounds down a number to the nearest integer. So, `Math.floor(Math.random() * images.length)` will return a random integer between 0 and images.length - 1, which is the range of valid indexes for the array. 
var randomizer = Math.floor(Math.random() * images.length);

3. The third part picks the item from the array that corresponds with the randomly generated number. 
var randomPick = images[randomizer];

4. The fourth part goes into the HTML page and finds an <img> element that has a specified id attribute. For example, if the image element has an id of “randomImage”, then `document.getElementById(“randomImage”)` will get that element. 
var imgElement = document.getElementById("randomImage");

5. The fifth part sets that chosen image's `src=""` attribute to the file name of the randomly chosen file from the array. For example, `imageElement.src = randomImage` will set the image source to “example3.jpg” if that was the random image. 
imgElement.src = randomPick;

6. Adding the script to an HTML file will make this code run every time the webpage is loaded, so it will display a different image each time. Adding the `defer` attribute to the script tag tells it not to run the script until after all of the HTML is done loading. 
<script src="random.js" defer></script>