In this lesson, we're going to be adding in a timer to time how many milliseconds it took for the player
to solve the game.
So let's set up another variable and we'll call it start time.
And we're not going to have any values in here because we're going to set this as the start begins,
so whenever you hit the start button, we're going to count and calculate the current time and using
this as a global variable.
So we're going to start we're going to set the current time to new date, getting the current time of
the new date object.
And we want to pass this into milliseconds.
So using date pass and this will bring the count to how many milliseconds since January 1st.
Nineteen seventy of the new date.
And the new date is the current time.
So this is our start time that we can consult, logout that information.
So start time will always be different depending on where you're starting.
And if you're watching this video, your start time is going to be larger than my start time.
So every time we start it, we see that that start time is changing and that is increasing because it's
counting down from that date, from that January 1st, 1978.
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.
So setting up our end time and using the same format, so Dete Pass.
Getting the end time, which would be the current time whenever we're finishing the game, and then
the difference, so duration.
So this is the time that we've played, we're going to take end time, witnessing the start time.
And duration, so see what that looks like.
So go back refreshed now we need to get all of the words and that took fourteen thousand milliseconds.
And in order to get seconds, we can take this value and we can divide it by 1000.
So it took actually 14 seconds to try that one more time.
So start game.
So now we're calculating how much time it took and we should also have something where whenever we've
already selected one of these words, we should have something that covers that and updating that value.
So let's update the current one.
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.
Or we could also apply a style.
So this gives us a little bit more flexibility.
We can do a hidden change.
Visibility to hidden.
That's actually a better one, because that way we're going to still be reserving that spot, so let's
try that now.
So coding is going to disappear.
We've got brackets is going to disappear.
So now as we're selecting them, we see them that they're going to be disappearing from that selection.
That's going to make it a little bit easier.
And then when we finish the game, we need to reinitiate and have that start button once again and we
can clear out the contents of game as well.
So let's do that.
So once we wrap up the game, we want to show the start button again.
And that start button, if we go into inspect that button, is still there.
It's just not visible.
So we've just got it on display.
None.
So we need to select that button and update the display value of that button.
So using document and query selector and apply style is going to equal Bluck so we can see that start
button again.
So one more time, let's play through it and hopefully really quickly.
And that one took six seconds and we get our start button again.
And so now we see that being rendered out again.
So all we need to do is clear out that game area that we had used earlier in order to render out all
of these elements.
So using that same document query selector and we're going to clear out all of those elements that are
available within that gameplay area.
So using game and setting the inner HTML and we'll set the entire him out to be blank for that one to
try that one more time.
So of course, HTML JavaScript brackets coding and Lowrance.
So we need to duplicate that array out and I'll show you how to do that in the upcoming lesson.
So that's one last fix we need to do before we launch this application.