☰
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

4. Add a Timeout and Create more Boxes

Let's add a Timeout function to reset our color and adjust the CSS to allow us to add more boxes.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Set a Timeout and another Anonymous Function

Let's introduce a Timeout Function to our code to run some code after a slight delay.  Our version should look like this:  "setTimeout(function() {} , 1000);"  Breaking it apart we see two main pieces.   The first is another Anonymous function:  "function () {}".  The second piece is the delay we will wait for, don't worry it's in milliseconds, and 1000ms is 1s  long.  
setTimout(function() {} , 1000);

2. Reset the Color

Now that we have another Anonymous Function, let's add a line of code that sets the box's background color to blank or "".  That will force it back the background color specified in our CSS.   Don't forget to be efficient and copy and paste long expressions when it's alright to do so.
event.target.style.backgroundColor = "";

3. Prepare for Many More Boxes.

Alright this is a great template so far for every boxes' behavior.  Let's freshen up the CSS to add a margin so new boxes have a space between them.  Use "margin: 1px;"  for that.
margin: 1px;

4. Force the Boxes Horizontal

When we add more boxes we also want them to stretch across the screen.  Use: "float: left;"  for that.  
float: left;

5. Make more boxes.

Let's try to make two more boxes real quick.  Simply copy the HTML for the first box and give the other box's class names like: "box2" and "box3".   What's wrong with the end result?

6. Expand our CSS Class

OK so no extra boxes show up presently, well let's try to add their class names to the ".box" class in CSS.   Just separate the names with commas and don't forget the beginning period like this: ".box , .box2, ....{".  Ok now we can use our code on the new boxes right?  Try to think of a reason why it's not working for them.