In this lesson, we're going to be covering one of my favorite things to do in JavaScript, and that
is to create elements.
So now that we've got our function there, we need a function to launch in order to create those elements
and to create those boxes that are going to be clicked by the user.
So we're going to create a new function, call it my box.
And so this will launch the function we need to create an element, a basic container that's going to
hold that content so we can call it L'il and using the document object within it, there's a method
that's called create element.
So this gives you the ability to create any type of element you want.
In this case, I'm going to be creating a div.
So we're opening up and we've created a div and I can actually console log out that div and when we
refresh it hit start, you can see there's our div that we've created, but it's not on the page yet.
If I want to add it into the page then I need to select where I want to add it.
I've got this object element already ready so I can add it into the game area.
I can append child into that area and then all I need to do is identify that element object that I want
to append.
So let's try that one more time.
And in this case, let's look at what we've got here within the game area.
So nothing yet.
Watch what happens.
Want to hit the start button?
We see that we get our div appears.
So this is the brand new div that we created and of course, nothing in there yet.
We don't see anything on the screen.
But this is how you can create elements within JavaScript.
And so now within this element, we can apply some different formatting if we want to add in a class
to it.
So let's set up a class to house that information.
We can set up a class.
I'll give it a position of relative so we can move it around, set a different type position, left
position, and also I'll do border radius so that we can make it round so it's not going to be squares.
And basically we're going to add in that class into that element.
So you see, the next time we refresh it, we're taking that element object that we just freshly created
using class list and using the ADD function in order to add to the current class list.
So if we don't have any existing class, we can also set attribute class and then add in the box.
So that's another option.
But if you already have existing class values within the div, then you need to add or you could remove
it specifying the class name.
So again, pay attention to the game area hit start and we see that we've got our element here with
the class of box.
And again, not a whole lot happening within it quite yet.
So we're going to set a bunch of other values into it.
We can do things like we can take the background, we can apply style properties to it.
So we've got a bunch of options here.
And you can see that Brackets is really giving me a whole list of tons of different options that I have.
And the one that I want to use is background color.
So let's set a background color of red to it.
We also see that we don't actually see this element.
So we're going to apply a style and this is a style of width so we can actually see the value and we
can set it as one hundred picks for now, also element style.
So if we've got a width, we should also set a height so we can definitely see it.
So it'll be one hundred picks by one hundred picks.
So nice square box.
Let's try that out.
Refresh start and while we see our circle and we can also move it around a bit because we did apply
a position property of relative.
And of course you can actually add these properties in so you don't necessarily even need to set a class
to it.
You can add them in as properties if you wanted to.
So I'll leave that class of box.
But if we want to do things like setting the border radius, we can add that in as well.
So style and then doing border radius.
So this one's a long one.
It's a border radius and then whatever the border radius is equal to.
So if we wanted it to equal 50, we can add it in that way.
And if I get rid of it here, you're going to see that nothing is going to change because now we're
adding it within JavaScript and we can also add in the position if we wanted to, so we could take that
element, style and position.
So we've got position there and here we can type in a relative and we can even get rid of that so we
can completely leave box empty and have our position and have all of the properties set there.
So I'll leave it like this.
And ones that aren't changing, you could add into as a class and then adding in the class.
So it saves you a little bit on the JavaScript.
And if you want to practice the JavaScript, this is a great way to practice JavaScript.
So what else do we need?
We need a style.
We can also set a position so we've got our top position.
So this, again, is a pixel position so we can set one hundred and fifty picks, position, element
style and also let's set a left position that should be an equal side so we can just do fifty for this
one.
And what we want to do is we want to randomize these.
So right now it's always appearing in the same spot.
If I go into that element and if I take a closer look at what's being applied to it.
So we see that we've got quite a bit of styling being applied to it.
So we've got our background color, red width, one hundred height, one hundred border radius, 50
percent position, relative top 150 left 50.
And remember, the way that styles work is even if the box has some default values, when you apply
the style attribute, that's going to overwrite the class values.
So even if you've got content in the box, wherever you've got some default content in there, you can
always set these using JavaScript and that will propagate over it because this is within the style property.
So the next thing that we want to do is we want to randomize some of these values.
So it's not always showing up exactly in the same spot.
And that's why it was a good thing that the last lesson we created this random Isar, so we can really
easily add in random values so we can do something like random.
And if we wanted a random number to one hundred, we could do that.
So now when I hit start, you're going to see that it's getting a random value.
So we might not want to do random.
One hundred, we might want to do something like random 30 and then plus 70, so that will give us a
more rounded shape.
So it's not always 100 percent rounded.
And now when we inspect it, you can see that the value that what's been applied to it.
So we've got width of ninety nine.
So that was that random value that was being returned.
This time we have a width of 75.
So it's always different and it's always changing and you can adjust and tweak these as needed so you
can do the same thing for the other values and just randomizing them a little bit.
You don't have to randomize the boardriders unless of course, you want you can randomize that one to
50 plus the percentage sign.
So this is a string.
And with JavaScript, whenever you're adding a number to a string, it automatically turns into a string
and it's expecting a string on that end.
They've got some really weird things happening here.
So for some reason, it's really long and that's because I left that hundred within the height.
So let me get rid of that these ones as well.
So get rid of the 150 in here as one fifty and that can be 50.
And this will just be randomly positioned now so we can go in and start going in Head Start.
And you can see that these are appearing in different positions.
They're a little bit different shapes.
Coming up next, we need to make some random colors and that's what we're going to do, doing in the
upcoming lesson.
So go ahead and add this into your project, have some fun with it.
Update the style properties of the element, create the element dynamically, update the style properties.
You can use the random function that we created in the last lesson and then append it to your game area
in order to create and start that gameplay.