1
00:00:00,300 --> 00:00:05,340
We're going to start with a little bit of success because we are going to be adding in classes as we're

2
00:00:05,340 --> 00:00:08,700
building out the elements, so create another class.

3
00:00:08,730 --> 00:00:14,250
I'm going to call it pop, give it a border so that we can see the different elements that we're adding

4
00:00:14,250 --> 00:00:14,460
in.

5
00:00:15,000 --> 00:00:22,620
And I'm going to color it kind of a light grayish color setting with all of the elements and setting

6
00:00:22,620 --> 00:00:23,400
the height of it.

7
00:00:23,790 --> 00:00:31,490
Also, we're going to display inline block so that their one next to another texta line so I can just

8
00:00:31,500 --> 00:00:32,920
text align center.

9
00:00:32,940 --> 00:00:39,330
We can also use a vertical A and so the vertical line will be middle so that whatever text we have is

10
00:00:39,330 --> 00:00:45,150
sitting in the middle and we are going to be using icons, adding in a color for the content within

11
00:00:45,150 --> 00:00:45,610
the block.

12
00:00:46,140 --> 00:00:48,900
I want to make it a fairly large size.

13
00:00:49,350 --> 00:00:56,240
So font size, we're going to use two M for fairly large font and then of course we'll set a font family.

14
00:00:56,550 --> 00:01:02,520
And how about we use fantasy's so we have something a little bit more curvy and we think also I'm going

15
00:01:02,520 --> 00:01:04,570
to be adding in a class of roll.

16
00:01:04,770 --> 00:01:07,320
So this is going to indicate each and every row.

17
00:01:07,530 --> 00:01:12,750
So this one is going to have a display of block so that we can distinguish between the different rows

18
00:01:12,900 --> 00:01:16,410
as we build them going up to our game data.

19
00:01:16,420 --> 00:01:23,330
So once we've got our game data in and ready to go, this is where we can build out our board.

20
00:01:23,370 --> 00:01:24,660
So let's set up a function.

21
00:01:25,020 --> 00:01:26,630
We'll call it a build board.

22
00:01:27,840 --> 00:01:30,600
So this is going to be where we build out our game board.

23
00:01:31,350 --> 00:01:34,290
So going down just below there, set up another function.

24
00:01:34,830 --> 00:01:43,440
So this is our placeholder function and it's going to be building out our game board just to make sure

25
00:01:43,440 --> 00:01:45,620
that everything is still working properly.

26
00:01:45,630 --> 00:01:48,240
Go into the console and we see that we are ready.

27
00:01:48,270 --> 00:01:53,070
So this is the point where we're ready to build the game board and we're going to build it out onto

28
00:01:53,070 --> 00:01:53,920
the hidden page.

29
00:01:54,450 --> 00:01:56,400
So let's set up rules.

30
00:01:57,420 --> 00:02:01,260
And we could have used CONSED as well, because this number isn't going to be changing.

31
00:02:01,800 --> 00:02:06,600
But for now, let's just set this up with rows in case we do want to make a little bit more dynamic.

32
00:02:06,810 --> 00:02:08,460
We might want to update these.

33
00:02:08,490 --> 00:02:14,630
So depending, again, on what we want to do and I'm going to start the count at zero.

34
00:02:14,880 --> 00:02:17,800
So this is going to count how many elements that we're going to have.

35
00:02:17,940 --> 00:02:24,720
Let's loop through and also let's make an adjustment to the play area so that this is fully dynamic

36
00:02:24,960 --> 00:02:31,450
and it will scale the width of the game area to be columns.

37
00:02:31,450 --> 00:02:36,450
So whatever number of columns we had for we're going to multiply it by 100 because we had 100 picks

38
00:02:36,780 --> 00:02:37,440
for those.

39
00:02:37,440 --> 00:02:41,490
And then we're going to do calls by to.

40
00:02:43,810 --> 00:02:54,880
And we can also center it as well, so play area and using game style margin and we set margin to auto,

41
00:02:55,210 --> 00:02:57,360
that's how you can center an element.

42
00:02:57,730 --> 00:03:05,650
We can also go up and we can add in a board around the game area and we're going to actually be removing

43
00:03:05,650 --> 00:03:06,550
this later on.

44
00:03:06,550 --> 00:03:09,970
But this is just so that it is visible where the gameplay is.

45
00:03:09,980 --> 00:03:13,350
So let's refresh and just make sure that we do have something.

46
00:03:13,720 --> 00:03:16,030
So we've got something that's built there.

47
00:03:16,030 --> 00:03:18,010
And of course, we haven't added in anything.

48
00:03:18,220 --> 00:03:24,000
And once we add in all the different cells, then we're going to actually see it expand and extend.

49
00:03:24,220 --> 00:03:28,000
So far, for right now, there's not a whole lot happening and not a whole lot visible.

50
00:03:28,240 --> 00:03:36,430
If we do decrease the size of the paint, you can see that it is centered and it is 400 pics centered.

51
00:03:36,430 --> 00:03:39,880
So I had it on a really large size so I can shrink that back down.

52
00:03:40,570 --> 00:03:44,500
So that's what we want to do, is we want to build out all of those elements.

53
00:03:45,700 --> 00:03:49,570
So let's let y we're going to use a series of loops here.

54
00:03:50,170 --> 00:03:55,500
So looping while Y is less than columns and that's the value that we've set above.

