Come back, how's your project coming along in this lesson?
It's going to be an interesting one because we're going to be creating an element using JavaScript.
So let's first start out by adding another listener and this event listener is going to listen for the
DOM content to load.
This is the same as with Jan when you're listening for a document ready, making sure that the DOM has
loaded and once the DOM content has loaded, then we can invoke the function in order to create our
moving target.
And I do say moving and we're going to introduce the moving part of it in the upcoming lesson.
So let's first create that target.
So refresh and we don't see anything happening here because we don't have any code here.
But trust me when I tell you that this is actually loading and all of the block a code that's going
to be in here is going to get rendered out once the DOM content has loaded.
And usually that's fairly instant, and especially because I'm on my local machine, right on my computer.
We're not going to have any lag with the DOM content loading.
Of course, we wanted to create another element here, so I'm going to give it a class of box and apply
all of this, including creating the element on the fly using JavaScript, create the position so that
the position as relative, though, is going to give me the ability to move it around.
I'm going to set its left position as 50 percent said, its top position as 50 percent.
And we're going to move it around with JavaScript setting up a width and a height.
So how about we do 100 picks and a height of 100 picks?
And the objective of this exercise in this game is going to be to try to catch this moving object,
also set up the border radius so that it's slightly rounded, 15 picks rounded.
So now we've got an element with the box.
Next, we need to create it and we need to add it to the page.
And this is always one of the fun things of JavaScript, because you get to create stuff that for the
user to see and customize, create it using JavaScript.
So first of all, let's create a div.
You can use variable called div creating whatever you want to call it.
But we're in this case, we're calling it div do create element allows us to create elements on the
fly and in this case we're creating a div.
And because this is an object, we have the ability to update some of the values that are contained
within there.
We can update the class list by using class add and adding in that box class that we created and we
also want to spend it so that it appends to the visible area because right now we can't see it even
though we've created it.
So append this div to the output element and we do need to add a background color or a border so that
we can see it.
So let's just add a quick border around it so that we can actually see it because it is adding it.
And if you don't trust me, then we can always add a border and you can see it showing up on the page.
So there it is.
It's being added in in the same spot all the time.
Let's apply some properties to it.
And again, because it is an object that gives us the ability to add different object values so we can
add in an X and a Y value, which we can then use in order to adjust and manipulate its position.
So I usually to create these as separate values, which makes it a little bit easier to move them around.
So taking our div object that we created, adding in an object value of X, we're going to take that
div, get the offset and also taking div Y and this is another new value that we're creating and here
we're offsetting the top position.
So it's going to give us a left and right position and you can also consult logout that value of div
so you can see that.
And of course it's we have to do console directory and able to able to see the actual object properties
and values.
So if we open that up, if we go right to the bottom, we're going to see that we've added in this X
and Y object value.
So those aren't there by default and we're adding those in so that we can utilize them in the upcoming
lesson as we move this element around.
So starting position of X and Y is coming in at two fifty nine and 277 and it's getting positioned on
the page.
We can also update its background color forward and I'll show you how to do that.
Adding an event listener whenever we hover over it will update that background image.
So for now, how about we create a default background color so this can be temp color?
And let's do this at random, so creating a hex value and we know that colors are hex values, using
math random in JavaScript is going to give us the ability to have a random value.
We're going to change this value to string with a base of 16.
So it's going to give us our hex value and then substring returning back the last six characters of
our hex value, which is going to give us a temporary background color.
And lastly, let's apply that background color.
So just as we did with before, where we're sending a background color, we've got our temp color available
for that element.
So see what happens now.
And now when I refresh it, so every time I refresh it, our box is actually going to have a different
color.
So that's pretty neat.
And we're ready to move on to the next step where we can introduce some interactivity to that element.
So whenever we hover over this one, let's change the color to red to make that more interesting and
make it more of a game where you have to move your mouse cursor over this ever moving element object.
So that is all still yet to come.
So for now, create the ADD event listener for whatever the dorm content has loaded, create an element.
So using create element method in JavaScript to create this element, add the class of box and you can
apply your own styling to box or you can use the one that I've provided as well.
Then append it to the output element.
That's the same output element that we've been using here as an object.
Create a couple different values.
So we've got an X and Y, so these are going to be the starting coordinates and we can adjust those
using our JavaScript and that's going to come on the upcoming lessons and then also create a random
color.
So this is a really nice short format where we use random math, random, we convert it into a hex value
and then we take the last six characters of it in order to produce a random color value and then set
the background color value to that random color value that we created.
And you're ready to move on to the next step.