We don't have a whole lot happening within our game quite yet, we've got a start button start button
disappears and we run a block of code in the function called make item.
Let's set up some more additional functionality.
So we want to get the boundary of our main container.
So getting that container object, we're going to use get bounding client rectangle.
This is a method that gives you the parameters of an element.
And if I put into the console, you're going to see that whenever we hit start, we get the bounding
client rectangle.
So this is the full space that we have to work with.
We've got the bottom, the height, the left, the right, the top and the width.
So this is that whole gameplay area.
Next, we need to create an element and create generically, randomly create an element and position
it somewhere on the page.
So using document element, create element, creating a div.
And then for this we're going to set all of its properties dynamically with JavaScript.
So adding in to that div, updating its style attributes, we can set a position of absolute so that
will allow us to position that element and console, log it out so that we can see the element as we're
constructing it.
So there we've got our elements, we've got a style of position, absolute, and that means that we
need to also position it.
So we need to do a left position.
And this can be math, random and the random value.
When we take both random, we need to multiply it by the number that we want to randomize it by.
And we already have some values that we can utilize here that are available within our boundary object.
So taking that boundary width plus picks, that will give us a position, a left position that we can
use and then also taking boundary height.
So this is all coming from that boundary object that we're showing here on the right hand side.
And this can be boundary top.
So that will set the vertical position.
We're setting the horizontal position and we also need to set some random width and height for that.
So doing a style and width.
So we're generating all of the properties, the attributes, the style attributes that are available
for this element dynamically within this function.
So anywhere from Tensas started out at 40 and we'll have random Isar of 10.
So it could be anywhere from 40 to 50 wide and we'll do the same for this could be as well anywhere
from 40 to 50 wide.
So the height and the width will change.
Position of left and right will change.
Also, let's set up a border radius to it.
So again, using that style value, we can set a border radius.
We've got a lot of options within JavaScript in order to set the same thing that you would expect to
see when you are creating that within your success as well.
We can also set our cursor so the cursor value, so setting that to a pointer, it's probably is easier
to do it in.
But of course this is a JavaScript course.
So we want to really focus on JavaScript.
Another one that we want to do is maybe do a background color.
So this is expecting a hex value.
So make sure that we put the hash in front and we're going to generate a random hex value number.
So doing math, random and then two string and base 16 and then we're going to substring that minus
six.
So that will return back a hex value.
So show you how that works within the console.
So if we take math random, we get a decimal zero dustbowl and a whole bunch of digits after that.
If I take math random and if I do to string C, that turns it into a string and I can change the base
for the string.
So if I do base 16, it's going to use it's going to create a hex value for the string.
And so now all we need to do is chop off.
We only need the last six characters and that's where we can utilize substring.
So applying one more method to there and that's the substring.
And we want to take back the last six, which effectively generates a random hex value.
And all we need to do is add in the hash and that's going to give us a random background color.
So that's how that formula works.
That's a really effective way to generate a random color within one line of code.
Also adding in a border so border, we can set it up just as we would with our regular access, or we
can set border solid block to make sure we get all of those parameters in there and also want to track
in when the start time is so whenever our element gets created, whatever value for that.
And then lastly, let's add it to the visible area.
So using container append child, we can append that div to the main container element.
So that will make it visible on the page.
So let's refresh and start game.
And then there we've got our element showing up and popping up.
So coming up next, we need to make this clickable so that we can track how long it takes the user to
click the element as it shows up.
So that's coming up next.
So go ahead and practice applying style properties to your element that you've just created using create
element.
Add in some objects to it and also take a look at using math random because it gives you the ability
to randomize some of these values and make them different all the time.
So now we can see that these are elements that are popping up are always going to look different.
And you could play around with some of these numbers to make them bigger or smaller, to really see
what different effects you can get out of the bathroom.
So coming up next, we're going to add interaction to that element.