☰
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

2. Our First Event Listener

Using JS we'll create an Event Listener. It's going to "listen" for a mouse cursor moving over our Box, and put a pop up on our screen!
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Make a Box Variable

OK, we want this page to do things so we need to write instructions in JS to affect either HTML or CSS.  A great first step is to make a variable and set it equal to document.  This doesn't do anything yet and is wrong but it gets us used to the following format:

var thing = definition;
var box = document

2. Set up a Selector

Well I just told you var box = document; was wrong, maybe we can refine it a little.  We'll use a built-in JS method to do that: querySelector().  Basically we want to select a piece of our Document or Page.  We have to be careful about notation though.  Try the to commit the following to memory:

Object.Method()

In our example that looks like:  document.querySelector();

var box = document.querySelector();

3. Select the Box Class

Now we have all the tools to tell JS how to 'select' our Box.  Insert ".box" inside of the parentheses  of querySelector().  Recall that ".box" is the name of our CSS class. 

var box = document.querySelector(".box");

4. Listen for Mouseovers

Once we finish with the variable, we need to take some time to think about what to do with it.  It would be great to setup something called an Event Listener that waits for something to happen on the screen.  To detect a cursor hovering over our box.  Try the "mouseover" event.  An Event Listener also does something when it 'hears' an event, but we'll manage that next step. 

box.addEventListener("mouseover",);

5. Manage an Event with a Function.

Let's setup an unnamed function to handle our event.  These types of unnamed functions are called anonymous.  A function has a couple of key elements:

name(parameters){ }

Our function is anonymous so we include the word function instead of a name.  A parameter is information we can use inside of a function. Lastly the curly brackets just tell us where our function begins and ends. Naturally all code we want to add to it start inside them.  Let's put our function right next to the comma after mouseover and before the parentheses ends.

box.addEventListener("mouseover",function(event){});

6. Create a Popup

Lastly let's add the line of code "alert("Hello, World!)" inside of our function.  Make sure it's all inside the curly brackets.  

Now when you hover over the box it finally does something and it's annoying!  No worries, we'll make it cooler later.  Also take a second to appreciate all you did in this challenge there was a lot thrown at you fast.  
box.addEventListener("mouseover",function(event){ alert("Hello, World!"); });