This lesson is going to be about preparing our HTML success and then hooking up our JavaScript in order
to interact with elements.
So let's start by creating a few elements and we're going to try to keep the minimal HTML elements setting
up a div given a class of output.
So this is the main element that we're going to be interacting with.
Also, let's set up some success for this as well.
And whenever the mouse travels into this element, this is where we're going to have our interaction
taking place.
So setting up a different background color to distinguish it and also a default height and width.
So these don't actually matter because our application is going to be dynamic, taking up a height and
weight.
Also, I like to set up a border so that we know where our element ends and starts and we don't really
are we aren't really going to have a whole lot of overflow.
And also with the cursor, let's set up the cursor as Grop.
Let's try that and refresh.
So we've got a big green square.
And whenever we're over that, we see that our cursor turns into the grab icon for the cursor and we're
going to use JavaScript in order to track the X and Y coordinates, create a dynamic element that's
going to move around that output area.
We also need a message area.
So this is where we can provide information to the user, setting it up as message first coordinate
that we're going to need is the X, the horizontal adding in a span and we can set this spane class
to X as this will track the horizontal coordinates and what's add in one more spane and that span is
going to track the vertical coordinates.
So it's going to be using Y and we can set the class for this one to Y.
So refresh and we've got our X and Y coordinates down at the bottom.
Next we need to add JavaScript in order to make it interactive and dynamic.
Now that we've created the elements, we can track the contents of the element.
So creating a variable called output using document query selector in order to select the element with
the class of output and put that into an object called output.
Always, it's good idea to check to make sure that you do have that element as the object of output
before you try to use it.
So this is the message out using documents.
And because we do have two elements that we're trying to select, we're going to use query selector
all selecting the two spans and we can be more specific in case we decide to add more span's into our
page.
So all of the elements with the class of message and having span's in them.
So we're going to select those as message out objects.
So we type in message out.
We see that we've got a node list of the two elements.
So we have the first one and we have a second one and we can distinguish them by using the index value
of the items in the array.
So we've got a span with a class of X and a span with a class of Y, and that means that we're ready
to proceed to the next step.
We're going to be building out more functionality within the application.
So go ahead and set up these core pieces of the application where we've got our HTML.
We've got a message area where we can track the X and Y coordinates.
We have elements that we can deposit those updates in via JavaScript, apply a little bit of styling
to that output element so that we can distinguish it from the rest of the HTML page and then finally
select them using JavaScript has JavaScript objects and you could be ready to move on to the next step.