1
00:00:00,390 --> 00:00:05,610
Just as we saw earlier, where we can build and add elements dynamically using JavaScript, we're going

2
00:00:05,610 --> 00:00:07,300
to do the same thing in this lesson.

3
00:00:07,530 --> 00:00:13,170
So first of all, let's create our DOT and we're going to add in classes to the elements that we're

4
00:00:13,170 --> 00:00:13,760
building out.

5
00:00:13,920 --> 00:00:18,890
So we need to have little round black dots that we can add to our dates.

6
00:00:19,320 --> 00:00:25,710
So setting the width and the height to twenty five pic's sets looks like a good size using a border

7
00:00:25,710 --> 00:00:28,070
radius to make the round.

8
00:00:28,080 --> 00:00:31,180
If we do 50 percent, that will give us around dot.

9
00:00:31,620 --> 00:00:37,950
We're also going to use display and inline block so that we can stack them next to each other and then

10
00:00:37,950 --> 00:00:40,170
margin give it a little bit of a margin.

11
00:00:40,200 --> 00:00:42,010
So how about margin too?

12
00:00:42,750 --> 00:00:49,860
Also, we're going to set with different backgrounds and black will be four dots that are black and

13
00:00:49,860 --> 00:00:58,890
background and will have white four white dots so we can change the add in a class of black or white

14
00:00:59,070 --> 00:01:03,350
and that will change the background of the dot making it visible or hidden.

15
00:01:03,420 --> 00:01:07,680
So this will just be white and it'll be the same as the background of the dice.

16
00:01:07,980 --> 00:01:15,060
So now going into our JavaScript, this is we need one more thing before we build that out.

17
00:01:15,270 --> 00:01:20,190
And that's we need to create an array that's going to hold how the dice are going to be laid out.

18
00:01:20,430 --> 00:01:22,700
So I'm going to use a multidimensional array.

19
00:01:23,060 --> 00:01:26,220
I going to call it dice and we'll build that out.

20
00:01:26,240 --> 00:01:29,940
So this is an array with multiple arrays inside.

21
00:01:30,090 --> 00:01:33,170
And I want to have the arrays with the positions.

22
00:01:33,420 --> 00:01:35,460
So if we have one, two, three.

23
00:01:35,490 --> 00:01:41,730
So if we look at how a phone is output, where we've got one, two, three, four or five, six, seven,

24
00:01:41,730 --> 00:01:46,860
eight, nine, that gives us the nine possible positions where we might have dice on one.

25
00:01:47,070 --> 00:01:53,670
The position is going to be number five on a two, the position is going to be a dot in position one

26
00:01:53,670 --> 00:01:54,420
and nine.

27
00:01:54,870 --> 00:01:59,010
Next position one, nine and one, five and nine.

28
00:01:59,220 --> 00:02:01,770
So that will give us the way a three looks.

29
00:02:02,340 --> 00:02:03,970
We need to set up a four.

30
00:02:04,140 --> 00:02:05,780
So these are all of the corners.

31
00:02:06,270 --> 00:02:07,780
So those are the corner edges.

32
00:02:08,460 --> 00:02:09,840
Next is the five.

33
00:02:09,990 --> 00:02:14,390
So we've got it kind of going across and including all of the corners.

34
00:02:15,450 --> 00:02:17,450
And then lastly is the six.

35
00:02:17,730 --> 00:02:25,530
So we need to have all of the two side positions covered and outputting all of those points.

36
00:02:25,830 --> 00:02:28,860
So that basically allows us to build our dice.

37
00:02:29,100 --> 00:02:35,790
And next, we need to just simply run through all of these values and see which ones were turning white

38
00:02:35,790 --> 00:02:37,950
and see which ones were turning black.

39
00:02:38,100 --> 00:02:42,480
And we're going to generate all of these elements using JavaScript.

40
00:02:42,660 --> 00:02:49,260
So going down to our builder function, we want to determine which which dirie that we're using.

41
00:02:49,650 --> 00:02:51,900
So we need to select the diary.

42
00:02:52,320 --> 00:02:55,480
So that's the one where we're going to do here using the dice array.

43
00:02:55,890 --> 00:03:00,000
We're taking the value of number and arrays are zero based.

44
00:03:00,000 --> 00:03:01,770
So that's what we need to subtract one.

45
00:03:01,920 --> 00:03:09,560
And for now we can cancel out that diary and we can use that diary in order to generate the dots.

46
00:03:09,990 --> 00:03:14,230
So of course it won't look like anything yet, but we see that we've rolled a four.

47
00:03:14,490 --> 00:03:18,340
So we've got all of the positions where we need the black dots to be in.

48
00:03:18,600 --> 00:03:20,820
So three, five and so on.

49
00:03:21,070 --> 00:03:26,820
So that gives us all of the positions of those dots and the reason that these ones are just showing

50
00:03:26,820 --> 00:03:27,620
up as five.

51
00:03:27,660 --> 00:03:34,500
So this would just be the one item and we can see what the value at the number of value is just by how

