1
00:00:00,870 --> 00:00:06,210
This lesson, we're going to build some interactive elements and put the words that we scrambled in

2
00:00:06,210 --> 00:00:10,730
the previous lesson and output them to the player to be able to select and interact with.

3
00:00:11,250 --> 00:00:14,420
So we've got everything that's happening within that start function.

4
00:00:14,700 --> 00:00:16,910
And we also need to add in a few other things.

5
00:00:17,130 --> 00:00:21,980
So before we go into the word sorry, I want to select the element game.

6
00:00:22,830 --> 00:00:25,110
So using variable.

7
00:00:26,380 --> 00:00:32,830
So we can set up CONSED game and equal that to document using query selector.

8
00:00:33,580 --> 00:00:36,910
We're going to select the element with a class of game.

9
00:00:37,060 --> 00:00:38,890
So that's the one that we generated earlier.

10
00:00:40,330 --> 00:00:47,860
And then as we loop through, we want to build some elements that have the value of temp, one inside

11
00:00:47,860 --> 00:00:54,970
of those, so let's generate those, we're going to use the document, create element.

12
00:00:56,020 --> 00:00:57,910
And the element that we're going to create is a div.

13
00:00:59,270 --> 00:01:04,970
And then within this dive object that we've just created, we want to add in some interaction, so we're

14
00:01:04,970 --> 00:01:11,780
adding an event listener and the difference between a mouse enter and mouse over is that now on mouse

15
00:01:11,780 --> 00:01:19,520
enter, it gets executed once and on mouse over it gets executed every time the cursor is moved over.

16
00:01:19,580 --> 00:01:20,480
Let's add that in.

17
00:01:20,480 --> 00:01:21,740
And there's two E's in there.

18
00:01:21,950 --> 00:01:27,380
So Mouse enter and we're going to invoke this function that's going to get executed as we enter.

19
00:01:27,680 --> 00:01:34,580
So only one time as we enter into the element, add in a style, update the background color and set

20
00:01:34,580 --> 00:01:42,100
it to red is most so using a set of mouse enter mouse leave reset the background color to be white.

21
00:01:42,110 --> 00:01:43,040
The game.

22
00:01:43,700 --> 00:01:48,740
We're going to append child and the child that we're going to pendas that freshly created div that we

23
00:01:48,740 --> 00:01:49,340
just created.

24
00:01:49,490 --> 00:01:54,680
And we should also add some inner Temel in there so or in our text in this case.

25
00:01:54,860 --> 00:01:57,100
And we just rewrite the word select on top.

26
00:01:57,170 --> 00:02:01,400
Now we've got select and we've got the mouse enter and Mousley functionality.

27
00:02:01,850 --> 00:02:02,930
Let's inspect that.

28
00:02:03,080 --> 00:02:08,720
And you can see that as we're hovering over, we're adding and removing background colors or adding

29
00:02:08,720 --> 00:02:10,450
and updating background colors.

30
00:02:10,670 --> 00:02:15,980
So that's actually the interaction that we want, because as we leave, we want to update that inner

31
00:02:15,980 --> 00:02:18,350
text and we want to do the same thing.

32
00:02:18,650 --> 00:02:25,040
So coming into it, we want to update that inner text so and adding it back to select.

33
00:02:25,280 --> 00:02:30,260
And then as we hover over it, we want to output that inner text to be temp one.

34
00:02:30,560 --> 00:02:31,740
So I'll show you how this works.

35
00:02:31,940 --> 00:02:37,850
So now whenever I hover over these, then you see that we are seeing those scrambled words.

36
00:02:38,150 --> 00:02:42,920
Also, I'm going to add in a class, so I'm going to cheat a little bit and we're going to use class

37
00:02:43,220 --> 00:02:46,250
list and adding a class to it.

38
00:02:46,460 --> 00:02:49,220
And the class that we're going to add in is going to be baulks.

