1
00:00:00,890 --> 00:00:04,710
In this section, we are going to be building out a word scrambling game.

2
00:00:04,910 --> 00:00:11,540
We need to first set up a few elements within our HTML in order to handle some of our JavaScript content.

3
00:00:11,790 --> 00:00:14,720
So selecting out, creating a div with a message.

4
00:00:14,940 --> 00:00:19,060
And this is where we can communicate what the player provides and some message information.

5
00:00:19,310 --> 00:00:23,420
Next, let's create an input so the input type is going to be text.

6
00:00:23,570 --> 00:00:27,760
And this is where the player can enter in the guess of the word.

7
00:00:27,980 --> 00:00:34,130
And then lastly, we've got a button and once again type button and we can just label it.

8
00:00:34,140 --> 00:00:38,650
Guess save that refresh and we've got our guess area.

9
00:00:38,990 --> 00:00:42,570
And this is where the scrambled word will appear within the div.

10
00:00:42,830 --> 00:00:46,100
Now we need to initiate the next part of the game.

11
00:00:46,460 --> 00:00:48,440
And actually this should be start.

12
00:00:48,710 --> 00:00:52,630
And we'll start out with this giving to the class of hidden.

13
00:00:52,640 --> 00:00:59,670
Let's set up a class within our HTML using display property and let's set it to display none.

14
00:01:00,140 --> 00:01:06,470
So we start the game with a start button and next we want to set up our JavaScript so that that button

15
00:01:06,470 --> 00:01:07,670
becomes interactive.

16
00:01:07,820 --> 00:01:14,870
And we can also pass messages to the player and also unhide that input area because that's where the

17
00:01:14,870 --> 00:01:17,000
player needs to enter in their guess.

18
00:01:17,750 --> 00:01:21,980
Set that up in JavaScript using JavaScript objects.

19
00:01:22,490 --> 00:01:29,660
We're going to select the element with the class of message using query selector doing a dot message

20
00:01:29,660 --> 00:01:32,120
to indicate that this is a class that we're selecting.

21
00:01:32,810 --> 00:01:40,390
Next, let's set up and select our input area so we can call it guess using the same format.

22
00:01:40,400 --> 00:01:45,710
So document query selector, we only have one input, so that's our way to identify it.

23
00:01:45,720 --> 00:01:46,520
We only have the one.

24
00:01:47,270 --> 00:01:54,470
And the lastly we've got a button and once again using query selector, we're going to select the element

25
00:01:54,860 --> 00:01:56,330
with the tag of button.

26
00:01:56,480 --> 00:01:58,250
We want to make button interactive.

27
00:01:58,250 --> 00:02:04,250
So selecting a button, adding an event, listener interaction that we want is a click and we'll add

28
00:02:04,250 --> 00:02:05,810
that function directly in here.

29
00:02:05,810 --> 00:02:11,180
So an anonymous function directly within the event listener and always that's a good idea to make sure

30
00:02:11,180 --> 00:02:14,170
that everything is working properly up until this point.

31
00:02:14,480 --> 00:02:20,360
So I'm going to console logout a message of clicked, do a quick refresh hit start and we get clicked.

32
00:02:20,870 --> 00:02:23,900
So coming up next, go ahead and set this up for yourself.

33
00:02:24,260 --> 00:02:26,600
So set up your basic HTML.

34
00:02:27,200 --> 00:02:34,550
Use JavaScript to add the HTML elements as JavaScript objects, set up some scissors if you need to,

35
00:02:34,910 --> 00:02:39,320
as well as adding an event listener so that the button is now interactive.

36
00:02:39,560 --> 00:02:44,780
And coming up next, I'm going to show you how we can start generating out some content for the user

37
00:02:44,780 --> 00:02:45,680
to play the game.

38
00:02:45,860 --> 00:02:46,670
So that's still to come.