☰
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

5. Extending the Box's Event Listener and Deliberation.

Let's take our first stab at making more boxes and see if we can optimize our approach.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Give our New Boxes their own Event Listeners

OK let's head back to the JS Tab and copy our work from earlier, then paste it and change the names of our variable, the class and the variable again to add a new Variable and EventListener to each box in our HTML.  
var box2 = document.querySelector(".box2"); box2.addEventListener("mouseover",function(event){ event.target.style.backgroundColor = "blue"; setTimeout(function(){ event.target.style.backgroundColor = ""; }, 1000); });

2. Consider our Work

Now let's pause and consider how sustainable this process is.   Our end goal is have 300 Boxes.   Do you think you could do that without getting bored or tired?  How big would the file get as well?   This is why the DRY  principle is important.   DRY  stands for Don't Repeat Yourself. Obviously Adding a new variable and a new EventListener to every Box would violate that principle. I have another plan that will get rid of all these repeating statements.  Using a container for our boxes and making them with a loop!

3. Incorporate a Container.

Let's head back to the HTML pane for the last time, and remove the two additional boxes.  Then make a new "div"  tag with a class of "box-container"  add your original "div" with the "box" class inside of the container by placing it inside the two tags.  

4. Adjust CSS

To make a lot of boxes fit better let's lower the Width and Height to 25 pixels each.  
width: 25px; height: 25px;

5. Remove Extra Box classes and add Transitions

Let's remove the remnants of Box2 and Box3 from the CSS pane.  As well as adding a cool Transition effect. We'll start with  "-webkit-transition: 1s all;".
-webkit-transition: 1s all;

6. Last Transition Effect.

We also want to add one more line to our CSS for the transition: "transition: 1s all;".  Try hovering over your square.
transition: 1s all;

7. Make the Code DRY

OK let's head back the JS and remove all the  excess variables and Event Listeners.   Then we need to change the remaining Box Variable and EventListener.   Instead of adding an Event Listener to the box we will add it to a new variable called "boxContainer".  That way when we add items to the container, they will all already have a listener.  Make sure to change the variable name, and the name of the class in the ".querySelector()" method.  Try out the result it should work again.
var boxContainer = document.querySelector(".box-container"); boxContainer.addEventListener("mouseover",function(event){ event.target.style.backgroundColor = "blue"; setTimeout(function(){ event.target.style.backgroundColor = ""; }, 1000); });