1
00:00:00,090 --> 00:00:05,700
Welcome in this lesson, we are going to be setting up a hangman game that we're going to utilize and

2
00:00:05,700 --> 00:00:11,640
create JavaScript functionality around first, setting up several debates we're going to need within

3
00:00:11,640 --> 00:00:13,830
our HTML can give them a class.

4
00:00:13,830 --> 00:00:16,350
So we have one where we need several different outputs.

5
00:00:16,650 --> 00:00:22,050
We need one to hold all of the available letters that the player can select.

6
00:00:22,350 --> 00:00:26,190
And then we also need another output that's going to show the solution.

7
00:00:26,380 --> 00:00:33,240
And so all of the letters that the player has guessed correctly, we also need a way to communicate

8
00:00:33,240 --> 00:00:33,990
to the player.

9
00:00:34,320 --> 00:00:36,490
So that's going to be this message area.

10
00:00:36,780 --> 00:00:42,000
So another empty div and all of the stuff we're going to be adding in and functionality with JavaScript,

11
00:00:42,210 --> 00:00:44,360
we also need a way to start the game.

12
00:00:44,370 --> 00:00:45,590
So lets that start button.

13
00:00:45,840 --> 00:00:51,210
So creating all of that is all of the elements within HTML that we need.

14
00:00:51,360 --> 00:00:53,200
So essentially all you see is a start button.

15
00:00:53,580 --> 00:00:58,950
Now we're using JavaScript, so open up within our script tags setting up.

16
00:00:59,340 --> 00:01:05,250
We're going to select all of these elements into JavaScript objects so that we can easily manipulate

17
00:01:05,250 --> 00:01:06,570
them in the upcoming lessons.

18
00:01:06,810 --> 00:01:14,280
So using query selector, we're going to select out the element with a class of message and place that

19
00:01:14,280 --> 00:01:21,390
into an object called message to do the same thing for the output one can using query selector and selecting

20
00:01:21,390 --> 00:01:23,370
the element with a class of output.

21
00:01:23,370 --> 00:01:24,600
One you can duplicate.

22
00:01:24,600 --> 00:01:27,290
This you have to do is so that's output two.

23
00:01:27,540 --> 00:01:33,600
And then lastly, let's also do button so I to do B10 and document and this time we're selecting the

24
00:01:33,600 --> 00:01:35,610
tag with a tag of button.

25
00:01:35,730 --> 00:01:40,050
So that's when we're selecting, they're so ready to add in all of our functionality.

26
00:01:40,440 --> 00:01:44,380
And first, before we do that, we have some global variables that we want to set up.

27
00:01:44,400 --> 00:01:49,410
First, we need an array of words and these are the words that we're going to be using within the game

28
00:01:49,560 --> 00:01:51,060
so you can create your own as well.

29
00:01:51,180 --> 00:01:55,800
So obviously I have to include JavaScript and course.

30
00:01:55,800 --> 00:01:57,600
And let's do one last one.

31
00:01:57,600 --> 00:01:58,680
As Lowrance.

32
00:01:58,710 --> 00:02:01,490
Those are our array of words that we're going to be using.

33
00:02:01,890 --> 00:02:04,800
We need some default functions that we can use.

34
00:02:05,220 --> 00:02:08,040
We can create an object to contain that information.

35
00:02:08,050 --> 00:02:10,920
So under player, because it's going to be unique to the player.

36
00:02:11,130 --> 00:02:16,920
So we can use that as our global object and then pass values that the player needs in order to hold

37
00:02:16,920 --> 00:02:17,280
in there.

38
00:02:17,340 --> 00:02:23,190
So coming up next, we're going to make our button interactive and we're going to start our game functionality.

39
00:02:23,200 --> 00:02:24,890
So let's start to come in the next lesson.

40
00:02:25,020 --> 00:02:32,160
So go ahead and set up your basic core structure and prepare your JavaScript objects for the upcoming

41
00:02:32,160 --> 00:02:34,470
lessons where we've built out this game.