1
00:00:00,550 --> 00:00:06,370
Welcome in this lesson, we are going to be setting up our game board for the coin toss game that we're

2
00:00:06,370 --> 00:00:08,410
going to be creating in the upcoming lessons.

3
00:00:08,720 --> 00:00:10,570
So let's set up our HTML.

4
00:00:10,720 --> 00:00:16,380
We're going to need a div that's going to be our div where we're going to communicate to our player.

5
00:00:16,840 --> 00:00:21,670
We can use a class of message and have some message information in here.

6
00:00:22,060 --> 00:00:24,010
Next, we're going to need some options.

7
00:00:24,340 --> 00:00:32,410
So I set up a button, regular type button and this button can be heads and I'll duplicate this and

8
00:00:32,410 --> 00:00:34,250
create another one that will be tails.

9
00:00:34,600 --> 00:00:41,800
So these are the options that the player has in order to select whether the coin is going to be heads

10
00:00:41,800 --> 00:00:42,370
or tails.

11
00:00:42,610 --> 00:00:43,690
Let's refresh.

12
00:00:43,690 --> 00:00:50,960
And we've got a choice here, heads or tails, and this will initiate our gameplay within the script.

13
00:00:51,130 --> 00:01:00,310
Let's set up our variables to hold our values, setting up an object for message use the document query

14
00:01:00,310 --> 00:01:03,610
selector in order to make a selection of that element.

15
00:01:04,150 --> 00:01:06,340
And the element that we're selecting is a class.

16
00:01:06,560 --> 00:01:11,050
So make sure you put the DOT message the same way as you would with us.

17
00:01:11,500 --> 00:01:15,940
And if we save that refresh, go into our console.

18
00:01:16,360 --> 00:01:18,550
We have a variable called message.

19
00:01:18,700 --> 00:01:24,790
So we have a message object and you can see that it relates down to that HTML element.

20
00:01:25,480 --> 00:01:31,480
And if we were to type in our text to it, we can update the entire text that's contained within there.

21
00:01:31,690 --> 00:01:32,830
And that's what we want to do.

22
00:01:32,980 --> 00:01:39,520
We want to be able to send messages to the player in order to provide progress on the gameplay.

23
00:01:39,820 --> 00:01:46,540
Next, let's select our button and we can call this one buttons, selecting the elements from the page

24
00:01:46,810 --> 00:01:48,640
using query selector.

25
00:01:48,940 --> 00:01:54,340
And this time we're going to use query selector, all because we have more than one element that we're

26
00:01:54,340 --> 00:01:59,380
selecting and we're going to create a node list with the contents of these elements.

27
00:02:00,250 --> 00:02:02,830
We can output that into the console as well.

28
00:02:03,040 --> 00:02:10,690
So buttons refresh and you can see that now we do have a node list because we do have two button elements.

29
00:02:10,870 --> 00:02:14,530
And even if we only had one, we would still generate a node list.

30
00:02:14,680 --> 00:02:16,810
So node list is very similar to an array.

31
00:02:17,050 --> 00:02:21,190
It's a zero based value where it starts with zero.

32
00:02:21,200 --> 00:02:23,020
So the first item is zero.

33
00:02:23,200 --> 00:02:28,720
And you can see that it contains that same element information, except it's within this node list.

34
00:02:28,960 --> 00:02:35,530
So we have to navigate to the different items in order to apply any of the changes to those elements

35
00:02:35,650 --> 00:02:36,880
using JavaScript.

36
00:02:37,060 --> 00:02:38,470
And then this is the second one.

37
00:02:38,780 --> 00:02:43,210
You can see the difference here is we've got a different inner HTML as well.

38
00:02:43,510 --> 00:02:50,800
We still have a lot of the same properties and the outer text is tails and the inner the text content

39
00:02:50,800 --> 00:02:51,900
is tale's as well.

40
00:02:51,910 --> 00:02:59,050
So we can use the content of these elements and determine which button was clicked, attaching an event

41
00:02:59,050 --> 00:03:00,340
listener to these buttons.

42
00:03:00,640 --> 00:03:02,980
And I'm got to show you how to do that in the upcoming lessons.

43
00:03:03,190 --> 00:03:06,330
Where are we going to create our interaction for our gameplay?

44
00:03:06,700 --> 00:03:14,170
So go ahead and set up your HTML, set up a message area, couple of buttons using the button elements

45
00:03:14,410 --> 00:03:20,470
and then use JavaScript to connect to those elements, selecting those elements from the DOM into JavaScript

46
00:03:20,470 --> 00:03:24,760
objects that we're going to use in the upcoming lessons in order to produce our gameplay.