39
00:02:49,580 --> 00:02:52,350
So it's going to give us the ability to set a little bit of styling.

40
00:02:52,760 --> 00:03:01,820
So going out to the style area, adding in the box and we can set some display properties, so display

41
00:03:02,450 --> 00:03:08,480
and inline block so that we can align them, adding in some padding you can do 10 picks, padding,

42
00:03:08,720 --> 00:03:14,920
and I'm going to set a width of one hundred picks and a height of also one hundred picks.

43
00:03:14,920 --> 00:03:18,500
It's quite a bit easier when we go in and add in that particular element.

44
00:03:18,650 --> 00:03:22,170
So now we've got a bunch of boxes there that have that content in it.

45
00:03:22,640 --> 00:03:28,040
Also applying text, text, align center and I don't need this much height actually on it, so I'm going

46
00:03:28,040 --> 00:03:29,780
to shrink the height down to 40.

47
00:03:30,470 --> 00:03:35,170
So that gives us a bunch of elements where we've got these scrambled words that we can see those.

48
00:03:35,900 --> 00:03:41,060
And I'm also going to reverse the white and the red so all of them are going to have red by default

49
00:03:41,330 --> 00:03:41,990
and then white.

50
00:03:42,140 --> 00:03:46,130
So selecting that default color of it, the background color to red.

51
00:03:47,480 --> 00:03:48,570
So try that one more time.

52
00:03:48,770 --> 00:03:54,020
So now we got that unscramble, that scrambled word, so the objective of the game is going to be that

53
00:03:54,050 --> 00:03:58,810
we're going to present a word to the player and then they have to select it from these boxes.

54
00:03:58,820 --> 00:04:01,480
And if they select it properly, then it's going to disappear.

55
00:04:01,760 --> 00:04:05,390
And until all of the elements are gone, then that's when they will.

56
00:04:05,660 --> 00:04:07,730
So we need to add in one more event listener.

57
00:04:08,000 --> 00:04:14,000
And that's going to be a click event because we want the user to be able to click it.

58
00:04:14,150 --> 00:04:19,730
And then we're going to check to see if that selected word is actually matching with the word that we've

59
00:04:19,730 --> 00:04:22,830
got in the output, create that function in the upcoming lesson.

60
00:04:23,060 --> 00:04:28,070
So for now, we'll just put into the console just to make sure that we do have that click event function.

61
00:04:28,250 --> 00:04:30,200
So now we do have that click event functioning.

62
00:04:30,290 --> 00:04:32,720
And there's actually one other thing that I want to add in.

63
00:04:32,750 --> 00:04:34,640
So there's a couple other things that I want to add in.

64
00:04:35,240 --> 00:04:42,230
So first of all, I want to add in the word that it's actually going to be so instead of before we split

65
00:04:42,230 --> 00:04:47,090
it, it's just going to be item so that we know which word it is on the unscrambled part of it.

66
00:04:47,510 --> 00:04:48,560
So refreshing.

67
00:04:48,560 --> 00:04:52,430
And you can see that this is that we've got it hidden in the background.

68
00:04:52,640 --> 00:04:56,540
And that way we can output within the console instead of click.

69
00:04:56,750 --> 00:05:02,420
We can output the value of this so we can see the unscrambled word when we click it.

70
00:05:03,230 --> 00:05:08,240
And that's going to give us the ability to match it with the selected word that the user has defined.

71
00:05:08,360 --> 00:05:13,040
And we can easily do a comparison there to make sure that the player actually selected the right word

72
00:05:13,040 --> 00:05:14,850
before we remove out that element.

73
00:05:15,200 --> 00:05:16,760
So all of that is still yet to come.

74
00:05:17,000 --> 00:05:21,530
Go ahead and build out this interactive elements within your JavaScript.

75
00:05:21,620 --> 00:05:27,590
And then coming up next, we're going to wrap up this this game and add in the additional functionality

76
00:05:27,590 --> 00:05:28,250
that we require.