1
00:00:00,150 --> 00:00:05,700
Hello and welcome in this lesson, we are going to be setting up the basic game board and the game structure,

2
00:00:05,880 --> 00:00:07,260
we're going to need some HTML.

3
00:00:07,410 --> 00:00:12,450
So setting up a basic div and this div can have our score information.

4
00:00:12,870 --> 00:00:18,690
And the objective of the game is to streak to get as many in a row as correct.

5
00:00:18,930 --> 00:00:23,100
So that's going to be the scoring that we're going to be doing, adding in a class and this class can

6
00:00:23,100 --> 00:00:24,150
be called score.

7
00:00:24,360 --> 00:00:26,790
And then this is where our score will sit.

8
00:00:27,010 --> 00:00:30,410
We'll set a default value of zero so that we can start out.

9
00:00:30,690 --> 00:00:33,930
We also need a way to communicate with our players.

10
00:00:34,200 --> 00:00:41,340
So we're going to set up another div with a class of message so we can output message and information

11
00:00:41,580 --> 00:00:42,300
to the player.

12
00:00:42,520 --> 00:00:46,360
And for now, we'll type in here, click to start.

13
00:00:47,250 --> 00:00:52,800
So this is where the player can get information about what's happening within the gameplay, setting

14
00:00:52,800 --> 00:00:55,610
up a class we can call this one gameplay.

15
00:00:56,040 --> 00:00:59,610
So this is going to be where all of our gameplay is going to take place.

16
00:00:59,850 --> 00:01:06,180
And we're also going to need a few buttons so we can set these up just as a regular button HTML type

17
00:01:06,180 --> 00:01:06,690
button.

18
00:01:07,290 --> 00:01:13,050
And this one can have some inner HTML as set up a couple more buttons.

19
00:01:13,050 --> 00:01:18,270
So type button, I'm going to give this one a class because we do want to highlight these buttons right

20
00:01:18,270 --> 00:01:18,840
off the bat.

21
00:01:19,110 --> 00:01:20,870
So I'm going to just call it height button.

22
00:01:20,880 --> 00:01:23,420
We'll take care of all of this in the JavaScript.

23
00:01:23,430 --> 00:01:29,790
So we need one button for hire and we're also going to need one button for lower, adding that in so

24
00:01:29,790 --> 00:01:31,620
this button will be for lower.

25
00:01:31,920 --> 00:01:37,800
Let's refresh the page and make sure that we do have all of the components we need in order to run our

26
00:01:37,800 --> 00:01:38,100
game.

27
00:01:38,340 --> 00:01:40,500
So we've got our streak, which is our score.

28
00:01:40,680 --> 00:01:47,790
We're going to update this to be in line each HTML device and we've got our click to start.

29
00:01:48,150 --> 00:01:53,480
So this is going to be our basic message and then we've got our start button and are higher and lower.

30
00:01:53,820 --> 00:02:00,270
Next to that we want to do is set up our variables in order to contain our element objects.

31
00:02:00,660 --> 00:02:07,320
Setting up a message we're going to use document query selector in order to make a selection of the

32
00:02:07,320 --> 00:02:08,910
element for this one.

33
00:02:08,910 --> 00:02:12,620
We're selecting the element with the class of message.

34
00:02:12,840 --> 00:02:18,900
So before we select our class, we need to specify that, make sure that you place the dot there to

35
00:02:18,900 --> 00:02:23,380
indicate that we're looking for a class within the dorm also for the score.

36
00:02:24,030 --> 00:02:31,200
Same thing we're setting up and selecting it using query selector, selecting the element with a class

37
00:02:31,200 --> 00:02:34,710
of score, also selecting our button.

38
00:02:35,610 --> 00:02:38,730
And in this case, we need we've got several buttons.

39
00:02:38,730 --> 00:02:46,410
So that's several different button elements in select them using query selector all so that will select

40
00:02:46,410 --> 00:02:48,780
all of the elements into a node list.

41
00:02:49,110 --> 00:02:54,840
So all of the buttons will be within one node list and then we can loop through that node list and attach

42
00:02:54,840 --> 00:02:55,650
event listeners.

43
00:02:56,370 --> 00:02:59,670
And then lastly, let's select our gameplay area.

44
00:03:00,610 --> 00:03:06,880
Once again, using Querrey selector and selecting the element with the class of gameplay.

45
00:03:07,270 --> 00:03:11,600
So now we've got access to all of these using these variables.

46
00:03:12,340 --> 00:03:19,300
So when I type the variables into the console, you can see that we do have access to the correct elements.

47
00:03:19,570 --> 00:03:21,730
When I do button, we've got a node list.

48
00:03:21,910 --> 00:03:25,240
So we've got three elements there because this is query selector.

49
00:03:25,240 --> 00:03:27,160
Also, it'll select all the elements.

50
00:03:27,370 --> 00:03:31,900
If we were to write query selector, we would have only selected the first element.

51
00:03:31,900 --> 00:03:35,530
That's the button that has a button typed and then last one.

52
00:03:35,530 --> 00:03:38,230
Let's just make sure that everything is OK with that one as well.

53
00:03:38,410 --> 00:03:39,390
So that's gameplay.

54
00:03:39,610 --> 00:03:46,510
So that's the best way to check to make sure that you did select out all of the elements as variables

55
00:03:46,510 --> 00:03:48,590
that now you can use within your JavaScript.

56
00:03:49,060 --> 00:03:55,750
So go ahead and set that up, set up the game board with the buttons, the correct HTML elements, and

57
00:03:55,750 --> 00:04:02,920
then use JavaScript to select those elements into variable objects that we're going to use in the upcoming

58
00:04:02,920 --> 00:04:03,400
lessons.