Git Product home page Git Product logo

js-imagerandomizer's Introduction

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>

js-imagerandomizer's People

Contributors

keysthebeesknees avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.