Hey, I got you to do the hard part, last lesson, so this lesson is the easy part because calculating
where you want to position the element is a little bit more difficult than creating the element.
We've already seen how we can create those elements.
So now all we need is a function and we're going to pass in the coordinates the X and Y coordinates
and pass that in and create the element at that particular spot.
And we're going to create whatever number we've set up within the set up of bricks that we want to create
so we can just call this create brick and we're passing in the value of role, which is the position.
So it's got the X and the Y position within that object and then creating the function that's going
to create the brick and passing in.
So maybe we can call it position because it's got X and Y included within it.
So creating an element.
And this is just a regular d'Hiv, so same thing that we did before, and we did quite a few of these
elements that we've already created, so creating a div dynamically and setting some attributes.
So we didn't do this quite yet.
So there's a number of ways to add a class.
And in this case, we want to add the class of Bryk to that.
And you can also do it as class list.
So either way, and if you actually want to add more than one class, this is a nice and quick and easy
way.
You could just colma separate out all the different classes that you wanted to add in.
So we're adding in that class and this is the one from the very first lesson where we were going through
all the costs were created, that brick class.
So adding that into the brick.
So we've got some automatic styling and making it a little bit easier.
And also we want to pick a random color for the background so that they all look different.
So background, color and using math format, we can create a random color so we can equal this.
And colors are going to start with a hash, of course, and using math random.
I'll show you really quick and easy way to create some random values and then opening this up in the
browser.
So we'll do it in the browser first.
So using math random, we know that math random will return a number.
So zero decimal and a bunch of digits after that.
So we start with math, random and we're going to turn this into string.
And the reason we're converting it into a string is that this gives us the ability to apply string methods.
And once we've converted into string, we can actually convert into a Haxby string.
So that's the base.
So zero to nine.
And then you've got ABCDE, PEF, and if you're familiar with colors, then you're going to know that
the colors are hex based.
So they've got the values all the way up from zero to 255.
But in hex string it's only the two characters.
So it's either a number or ABCDE PEF and that gives us all the values that we need for the colors.
So now that we've got the math random to string, we use another string method which is substring and
subtract out the last six values.
So we're going to take the last six values that are available within the string and use that because
we always need six to be returned back, four color.
So returning that back and that gives us a random color.
So placing that formula here or we can actually even create a function if we want it to random color
and just simply do a return on that.
So that will make it a little bit cleaner.
And also I'm going to include the hash there so we don't have to worry about that.
So this will give us a quick formula for a random color.
And whenever we want a random color, we just add in the function there.
So adding in random color and then within the container will depend on the child so that we can actually
see the element that we just created because that makes it a little bit easier to create those elements.
So let's see what happens.
We're hitting start and you see we've created our first brick, so we want to create a bunch of bricks
and we want to position them.
So if you go to inspect here, you're going to see that we actually did create all the bricks, but
we created the one on top of the other.
So that's why we only see the one, because we need to use the position value.
And of course, that was the difficult part where we needed to position those and we took care of that
the last time.
So now it's just a matter of applying it within the style properties.
So adding that in and let's create the inner H, we can create some inner tech's content as well.
And that's another number that we could pass in into the role object.
So as we update the role, we can update whatever the value.
So now we're getting our role count so position so we can add in and we can count all of the bricks.
And then lastly, of course, to set the style properties so we can actually see them.
So we've got a left position.
So using the position of X and these aren't moving around.
So we just need to position them.
And then top position is going to be the the the horizontal and the don't forget to always to add the
picks to it.
So let's see what happens.
So refresh and once we start it builds out all of our grid.
And actually this should be X the should not this num it's not the total, it's the count incrementing
count.
So start at zero.
One, two, three, four, five, six, seven, eight, nine, twenty seven.
And this in this case we actually ended up with too many bricks.
So once I start the game you can see it's a lot better here.
So maybe I'll bring the amount of bricks that we're creating down and we'll make an adjustment for that
later on so that we can account for it when we're running out of space, so that we can start creating
bricks when we're running out of space on the smaller screens.
So we can take that into consideration later on and.
For this position, I want to add one, because I don't like to start with zero, so let's do a refresh
start game.
So we've got one to 10.
So we created the ten bricks and they're all nice and colorful, random colors using that random color.
So coming up next, will take care of that and we'll tweak and adjusted to make sure that we have a
way to break out of our loop if we're encountering if the exposition or roll exposition has gotten too
large that we want to break out of this.
So I'll show you how to do that.
Coming up next.