We're going to start with a little bit of success because we are going to be adding in classes as we're
building out the elements, so create another class.
I'm going to call it pop, give it a border so that we can see the different elements that we're adding
in.
And I'm going to color it kind of a light grayish color setting with all of the elements and setting
the height of it.
Also, we're going to display inline block so that their one next to another texta line so I can just
text align center.
We can also use a vertical A and so the vertical line will be middle so that whatever text we have is
sitting in the middle and we are going to be using icons, adding in a color for the content within
the block.
I want to make it a fairly large size.
So font size, we're going to use two M for fairly large font and then of course we'll set a font family.
And how about we use fantasy's so we have something a little bit more curvy and we think also I'm going
to be adding in a class of roll.
So this is going to indicate each and every row.
So this one is going to have a display of block so that we can distinguish between the different rows
as we build them going up to our game data.
So once we've got our game data in and ready to go, this is where we can build out our board.
So let's set up a function.
We'll call it a build board.
So this is going to be where we build out our game board.
So going down just below there, set up another function.
So this is our placeholder function and it's going to be building out our game board just to make sure
that everything is still working properly.
Go into the console and we see that we are ready.
So this is the point where we're ready to build the game board and we're going to build it out onto
the hidden page.
So let's set up rules.
And we could have used CONSED as well, because this number isn't going to be changing.
But for now, let's just set this up with rows in case we do want to make a little bit more dynamic.
We might want to update these.
So depending, again, on what we want to do and I'm going to start the count at zero.
So this is going to count how many elements that we're going to have.
Let's loop through and also let's make an adjustment to the play area so that this is fully dynamic
and it will scale the width of the game area to be columns.
So whatever number of columns we had for we're going to multiply it by 100 because we had 100 picks
for those.
And then we're going to do calls by to.
And we can also center it as well, so play area and using game style margin and we set margin to auto,
that's how you can center an element.
We can also go up and we can add in a board around the game area and we're going to actually be removing
this later on.
But this is just so that it is visible where the gameplay is.
So let's refresh and just make sure that we do have something.
So we've got something that's built there.
And of course, we haven't added in anything.
And once we add in all the different cells, then we're going to actually see it expand and extend.
So far, for right now, there's not a whole lot happening and not a whole lot visible.
If we do decrease the size of the paint, you can see that it is centered and it is 400 pics centered.
So I had it on a really large size so I can shrink that back down.
So that's what we want to do, is we want to build out all of those elements.
So let's let y we're going to use a series of loops here.
So looping while Y is less than columns and that's the value that we've set above.
So of course making it as dynamic as possible.
So as we loop through and we've got another loop that we're going to set inside.
So this is going to be the x axis and we're going to loop through while X is less than the number of
rows and we do have that set two, four, and then increment that.
And then this is where we're going to build out the cells.
So next thing that we want to do is we want to set up our main containing row.
So let's set up a main div using document.
And this is JavaScript again, how you can create an element if you want, within your page.
So we use the crit element method and then we specify the element that we want to create.
And in this case we want to create a div and then we can use that object that we just created and we
can set an attribute to there.
So this is where we're going to add it in and we're going to add in a class into it.
And the class that we want it to add in is role.
So this is another way.
So we noticed that earlier.
We were adding in classes, we were using class list and so you can use that as well.
But if I only have the one attribute, then I can just use that attribute and set it as class.
Let's also set a width for it.
So div mean and using style, doing width and our width of it is going to be.
The same thing as the width of the gameplay area.
So we don't have to duplicate it.
We could go to 100 percent, but I'll leave that in there and the next thing that we want to do is we
want to create a div using the same format.
So document create element and we're going to create another div.
And then this is the div that we're actually going to have our elements within.
So we're using div and that same set attribute adding in a class and the class that we're adding and
is pop.
So it's the one that we just created will increment count by one, and for now we can set the entire
text of that element to the value of count.
So that's where we needed that count.
And we can also set div count to the value of count so that we know which div was clicked so we can
hide a value in there.
And then lastly, in order to append it to our main element that we created outside of the first outside
of the X axis, on the Y axis, we're appending the child of div.
So using that div object that we just created.
And then lastly we've got our play area and the main game play area and using that same append child
method, we're going to add in the main div.
So let's try that out.
So we should get a four by four grid, all of the cells numbered and in fact we do.
So go ahead and set this up.
But I know this was a rather long lesson, but it is an important one because it's going to show you
how you can construct elements using JavaScript and how you can also construct a grid.
So we made a dynamic.
So in case we change the number of columns to six columns and I just noticed that we do have an error.
So let me update this.
That should be column and this should be rose.
That's what's always a good idea to test it out and see what happens.
So now we've got the six columns, we still have the four rows.
If I adjust this to two rows, just make sure that that is working.
So now we've got the two rows, six columns, so fully dynamic change back to four.
And again, always a good idea to try it out and make sure things are working as intended.
So go ahead and use create element to create a div and also update the style of each one of these elements.
And then you can also go over to inspect and just make sure that you are getting that dynamic style
being set using JavaScript.