1 00:00:00,150 --> 00:00:00,670 Welcome back. 2 00:00:00,690 --> 00:00:05,940 How's your game coming along in this lesson we're going to be adding in an event listener to the element 3 00:00:05,940 --> 00:00:12,060 that we're creating dynamically so using that same div object that we've already created in the earlier 4 00:00:12,060 --> 00:00:17,520 lesson, we're going to add a click event to that and we can do that function as well as an anonymous 5 00:00:17,520 --> 00:00:20,200 function contained within this block of code. 6 00:00:20,220 --> 00:00:22,440 So we want to run this block of code. 7 00:00:22,690 --> 00:00:24,560 So let's get our end time. 8 00:00:24,810 --> 00:00:26,940 We already tracked our start time. 9 00:00:27,120 --> 00:00:33,780 So that was set when the element was created and the end time is going to be set whenever the element 10 00:00:33,780 --> 00:00:34,500 gets clicked. 11 00:00:34,890 --> 00:00:38,970 So it's going to give us two values to string values. 12 00:00:38,980 --> 00:00:46,290 And when we do date now what that produces, this produces a Unix timestamp in milliseconds from I believe 13 00:00:46,290 --> 00:00:51,240 it's January 1st, 1970, and on the number of milliseconds till now. 14 00:00:51,250 --> 00:00:52,620 So it's always going to be different. 15 00:00:52,860 --> 00:00:56,340 So if I do it again, I see that's already incremented a little bit. 16 00:00:56,520 --> 00:01:01,770 There's almost a full second of incrementing here and it's going to continuously increment. 17 00:01:01,980 --> 00:01:04,010 So again, two milliseconds. 18 00:01:04,020 --> 00:01:09,420 So it's always going to be a different value or almost always, unless you're typing really super fast. 19 00:01:10,200 --> 00:01:16,360 So next, we need to be able to check to see what the differences between the end time and start time. 20 00:01:16,800 --> 00:01:20,130 So let's create a variable for I can just call it dif. 21 00:01:20,160 --> 00:01:26,720 We'll take our end time variable, subtracting the div start time value. 22 00:01:26,730 --> 00:01:32,400 So that's the one that we set whenever the element was created and we're going to divide it by a thousand 23 00:01:32,550 --> 00:01:35,100 so we get a value within seconds. 24 00:01:35,400 --> 00:01:37,760 Now we can output it into the score. 25 00:01:38,190 --> 00:01:40,670 So we've got an element here within score. 26 00:01:40,980 --> 00:01:45,720 So taking that score object, we can add our inner HTML to that. 27 00:01:45,900 --> 00:01:48,300 And then here's where we've got our value. 28 00:01:48,600 --> 00:01:53,100 Second, and we also want the ability to restart the game, of course. 29 00:01:53,430 --> 00:02:01,530 So where we've hit that start button, let's saw that start button by setting its style properties to 30 00:02:01,530 --> 00:02:02,150 block. 31 00:02:02,160 --> 00:02:05,700 And we also want to remove from the container. 32 00:02:05,910 --> 00:02:09,420 So taking that container object, we're going to remove a child. 33 00:02:09,720 --> 00:02:12,350 And the child that we're moving is that div that we created. 34 00:02:12,450 --> 00:02:14,040 So I think we're ready to try that out. 35 00:02:14,070 --> 00:02:15,560 So save try it out. 36 00:02:15,570 --> 00:02:20,640 Wait till the element shows up and our score is not defined because we defined it a score area. 37 00:02:20,910 --> 00:02:23,160 So let's make that update and try that one more time. 38 00:02:23,160 --> 00:02:25,050 And that's how many seconds it was clicked in. 39 00:02:25,290 --> 00:02:30,840 So something went wrong with our math here or we've got to get around that before we divide it by a 40 00:02:30,840 --> 00:02:31,260 thousand. 41 00:02:31,260 --> 00:02:32,690 So try that one more time. 42 00:02:32,730 --> 00:02:37,230 Sometimes it does take a little bit of playing through just to make sure that it's functioning as needed. 43 00:02:37,470 --> 00:02:44,280 So we clicked it in one point zero two seconds and this time we got one point six three five seconds. 44 00:02:44,400 --> 00:02:49,140 So go ahead and add the click functionality into your game and you can be ready to move on to the next 45 00:02:49,140 --> 00:02:49,410 step. 46 00:02:49,410 --> 00:02:50,490 We're going to do some improvements.