1
00:00:00,090 --> 00:00:06,750
In the previous lesson, we set up our TEMEL and we also set up our JavaScript objects that are relating

2
00:00:06,750 --> 00:00:08,610
to the elements on the page.

3
00:00:08,790 --> 00:00:12,130
So we've got one for each of the three elements that we have on our page.

4
00:00:12,270 --> 00:00:13,440
And we do have a button.

5
00:00:13,620 --> 00:00:16,370
But when we click the button, nothing happens.

6
00:00:16,500 --> 00:00:19,890
And that's what we're going to do in this lesson, is we're going to make something happen.

7
00:00:20,130 --> 00:00:25,620
So we do have that button element we output into the console in the last lesson just to ensure that

8
00:00:25,620 --> 00:00:29,150
we do have the right content there for Button.

9
00:00:29,460 --> 00:00:33,670
And now we can take the button object and we can add an event listener to it.

10
00:00:33,960 --> 00:00:36,780
We need to specify what we're doing with that listener.

11
00:00:36,900 --> 00:00:39,270
So we're listening for a click on the button.

12
00:00:39,540 --> 00:00:43,140
And whenever the button gets clicked, we're going to invoke this function.

13
00:00:43,140 --> 00:00:48,420
It's going to be an anonymous function because sitting within that event, listener there, and it's

14
00:00:48,420 --> 00:00:52,090
expecting a function to be launched on the click trigger.

15
00:00:52,620 --> 00:00:56,520
So now we need to know what we want to place within this function.

16
00:00:56,730 --> 00:00:59,230
And this is where we want to start the gameplay.

17
00:00:59,460 --> 00:01:01,530
So let's set up one more variable.

18
00:01:01,740 --> 00:01:07,110
And this is going to be Aulet, because we're going to change the value of this is going to be a boolean

19
00:01:07,110 --> 00:01:11,430
value and it's going to indicate whether the game is in play.

20
00:01:11,610 --> 00:01:17,550
And once it's in play, then we know that we don't want the player to continuously start and the game

21
00:01:17,550 --> 00:01:18,450
has started.

22
00:01:18,690 --> 00:01:21,510
So that's going to be our indicator for the game starting.

23
00:01:21,780 --> 00:01:25,990
So we're going to check to see if in play is false.

24
00:01:26,280 --> 00:01:33,270
So we put that explanation, Mark, in front there to indicate that if it's false, then we're going

25
00:01:33,270 --> 00:01:34,890
to execute the code in here.

26
00:01:35,430 --> 00:01:42,210
And if it is false, then we want to turn in play to true so that the next time the buttons are not

27
00:01:42,210 --> 00:01:47,250
going to do anything, you can keep clicking at as much as you want, because now this is going to be

28
00:01:47,250 --> 00:01:50,450
true and we don't have anything else turning it back into false.

29
00:01:50,730 --> 00:01:53,160
This button is no longer going to be clickable.

30
00:01:53,370 --> 00:01:55,640
So we're only going to be launching this one time.

31
00:01:55,920 --> 00:02:03,810
We can also take that button because the button is the element object play styles to it by using style

32
00:02:03,900 --> 00:02:06,930
and then within style we can use display.

33
00:02:07,410 --> 00:02:13,860
And so this is the same thing as if we went into our success and we made a selection of the button and

34
00:02:13,860 --> 00:02:17,220
we just simply did a display, selected none.

35
00:02:17,460 --> 00:02:18,900
So that would hide the button.

36
00:02:19,050 --> 00:02:20,370
So it's going to do the same thing.

37
00:02:20,490 --> 00:02:26,160
And you're going to see within the source code that that's going to update that code and we're going

38
00:02:26,160 --> 00:02:28,150
to do all of this using JavaScript.

39
00:02:28,980 --> 00:02:30,130
So let's try that out.

40
00:02:30,150 --> 00:02:37,590
So refresh, we had start and it disappears, but when we go inspect for the code, you can see that

41
00:02:37,590 --> 00:02:39,000
the button is still there.

42
00:02:39,150 --> 00:02:45,930
But we've applied a display property, a style property of display, none so effectively hiding the

43
00:02:45,930 --> 00:02:46,350
button.

44
00:02:46,740 --> 00:02:52,710
When we add in that attribute, that style attribute, we can also output a message to the player.

45
00:02:52,720 --> 00:02:56,220
So the player is probably wondering, OK, well, what's going on?

46
00:02:56,430 --> 00:02:58,680
So we can add in a message.

47
00:02:58,980 --> 00:03:04,590
And for this, we're going to set up a separate function to output messages to the player and then we'll

48
00:03:04,590 --> 00:03:06,560
also launch the game.

49
00:03:06,570 --> 00:03:11,040
So we're going to create a function in order to launch the game so we can do all of that.

50
00:03:11,130 --> 00:03:13,500
And I'll show you how to do that in the upcoming lessons.

51
00:03:13,750 --> 00:03:19,620
So for now, set up the button event listener at an event, listen to it, click it a few times, make

52
00:03:19,620 --> 00:03:24,900
sure it's working, and then add in the different conditions here, checking to see if it's in play.

53
00:03:25,050 --> 00:03:28,770
And then also you can apply the style of display none.

54
00:03:28,770 --> 00:03:31,980
So that will hide it from the visible area on the screen.

55
00:03:32,490 --> 00:03:34,140
So go ahead and add that into your project.