55
00:03:55,930 --> 00:03:59,440
So of course making it as dynamic as possible.

56
00:04:00,100 --> 00:04:04,710
So as we loop through and we've got another loop that we're going to set inside.

57
00:04:04,720 --> 00:04:10,930
So this is going to be the x axis and we're going to loop through while X is less than the number of

58
00:04:10,930 --> 00:04:14,650
rows and we do have that set two, four, and then increment that.

59
00:04:14,860 --> 00:04:17,080
And then this is where we're going to build out the cells.

60
00:04:18,430 --> 00:04:23,070
So next thing that we want to do is we want to set up our main containing row.

61
00:04:23,620 --> 00:04:28,720
So let's set up a main div using document.

62
00:04:29,140 --> 00:04:33,900
And this is JavaScript again, how you can create an element if you want, within your page.

63
00:04:33,910 --> 00:04:38,770
So we use the crit element method and then we specify the element that we want to create.

64
00:04:38,770 --> 00:04:45,850
And in this case we want to create a div and then we can use that object that we just created and we

65
00:04:45,850 --> 00:04:47,830
can set an attribute to there.

66
00:04:48,190 --> 00:04:52,360
So this is where we're going to add it in and we're going to add in a class into it.

67
00:04:52,960 --> 00:04:56,260
And the class that we want it to add in is role.

68
00:04:56,530 --> 00:04:57,570
So this is another way.

69
00:04:57,820 --> 00:04:59,410
So we noticed that earlier.

70
00:04:59,410 --> 00:05:04,720
We were adding in classes, we were using class list and so you can use that as well.

71
00:05:05,020 --> 00:05:10,590
But if I only have the one attribute, then I can just use that attribute and set it as class.

72
00:05:11,170 --> 00:05:13,420
Let's also set a width for it.

73
00:05:13,810 --> 00:05:23,350
So div mean and using style, doing width and our width of it is going to be.

74
00:05:25,290 --> 00:05:28,730
The same thing as the width of the gameplay area.

75
00:05:30,220 --> 00:05:31,420
So we don't have to duplicate it.

76
00:05:31,450 --> 00:05:37,480
We could go to 100 percent, but I'll leave that in there and the next thing that we want to do is we

77
00:05:37,480 --> 00:05:40,860
want to create a div using the same format.

78
00:05:40,870 --> 00:05:46,930
So document create element and we're going to create another div.

79
00:05:47,710 --> 00:05:51,830
And then this is the div that we're actually going to have our elements within.

80
00:05:51,910 --> 00:05:59,920
So we're using div and that same set attribute adding in a class and the class that we're adding and

81
00:05:59,920 --> 00:06:00,870
is pop.

82
00:06:00,880 --> 00:06:08,380
So it's the one that we just created will increment count by one, and for now we can set the entire

83
00:06:08,380 --> 00:06:12,420
text of that element to the value of count.

84
00:06:12,430 --> 00:06:13,780
So that's where we needed that count.

85
00:06:14,290 --> 00:06:22,270
And we can also set div count to the value of count so that we know which div was clicked so we can

86
00:06:22,540 --> 00:06:23,820
hide a value in there.

87
00:06:24,100 --> 00:06:30,820
And then lastly, in order to append it to our main element that we created outside of the first outside

88
00:06:30,820 --> 00:06:36,700
of the X axis, on the Y axis, we're appending the child of div.

89
00:06:37,480 --> 00:06:39,900
So using that div object that we just created.

90
00:06:40,270 --> 00:06:48,820
And then lastly we've got our play area and the main game play area and using that same append child

91
00:06:48,820 --> 00:06:52,080
method, we're going to add in the main div.

92
00:06:52,420 --> 00:06:53,250
So let's try that out.

93
00:06:53,620 --> 00:06:59,110
So we should get a four by four grid, all of the cells numbered and in fact we do.

94
00:06:59,830 --> 00:07:01,840
So go ahead and set this up.

95
00:07:01,840 --> 00:07:07,660
But I know this was a rather long lesson, but it is an important one because it's going to show you

96
00:07:07,690 --> 00:07:13,960
how you can construct elements using JavaScript and how you can also construct a grid.

97
00:07:13,970 --> 00:07:15,610
So we made a dynamic.

98
00:07:15,850 --> 00:07:21,790
So in case we change the number of columns to six columns and I just noticed that we do have an error.

99
00:07:22,120 --> 00:07:23,260
So let me update this.

100
00:07:23,270 --> 00:07:25,260
That should be column and this should be rose.

101
00:07:25,630 --> 00:07:28,870
That's what's always a good idea to test it out and see what happens.

102
00:07:29,110 --> 00:07:32,320
So now we've got the six columns, we still have the four rows.

103
00:07:32,500 --> 00:07:36,710
If I adjust this to two rows, just make sure that that is working.

104
00:07:36,730 --> 00:07:41,950
So now we've got the two rows, six columns, so fully dynamic change back to four.

105
00:07:42,490 --> 00:07:47,820
And again, always a good idea to try it out and make sure things are working as intended.

106
00:07:48,160 --> 00:07:56,590
So go ahead and use create element to create a div and also update the style of each one of these elements.

107
00:07:56,680 --> 00:08:02,650
And then you can also go over to inspect and just make sure that you are getting that dynamic style

108
00:08:02,800 --> 00:08:05,140
being set using JavaScript.