1
00:00:00,180 --> 00:00:05,970
This lesson we're going to make, those elements that we're creating on the fly interactive, so back

2
00:00:05,970 --> 00:00:12,030
where we're creating this dynamically within the box, we can use the L object as we're creating it

3
00:00:12,030 --> 00:00:16,020
to add an event listener and using the event listener.

4
00:00:16,200 --> 00:00:17,940
So we're listening for a click.

5
00:00:18,150 --> 00:00:23,580
And if it's a click, then that means that the element got hit and we're going to invoke the function

6
00:00:23,610 --> 00:00:24,390
that's hit.

7
00:00:24,870 --> 00:00:28,860
So we've got a function hit we're passing in the event object.

8
00:00:30,150 --> 00:00:37,560
And you can see that when you do console like E Target, it's going to output the contents of the element

9
00:00:37,560 --> 00:00:38,250
that got hit.

10
00:00:38,580 --> 00:00:44,250
So when we refresh and open up this bigger, so now when I click this, I can clear this out.

11
00:00:44,430 --> 00:00:50,820
When I click that element, you can see that that click event happened and I got the contents of that

12
00:00:50,820 --> 00:00:51,300
element.

13
00:00:51,600 --> 00:00:54,300
And you can see this is the exact element that we created.

14
00:00:55,170 --> 00:00:56,730
So we can add an event listener there.

15
00:00:56,730 --> 00:00:57,930
We can get the target.

16
00:00:58,140 --> 00:01:01,190
And this is also the point where we can get the end time.

17
00:01:01,470 --> 00:01:03,030
So we've got our end time.

18
00:01:03,240 --> 00:01:11,070
And just as we did, setting up the new start time, we can get the end time using the get time method

19
00:01:11,250 --> 00:01:12,870
built in in JavaScript.

20
00:01:13,740 --> 00:01:23,430
And in order to get the duration, we can take the end time minus the start time and the start time

21
00:01:23,430 --> 00:01:25,890
again is coming from that global value over here.

22
00:01:28,510 --> 00:01:33,580
And we're going to divide it by 1000 because it's going to be in milliseconds, so we want it within

23
00:01:33,580 --> 00:01:34,210
seconds.

24
00:01:36,750 --> 00:01:44,880
We also need to clear out this play area timer so that that will clear out, so that's timed out, it's

25
00:01:44,880 --> 00:01:50,550
already run, but we want to clear that out using the clear timeout.

26
00:01:53,500 --> 00:01:55,810
So in case it hasn't cleared, it'll clear now.

27
00:01:59,240 --> 00:02:08,060
And we need to remove this element from the board, so let's select our game area, and this is we're

28
00:02:08,060 --> 00:02:10,700
going to traverse a little bit within our dorm.

29
00:02:10,880 --> 00:02:14,520
We're going to go to the children and we go game area children.

30
00:02:14,670 --> 00:02:17,660
We see that all of the children are going to be represented.

31
00:02:18,020 --> 00:02:23,810
So, first of all, let's put that into the console when it gets hit and you'll see that we're able

32
00:02:23,810 --> 00:02:30,270
to select the children and it only has the one child, which is that element that we're creating dynamically.

33
00:02:31,370 --> 00:02:37,070
So when we click it a clear what's in the console there and when I click it, we see that it is it does

34
00:02:37,070 --> 00:02:38,180
have that same element.

35
00:02:38,480 --> 00:02:46,730
So that representation that we have there where we're using the game area children and the first child

36
00:02:46,850 --> 00:02:52,250
is that element because we're depositing into the game area and we don't have anything else but that

37
00:02:52,250 --> 00:02:52,690
in there.

38
00:02:52,970 --> 00:02:59,390
So we know that we've selected the right element and the next we can simply remove that element using

39
00:02:59,390 --> 00:03:01,620
the removed method in JavaScript.

40
00:03:01,910 --> 00:03:02,840
So really easy.

41
00:03:02,870 --> 00:03:10,300
We just do a remove method and this is going to remove that element from the game area.

42
00:03:10,520 --> 00:03:17,030
And next, we need to launch the next one, and that's where we can launch that once again.

43
00:03:17,240 --> 00:03:24,410
And we can also set it to a timer as well so that the player doesn't know when the next one is going

44
00:03:24,410 --> 00:03:24,850
to appear.

45
00:03:26,270 --> 00:03:27,550
So will refresh.

46
00:03:27,560 --> 00:03:28,760
And once we hit start.

47
00:03:29,090 --> 00:03:30,380
So the games and play now.

48
00:03:32,240 --> 00:03:38,330
And we clicked it, we clicked it, we clicked it, and one thing that's missing, we're not outputting

49
00:03:38,330 --> 00:03:43,730
the duration out to the player, so they have no idea how quickly they're hitting it.

50
00:03:44,000 --> 00:03:48,040
So that's what we're going to use our messenger function that we created earlier as well.

51
00:03:50,940 --> 00:03:53,190
And we're going to simply output the duration.

52
00:03:55,260 --> 00:04:01,230
It took and then duration, whatever the value is.

53
00:04:03,150 --> 00:04:04,530
Seconds to click.

54
00:04:07,670 --> 00:04:10,640
So there we go, we have our game, we can start.

55
00:04:12,910 --> 00:04:18,880
And we see it took point two point five seconds to click, took five point six, four seconds to click,

56
00:04:19,270 --> 00:04:21,930
that one took eight point zero four seconds.

57
00:04:22,390 --> 00:04:23,770
That one was 11 seconds.

58
00:04:24,010 --> 00:04:28,150
So something's going on here that we're not resetting the start time.

59
00:04:31,890 --> 00:04:37,080
And I'm actually going to take care of that because we're continuously adding into the start time and

60
00:04:37,110 --> 00:04:43,440
within JavaScript as we're creating this element, I can add in a time value within that element.

61
00:04:43,470 --> 00:04:45,650
So it's all contained within that same area.

62
00:04:45,840 --> 00:04:50,340
So I can save myself a little bit of hassle there and get rid of the time in there.

63
00:04:50,490 --> 00:04:55,800
So I don't need to log that information and I don't need to use the global variable.

64
00:04:55,920 --> 00:05:01,140
And when I return back that event object, I can use whatever the start time is.

65
00:05:01,410 --> 00:05:03,150
So I can do let start.

66
00:05:03,360 --> 00:05:06,450
And then from here I can return back my start time.

67
00:05:08,510 --> 00:05:16,610
And this time it should be resetting it for each element, so as you can see, we're resetting it for

68
00:05:16,610 --> 00:05:17,480
each element.

69
00:05:17,600 --> 00:05:21,560
So the click times are relevant to each and every one.

70
00:05:22,640 --> 00:05:28,520
So they're not cumulative anymore, and this is another way that we can attach values and variables

71
00:05:28,520 --> 00:05:35,240
into that element object as we're creating it, and that reduces the need for having this global start

72
00:05:35,240 --> 00:05:37,250
value that we no longer need.

73
00:05:37,520 --> 00:05:43,820
And we can also condense this a little bit further as well, where we can combine the inplay into the

74
00:05:43,820 --> 00:05:50,120
object and really condense all of a lot of the functionality that we have within one.

75
00:05:51,190 --> 00:05:52,810
Within one object value.

76
00:05:53,760 --> 00:05:57,520
So coming up next, we'll do a quick code review and an overview.

77
00:05:57,780 --> 00:06:06,090
Go ahead and add in the hit option into your game so that you've got the gameplay fully functional and

78
00:06:06,090 --> 00:06:06,600
working.