1 00:00:00,240 --> 00:00:05,550 In this lesson, we're going to be adding in a timer to time how many milliseconds it took for the player 2 00:00:05,550 --> 00:00:06,660 to solve the game. 3 00:00:06,870 --> 00:00:10,680 So let's set up another variable and we'll call it start time. 4 00:00:11,850 --> 00:00:17,280 And we're not going to have any values in here because we're going to set this as the start begins, 5 00:00:17,520 --> 00:00:23,460 so whenever you hit the start button, we're going to count and calculate the current time and using 6 00:00:23,460 --> 00:00:24,840 this as a global variable. 7 00:00:25,080 --> 00:00:31,800 So we're going to start we're going to set the current time to new date, getting the current time of 8 00:00:31,800 --> 00:00:33,060 the new date object. 9 00:00:33,510 --> 00:00:36,420 And we want to pass this into milliseconds. 10 00:00:36,640 --> 00:00:43,920 So using date pass and this will bring the count to how many milliseconds since January 1st. 11 00:00:43,920 --> 00:00:45,960 Nineteen seventy of the new date. 12 00:00:45,960 --> 00:00:47,790 And the new date is the current time. 13 00:00:48,600 --> 00:00:52,500 So this is our start time that we can consult, logout that information. 14 00:00:52,800 --> 00:00:55,950 So start time will always be different depending on where you're starting. 15 00:00:56,130 --> 00:01:00,290 And if you're watching this video, your start time is going to be larger than my start time. 16 00:01:00,540 --> 00:01:06,390 So every time we start it, we see that that start time is changing and that is increasing because it's 17 00:01:06,390 --> 00:01:10,800 counting down from that date, from that January 1st, 1978. 18 00:01:11,460 --> 00:01:17,880 So that's that we need to do is once we finish the game, we just need to add in and get an end time. 19 00:01:19,370 --> 00:01:25,970 So setting up our end time and using the same format, so Dete Pass. 20 00:01:27,360 --> 00:01:33,300 Getting the end time, which would be the current time whenever we're finishing the game, and then 21 00:01:33,330 --> 00:01:36,080 the difference, so duration. 22 00:01:37,350 --> 00:01:43,350 So this is the time that we've played, we're going to take end time, witnessing the start time. 23 00:01:45,180 --> 00:01:47,190 And duration, so see what that looks like. 24 00:01:47,580 --> 00:01:56,130 So go back refreshed now we need to get all of the words and that took fourteen thousand milliseconds. 25 00:01:56,370 --> 00:02:02,120 And in order to get seconds, we can take this value and we can divide it by 1000. 26 00:02:02,250 --> 00:02:06,390 So it took actually 14 seconds to try that one more time. 27 00:02:06,420 --> 00:02:07,160 So start game. 28 00:02:07,920 --> 00:02:13,350 So now we're calculating how much time it took and we should also have something where whenever we've 29 00:02:13,350 --> 00:02:21,020 already selected one of these words, we should have something that covers that and updating that value. 30 00:02:21,930 --> 00:02:23,970 So let's update the current one. 31 00:02:24,000 --> 00:02:30,200 So if we got it right and we'll add a class of hidden to it, so we're not going to be clicking it anymore. 32 00:02:30,690 --> 00:02:32,460 Or we could also apply a style. 33 00:02:33,030 --> 00:02:34,980 So this gives us a little bit more flexibility. 34 00:02:35,010 --> 00:02:37,080 We can do a hidden change. 35 00:02:37,080 --> 00:02:39,360 Visibility to hidden. 36 00:02:40,470 --> 00:02:45,150 That's actually a better one, because that way we're going to still be reserving that spot, so let's 37 00:02:45,150 --> 00:02:45,780 try that now. 38 00:02:46,050 --> 00:02:48,330 So coding is going to disappear. 39 00:02:48,690 --> 00:02:50,760 We've got brackets is going to disappear. 40 00:02:50,970 --> 00:02:55,740 So now as we're selecting them, we see them that they're going to be disappearing from that selection. 41 00:02:55,780 --> 00:02:57,120 That's going to make it a little bit easier. 42 00:02:57,270 --> 00:03:02,160 And then when we finish the game, we need to reinitiate and have that start button once again and we 43 00:03:02,160 --> 00:03:05,020 can clear out the contents of game as well. 44 00:03:05,460 --> 00:03:06,380 So let's do that. 45 00:03:06,390 --> 00:03:10,440 So once we wrap up the game, we want to show the start button again. 46 00:03:10,590 --> 00:03:15,560 And that start button, if we go into inspect that button, is still there. 47 00:03:15,570 --> 00:03:16,590 It's just not visible. 48 00:03:17,130 --> 00:03:18,420 So we've just got it on display. 49 00:03:18,420 --> 00:03:18,750 None. 50 00:03:18,910 --> 00:03:23,160 So we need to select that button and update the display value of that button. 51 00:03:23,170 --> 00:03:31,950 So using document and query selector and apply style is going to equal Bluck so we can see that start 52 00:03:31,950 --> 00:03:32,470 button again. 53 00:03:33,300 --> 00:03:36,480 So one more time, let's play through it and hopefully really quickly. 54 00:03:36,630 --> 00:03:39,910 And that one took six seconds and we get our start button again. 55 00:03:40,110 --> 00:03:42,440 And so now we see that being rendered out again. 56 00:03:42,630 --> 00:03:49,110 So all we need to do is clear out that game area that we had used earlier in order to render out all 57 00:03:49,110 --> 00:03:49,920 of these elements. 58 00:03:50,370 --> 00:03:56,910 So using that same document query selector and we're going to clear out all of those elements that are 59 00:03:56,910 --> 00:03:58,480 available within that gameplay area. 60 00:03:58,950 --> 00:04:06,150 So using game and setting the inner HTML and we'll set the entire him out to be blank for that one to 61 00:04:06,150 --> 00:04:07,150 try that one more time. 62 00:04:07,260 --> 00:04:12,300 So of course, HTML JavaScript brackets coding and Lowrance. 63 00:04:12,570 --> 00:04:17,520 So we need to duplicate that array out and I'll show you how to do that in the upcoming lesson. 64 00:04:17,540 --> 00:04:20,880 So that's one last fix we need to do before we launch this application.