1
00:00:00,470 --> 00:00:06,170
This lesson, we're going to be using JavaScript to create our game board dynamically with code.

2
00:00:07,420 --> 00:00:13,030
We're going to need a listing of colors, so that's going to be an array that's going to contain all

3
00:00:13,030 --> 00:00:16,330
of the colors of the elements that we want it to create.

4
00:00:17,520 --> 00:00:25,770
So we've got red and there's no particular order to this green and yellow.

5
00:00:26,860 --> 00:00:32,370
And we're also going to use these values as setting the color backgrounds as well.

6
00:00:33,370 --> 00:00:39,340
Adding in one more event, listener, so we've got the document object and what the window object.

7
00:00:39,340 --> 00:00:43,540
So that's what also contains the document objects also built within the browser.

8
00:00:43,750 --> 00:00:46,060
You can add event listeners to that as well.

9
00:00:46,300 --> 00:00:49,570
And the listener that we're going to listen for is when it loads.

10
00:00:49,750 --> 00:00:54,180
So when the window object loads, we're going to invoke the function of setup.

11
00:00:54,970 --> 00:01:00,160
So this will be just a named function and let's set up that function now.

12
00:01:01,360 --> 00:01:06,210
So function and for now, console log page loaded.

13
00:01:06,820 --> 00:01:09,280
So we're ready to go with all of the functionality.

14
00:01:09,280 --> 00:01:10,710
We're ready to build out the gameboard.

15
00:01:11,080 --> 00:01:12,750
So we see that the page has loaded.

16
00:01:12,970 --> 00:01:16,330
So at this point we can build up and set up the game board.

17
00:01:16,900 --> 00:01:22,900
So once the page is loaded, set up the game board and starting out with a loop, we're going to build

18
00:01:22,900 --> 00:01:25,300
out four different boxes.

19
00:01:25,300 --> 00:01:30,370
So four different containers that the player can click on, creating an element.

20
00:01:30,820 --> 00:01:36,960
So calling it div or whatever you want to call it, build a function that creates elements on the fly.

21
00:01:37,510 --> 00:01:39,400
So we'll call it Element Factory.

22
00:01:39,850 --> 00:01:43,930
And all we're looking for is the type of element that we want to build.

23
00:01:44,150 --> 00:01:51,280
So we're going to build out for diffs, setting up a function that we've got for Element Factory and

24
00:01:51,280 --> 00:01:53,280
it's passing in the element type.

25
00:01:53,620 --> 00:01:59,470
So it's only to set one parameter and we're creating the elements on the fly using the document create

26
00:01:59,890 --> 00:02:02,170
element method in JavaScript.

27
00:02:02,180 --> 00:02:06,800
And this is where we specify the type of element that we're creating and we're going to return back

28
00:02:06,820 --> 00:02:07,440
that element.

29
00:02:07,870 --> 00:02:13,540
So it's going to give us a more dynamic way to build out the elements so that all we have to do is call

30
00:02:13,540 --> 00:02:19,690
to the function that we've just created and specify the type of element that we want to generate.

31
00:02:20,260 --> 00:02:24,850
And then as we build this out, we've got our main game area object.

32
00:02:25,570 --> 00:02:32,710
So that's represented within this variable representing the element with the class game area.

33
00:02:33,130 --> 00:02:37,810
So we're adding in all of those elements that we're creating, all of those ideas that we're creating

34
00:02:37,810 --> 00:02:38,960
within the game area.

35
00:02:39,370 --> 00:02:46,780
So going back into game area, we're going to use JavaScript method, append child to append that element

36
00:02:46,780 --> 00:02:47,790
to the game area.

37
00:02:47,800 --> 00:02:48,730
So let's see what happens.

38
00:02:49,300 --> 00:02:52,930
And if we go to inspect, I'll make this a little bit bigger.

39
00:02:53,590 --> 00:02:59,080
We can see that within the game area we generated four different diffs.

40
00:02:59,530 --> 00:03:05,530
So the next step is to apply some content into that div in the first one that we want to do.

41
00:03:05,530 --> 00:03:13,210
And probably the most visible one is we're going to update the style adding background color to that

42
00:03:13,210 --> 00:03:13,750
style.

43
00:03:14,500 --> 00:03:20,860
And we've got our array of game colors that we can use, whatever the value of Xs.

44
00:03:21,430 --> 00:03:28,270
So as we loop through the four and we can also update this to be game colors length as well, because

45
00:03:28,270 --> 00:03:28,930
this is an array.

46
00:03:29,680 --> 00:03:32,380
So it will be the same thing and it'll still be a value of four.

47
00:03:33,520 --> 00:03:36,460
So we see that each one of these now has a background.

48
00:03:36,470 --> 00:03:42,490
So we've got a background of red, blue, green and yellow and we can't see them yet because we need

49
00:03:42,490 --> 00:03:48,090
to apply a class to it and we do have that class box that we want to apply.

50
00:03:48,430 --> 00:03:52,030
So this will make it visible because this box has a height and a width.

51
00:03:52,390 --> 00:03:55,830
So we will be able to actually see these elements that we're creating.

52
00:03:56,410 --> 00:04:00,610
So adding it into div, we need to add to the class list.

53
00:04:00,910 --> 00:04:07,420
So we've got our class list for that particular element and we're going to use the method add and then

54
00:04:07,420 --> 00:04:10,810
we just need to specify the class that we wanted to add to the class list.

55
00:04:11,140 --> 00:04:18,340
So now when we refresh it, we have a class of box and we've got all of the background colors in style.

56
00:04:18,490 --> 00:04:24,850
And you can see that when you open up your inspector, you can see each one of these elements now has

57
00:04:24,850 --> 00:04:32,200
been generated using JavaScript and we were able to create all of these background colors as well as

58
00:04:32,200 --> 00:04:33,100
apply the class.

59
00:04:34,010 --> 00:04:40,040
So coming up next, I'm going to show you how you can make these interactive, so go ahead, use JavaScript,

60
00:04:40,400 --> 00:04:46,460
create all of these elements on the fly dynamically using JavaScript, apply the colors coming from

61
00:04:46,460 --> 00:04:52,340
the array where we've got the colors listed and we're going to use these as well later on to detect

62
00:04:52,340 --> 00:04:54,180
the pattern that's being created.

63
00:04:54,200 --> 00:04:56,630
So go ahead and set this up for yourself within your own project.