52
00:03:34,500 --> 00:03:36,270
many items are within the array.

53
00:03:36,420 --> 00:03:40,650
So that's another thing that is a good indicator of that.

54
00:03:40,650 --> 00:03:45,540
We're on the right track because we do have the number of dots that are going to be black that are going

55
00:03:45,540 --> 00:03:46,420
to be represented.

56
00:03:46,770 --> 00:03:54,210
So next to that, we need to do is we need to build out the the dots and using JavaScript loop, we're

57
00:03:54,210 --> 00:04:00,420
going to create a simple loop and loop through all of the values starting at one and looping through

58
00:04:00,420 --> 00:04:01,990
while X is less than ten.

59
00:04:02,010 --> 00:04:09,390
So going all the way up to nine, incrementing X one by one simple loop to loop through all of the dice

60
00:04:09,390 --> 00:04:13,500
dots, creating a span where this is actually going to be a div.

61
00:04:13,500 --> 00:04:18,720
We could have made it a span as well, but we did set the display properties to inline block.

62
00:04:18,930 --> 00:04:25,020
So we're OK with them aligning create element exactly what we did before creating a brand new div.

63
00:04:25,210 --> 00:04:27,830
Now whatever we had called that object that we created.

64
00:04:28,080 --> 00:04:32,520
So in this case we called it a span, even though it is a div that we created to add to the confusion

65
00:04:33,150 --> 00:04:39,080
setting attribute that we're setting is a class and just like we did before, class of DOT to it.

66
00:04:39,120 --> 00:04:44,630
Next, we need to make check to see if the dy array.

67
00:04:44,640 --> 00:04:46,980
So that's the one that's being output here.

68
00:04:47,370 --> 00:04:52,710
And we're going to use a JavaScript function called includes, which determines whether an array includes

69
00:04:52,710 --> 00:04:56,450
a certain element returning true or false as appropriate.

70
00:04:56,700 --> 00:04:59,940
So using includes we're going to check.

71
00:05:00,080 --> 00:05:08,600
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

72
00:05:08,600 --> 00:05:15,200
that back as a black dot, so we're taking the spane object using class list.

73
00:05:15,380 --> 00:05:19,910
And this is how we add to a class list because we already have an existing class list.

74
00:05:20,060 --> 00:05:21,650
So we want to add it to DOT.

75
00:05:21,770 --> 00:05:25,700
We set it as an attribute and now we want to add to that class list.

76
00:05:26,210 --> 00:05:32,900
We're going to add the class of black, which is going to create a black background for that element.

77
00:05:32,900 --> 00:05:34,580
And that's exactly what we want to happen.

78
00:05:34,820 --> 00:05:38,170
We also need to add in one more rounded bracket there.

79
00:05:38,180 --> 00:05:42,160
And then once we conclude this, we're going to take that div.

80
00:05:42,170 --> 00:05:49,310
So this is the element that we created outside of the loop and we're going to append a child.

81
00:05:49,460 --> 00:05:57,350
So just as we did over here, we're spending a child and the child object name is span to the div and

82
00:05:57,350 --> 00:05:59,300
we're going to be returning the div as normal.

83
00:05:59,310 --> 00:06:00,140
So let's try that out.

84
00:06:00,500 --> 00:06:01,190
So role.

85
00:06:01,460 --> 00:06:02,420
So we get a three.

86
00:06:02,660 --> 00:06:03,650
We get a five.

87
00:06:03,680 --> 00:06:04,610
We get a one.

88
00:06:04,640 --> 00:06:06,390
We got a five and so on.

89
00:06:06,800 --> 00:06:13,490
So essentially we've generating where the dots are appearing on the dice using JavaScript and if you

90
00:06:13,490 --> 00:06:16,850
want to know more about includes within JavaScript.

91
00:06:17,120 --> 00:06:19,670
So that's available at the Mozilla Developer Network.

92
00:06:19,820 --> 00:06:24,410
And you can see that they've got a great example here where we've got an array.

93
00:06:24,440 --> 00:06:25,970
So one, two, three.

94
00:06:26,180 --> 00:06:31,310
And we're checking to see if the array includes two and the return is true.

95
00:06:31,430 --> 00:06:33,950
So when we run the code, we see we've got true.

96
00:06:34,310 --> 00:06:41,000
We can do that on string values as well so we can check to see if includes includes if CAT is available

97
00:06:41,000 --> 00:06:44,330
within that array as one of the values there.

98
00:06:44,480 --> 00:06:45,470
And it is.

99
00:06:45,710 --> 00:06:47,300
So that's where we get true.

100
00:06:47,540 --> 00:06:53,780
And if we search for something that is not available within the array that we get return back false.

101
00:06:54,020 --> 00:06:58,910
So you can go in and try this out and get comfortable with it, because this is a really useful method

102
00:06:58,910 --> 00:07:03,290
in JavaScript when we're working with arrays and try this out for yourself.