1
00:00:01,000 --> 00:00:05,770
This lesson, we're going to set up an array that's going to contain all of the values of the words

2
00:00:05,770 --> 00:00:10,960
that we're going to be using so that they can be constant and we can just call it my words.

3
00:00:11,290 --> 00:00:17,200
And this is going to be a collection of random words that we're going to use and scramble these words

4
00:00:17,410 --> 00:00:21,670
in order for the user to have something to click on and unscramble.

5
00:00:21,790 --> 00:00:25,660
So I've created six words and now we can use these words.

6
00:00:25,840 --> 00:00:31,120
And this is the main array where we're going to be displaying one of these words and it's going to be

7
00:00:31,120 --> 00:00:33,550
up to the user to find out which one it is.

8
00:00:33,730 --> 00:00:39,850
And we're going to scramble these words within boxes on the page so they have to click the correct box

9
00:00:39,850 --> 00:00:43,000
when the word appears and that's how the game begins.

10
00:00:43,750 --> 00:00:46,270
Let's add an event listener to that start button.

11
00:00:46,900 --> 00:00:48,640
As we're generating it out.

12
00:00:48,670 --> 00:00:49,990
We can add the event listener.

13
00:00:50,290 --> 00:00:54,880
The event listener is going to be a click and if the button gets clicked, then we're going to invoke

14
00:00:54,880 --> 00:00:58,720
the function for start setting up the start function.

15
00:00:59,440 --> 00:01:03,160
So this is where we start the game and we know at this point we want to start the game.

16
00:01:03,730 --> 00:01:09,040
So we want to also update and select that button and hide that element.

17
00:01:09,730 --> 00:01:13,510
So whatever element triggered it, we're going to hide that particular element.

18
00:01:13,810 --> 00:01:17,890
And there's a number of ways that we can now select that freshly created element.

19
00:01:18,370 --> 00:01:23,830
So to start the game can use this, because the element that triggered it is the same one that we want

20
00:01:23,830 --> 00:01:28,210
to hide, selecting the style, applying property of display, none.

21
00:01:28,390 --> 00:01:31,730
So that button will no longer be visible once it gets clicked.

22
00:01:32,110 --> 00:01:35,230
We also want to update some of the messaging for the player.

23
00:01:35,560 --> 00:01:40,210
So selecting that message area and I'm going to build a special function for that.

24
00:01:40,570 --> 00:01:46,500
We can just call it message and then pass in message and we can call that output here.

25
00:01:46,900 --> 00:01:52,870
So all we have to do is send a value of whatever we want to output to a function called message.

26
00:01:53,560 --> 00:01:54,690
And we'll use message.

27
00:01:54,820 --> 00:02:02,740
We'll use query selector, query selector and selecting the element that has a class of message.

28
00:02:02,740 --> 00:02:10,210
So message, we're going to update the entire HTML to equal whatever the value of output is.

29
00:02:10,430 --> 00:02:12,730
So so we're going to do within this one message function.

30
00:02:13,210 --> 00:02:18,910
So now if we want to update any of the messages, we can update that content in the message simply by

31
00:02:18,910 --> 00:02:21,780
calling out to that function and passing in the output.

32
00:02:22,210 --> 00:02:25,240
And here we need to enter in a word that needs to be selected.

33
00:02:25,420 --> 00:02:27,100
So let's start the game.

34
00:02:27,290 --> 00:02:31,470
And we also need to build out that particular game functionality.

35
00:02:31,480 --> 00:02:34,590
So we need to build out all of the boxes that are going to be clickable.

36
00:02:34,870 --> 00:02:38,170
And we also need to scramble these words as well.

37
00:02:38,170 --> 00:02:43,480
And I'll put them on the page and select one of these words randomly that the user has to find.

38
00:02:43,780 --> 00:02:46,090
So it's quite a bit to do in the upcoming lessons.

39
00:02:46,240 --> 00:02:51,790
So for now, create a function to start the game, also create a function that's going to output messages

40
00:02:51,790 --> 00:02:53,110
into your inner HTML.

41
00:02:53,290 --> 00:02:58,690
And coming up next, I'll show you how you can use and make use of these words.

42
00:02:58,840 --> 00:03:02,620
And we're going to scramble those words and output them on the page for the player to find.