How's your game coming along?
Are you able to produce the different roles, clickable elements and core structure of the game, so
hope you're able to produce the same type of output as I have and you can also customize it as needed.
And it is important to understand, especially when you're working on JavaScript in the dorm, how to
construct the elements and how to do the proper calculations so you can move the elements around the
page as needed.
So next thing we want it to do is construct the site menu elements.
So we already set up a rate to hold that value.
And this is a global value that's going to be held.
And this is essentially we've constructed this so that we can hold a bunch of elements so we don't always
have to select them using the document object.
So within the Val X and you see that as we loop through the values of X, we're going to be able to
set a new value for Val X. And this is going to correspond with the document that we're creating, the
document object that we're creating.
So creating an element.
And once we remove it from here, then we'd have to re-establish the connection.
So sometimes that's a little bit more difficult.
So the easiest way is just to create the variable object and add it into the array as we're constructing
it.
So just as we used make her, we're creating an element here and then we're going to use that same one
and add a class list and adding in a class of side value.
And we don't know which side we want it to listed on quite yet.
And just going back into our side values, into our success, as we do need this in order to present
the content and can be margin auto position is going to be absolute because we're positioning it on
the within the container and we're just going to do all the calculations of it.
So these are going to be the values so that they show up on the slide so we can set them as a width
of 100 picks.
And of course, you can adjust these as needed and I'll give it a border as well.
Text align center.
And how about with set font size to one point five and border radius, which is always a nice touch
to have a little bit of rounded corner to it.
So going back into the JavaScript, so it was quick.
Now that we've got a style that we're adding in called the side value so it can continue with constructing
the way that this is going to be looking and presenting.
So we also need again, they need that side value object that we just created and setting in some text
content.
And the content of the text that we want to place is going to be Val X..
And notice that we're not using Val to we're using vowels because we want to have all of those numbers.
So it's actually going to match up, even though we're setting them differently from the different arrays,
because we want to have this one in order.
We don't want to show the ones that are actually hidden under the cases.
So that's why we're setting it up as the vowels.
So this is the text content of the element.
And we also did already the all the calculations for where we're positioning that.
And we are going to have to have one more calculation where we check to see if it's flipping sites and
we're going to use the left horizontal where we calculate it from the top.
And don't forget the picks.
Sometimes when we are placing this, we do forget the picks.
And another style value that we want it to apply is the top position.
And this is the important one, because this one is going to be adjusting.
And we already calculated the starting position.
We need to increment the side top.
So adding 40 to it.
And I got to just make one little adjustment there because I've called it side vowels with an S, and
for now we're going to do all left side append child.
So the same thing that we did for the main object where we can append the child.
So refresh start.
So there's all the values, but we do want them to switch sides.
So you see what I mean, where we've got all of those values that are available values.
And then when we click the case, we want them to disappear from here.
So if we're on less than that, then we're going to put it on the left side.
And if we're greater than that, we're in append it to the right hand side and right side, append child.
And we start to add in one more condition.
And this is going to be also checking to see if we need to switch sides and depending on if we need
to switch sides.
And this is going to be taking the length of X the same thing.
And if we do switch sides, we're only looking for an equal value.
And that's why we need to make sure that we math around this value because we only want to do this once,
whereas the other condition, we want to do it every time when we're checking to see where it's going
to get deposited.
This time we only want to do it one time and we're going to reset the site top position.
So it's going to place it right at the top.
And we're also going to reset the left horizontal position.
To whatever the original was, and we need to take whatever that initial campsite left us, and that's
where we used and we got the right side value.
So we need to take that initial temp site left position the topside width to it.
So this is taking that starting position and resetting that starting position.
So whatever that is from that that value that we picked up from the get bounding client rectangle.
So now when we refresh, you can see that we're loading all of those values improperly into the game.
So, again, we do a quick refresh and you can see these get loaded properly.
We might want to make some style adjustments.
We want to make them maybe a slightly a little bit larger.
So setting the border color back to easy.
And now we've built out our game board and we've got it all being displayed out.
And we can also see which element was being clicked by clicking the various cases.
And we're ready to move on to the next step where we can go back into the game logic and make sure that
you have something similar to what I've got displayed.
And you're going to be ready to move on to the next lesson.
And before we conclude, I actually want to move the ten over onto the right hand side and the way to
do that.
So before we do that calculation for the side, the different side values, and let me just do a refresh
on this and start game.
We want to move over to the right hand side.
So this is where we can make this update and place this condition right after we're setting the values
and before we're actually setting the style properties.
So that will position it on the right hand side as expected.
So now we've got the nice evenly split and this is all dynamic how we're constructing the gameboard.