☰
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

3. Color the Box with Mouseovers.

Now that we have an anonymous function we can add some code to it to change the box to a different color after we hover over it.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Send Event Information to the Console.

Making an alert pop up is fine, but maybe we can get more information about our event by sending it to the console?  To do that in JS, let's use the "log"  method on our "console".  Recall the object.method() notation would make that look like:  "console.log()". 

Remember that we have to use our event inside of this function.  As a hint try "event.target"  inside the log method.

console.log(event.target);

2. Open a Better Console.

Let's try to find the output from our code!  If you see on the lower left end of your screen there is a button that says "console", click it and you'll be greeted with a message telling us our box's HTML markup.  That's kind of frustrating because there is a lot more information hiding below the surface of our project.   

To get around this, let's press the F12 function key on our keyboard to bring up the inspector instance.  This page gives us information not just about our app but also the Codepen.io website itself and it is a fun place to dig around when you have spare time and want to learn how some other websites are built.   For right now let's just head to the  "Console" tab and look for the longer form output.

3. Browse the Event Information

In the console you should see similar information to the codepen.io console, but there should be an arrow to expand it.  Do so and Scroll down the list to access the "style"  section.  It also has a drop down.  Like with the first, open it and head deeper!  Try to find the part that adjusts the Background Color.

4. Use the Info we found.

Now if you didn't find the part that would affect Background Color no worries, we will use:  "event.target.style.backgroundColor".  Now replace the "console.log()" portion with that, and add an equal sign and a name of a color in quotes, and test your mouseover.  If everything is formatted properly it should change to the color you specified!

event.target.style.backgroundColor ="blue";

5. Clean up our EventListener

We need to add a comma and the boolean "false" to the end of the EventListener to turn off some optional settings that might mess us up later.  Essentually this allows us to switch back to the original color and run the mouseover code again in the future.