☰
844-KID-CODE (543-2633) 844-KID-CODE
1. Create our First Box 2. Our First Event Listener 3. Color the Box with Mouseovers. 4. Add a Timeout and Create more Boxes 5. Extending the Box's Event Listener and Deliberation. 6. Looping! 7. Randomly Colored Boxes 8. (Optional) Add new Shapes 9. (Optional) Add a Different Style to Mouseover Events

Project 373: Hover Squares

7. Randomly Colored Boxes

We'll use a list of some fun colors, a random number, and a little math to give each box a random color value.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Create a List of Colors

Make a list of colors called "colors".  Remember that Lists in JS should be variables, surrounded by square brackets and that elements of the list should be in quotes and separated by commas.  For instance:  var colors = ["yellow"  "blue",  "red"] is a valid list.  I used hexadecimal for my colors.
var colors = ['#020b36','#230745', '#d6fffb', 'b3e3f4s'];

2. Choose a Random Number.

We want to make the colors random, so we'll use a variable called "randomIndex", and a method of the JavaScript Math module random.   Try to set that up on your own! 
var randomIndex = Math.random();

3. Make "randomIndex" bigger.

Since "Math.random()" returns a number between 0 and 1,  we want to make that a little bigger and use the size of our list to our advantage.  For a list object in JS we can get it's size by referring to the list by name, and adding the length property using the "object.method" notation from earlier, for instance:  "colors.length".  To make our random number in that range, let's just multiply the two. 
var randomIndex = Math.random()*colors.length;

4. Make sure the Index is a whole number.

Since "Math.random()" could be a decimal we'll use the "Math.floor()" method on the previous step to take the number and move it to the next lowest whole number.  For instance:  "Math.floor(6.5362)"  returns 6.  
var randomIndex = Math.floor(Math.random()*colors.length);

5. Name the Random Color

Now use a new variable randomColor and set it equal to an element of Colors.  To access a single element of the list  use square brackets after the name of the list and put a number inside of them.  For instance 0.
var randomColor = colors[0];

6. Give a Box the Random Color.

Take a look at the code for the mouseover and copy from the ".style" onwards.  Then back in the for loop add a new line and write "box".  Now paste the color code from the Mouseover event, and adjust the blank color on the right of the equals sign to reference "randomColor" instead.   Check  out what happens to the boxes!
box.style.backgroundColor = randomColor;

7. Finally working with the Random Index.

Try to figure out where the "randomIndex" variable should have gone to add a randomColor to each box. 
var randomColor = colors[randomIndex];