Just as we saw earlier, where we can build and add elements dynamically using JavaScript, we're going
to do the same thing in this lesson.
So first of all, let's create our DOT and we're going to add in classes to the elements that we're
building out.
So we need to have little round black dots that we can add to our dates.
So setting the width and the height to twenty five pic's sets looks like a good size using a border
radius to make the round.
If we do 50 percent, that will give us around dot.
We're also going to use display and inline block so that we can stack them next to each other and then
margin give it a little bit of a margin.
So how about margin too?
Also, we're going to set with different backgrounds and black will be four dots that are black and
background and will have white four white dots so we can change the add in a class of black or white
and that will change the background of the dot making it visible or hidden.
So this will just be white and it'll be the same as the background of the dice.
So now going into our JavaScript, this is we need one more thing before we build that out.
And that's we need to create an array that's going to hold how the dice are going to be laid out.
So I'm going to use a multidimensional array.
I going to call it dice and we'll build that out.
So this is an array with multiple arrays inside.
And I want to have the arrays with the positions.
So if we have one, two, three.
So if we look at how a phone is output, where we've got one, two, three, four or five, six, seven,
eight, nine, that gives us the nine possible positions where we might have dice on one.
The position is going to be number five on a two, the position is going to be a dot in position one
and nine.
Next position one, nine and one, five and nine.
So that will give us the way a three looks.
We need to set up a four.
So these are all of the corners.
So those are the corner edges.
Next is the five.
So we've got it kind of going across and including all of the corners.
And then lastly is the six.
So we need to have all of the two side positions covered and outputting all of those points.
So that basically allows us to build our dice.
And next, we need to just simply run through all of these values and see which ones were turning white
and see which ones were turning black.
And we're going to generate all of these elements using JavaScript.
So going down to our builder function, we want to determine which which dirie that we're using.
So we need to select the diary.
So that's the one where we're going to do here using the dice array.
We're taking the value of number and arrays are zero based.
So that's what we need to subtract one.
And for now we can cancel out that diary and we can use that diary in order to generate the dots.
So of course it won't look like anything yet, but we see that we've rolled a four.
So we've got all of the positions where we need the black dots to be in.
So three, five and so on.
So that gives us all of the positions of those dots and the reason that these ones are just showing
up as five.
So this would just be the one item and we can see what the value at the number of value is just by how
many items are within the array.
So that's another thing that is a good indicator of that.
We're on the right track because we do have the number of dots that are going to be black that are going
to be represented.
So next to that, we need to do is we need to build out the the dots and using JavaScript loop, we're
going to create a simple loop and loop through all of the values starting at one and looping through
while X is less than ten.
So going all the way up to nine, incrementing X one by one simple loop to loop through all of the dice
dots, creating a span where this is actually going to be a div.
We could have made it a span as well, but we did set the display properties to inline block.
So we're OK with them aligning create element exactly what we did before creating a brand new div.
Now whatever we had called that object that we created.
So in this case we called it a span, even though it is a div that we created to add to the confusion
setting attribute that we're setting is a class and just like we did before, class of DOT to it.
Next, we need to make check to see if the dy array.
So that's the one that's being output here.
And we're going to use a JavaScript function called includes, which determines whether an array includes
a certain element returning true or false as appropriate.
So using includes we're going to check.
To see if the value of whatever we're on X is there, and if it is that we know that we want to return
that back as a black dot, so we're taking the spane object using class list.
And this is how we add to a class list because we already have an existing class list.
So we want to add it to DOT.
We set it as an attribute and now we want to add to that class list.
We're going to add the class of black, which is going to create a black background for that element.
And that's exactly what we want to happen.
We also need to add in one more rounded bracket there.
And then once we conclude this, we're going to take that div.
So this is the element that we created outside of the loop and we're going to append a child.
So just as we did over here, we're spending a child and the child object name is span to the div and
we're going to be returning the div as normal.
So let's try that out.
So role.
So we get a three.
We get a five.
We get a one.
We got a five and so on.
So essentially we've generating where the dots are appearing on the dice using JavaScript and if you
want to know more about includes within JavaScript.
So that's available at the Mozilla Developer Network.
And you can see that they've got a great example here where we've got an array.
So one, two, three.
And we're checking to see if the array includes two and the return is true.
So when we run the code, we see we've got true.
We can do that on string values as well so we can check to see if includes includes if CAT is available
within that array as one of the values there.
And it is.
So that's where we get true.
And if we search for something that is not available within the array that we get return back false.
So you can go in and try this out and get comfortable with it, because this is a really useful method
in JavaScript when we're working with arrays and try this out for yourself.