Add a reset button

- [Instructor] There's only one component left in our typing speed app and that is the start over button. Right now you can run the test, you can complete the test but if you want to run it again you have to reload the page. That's really clunky. It would be way better if we could just click the start over button, either if you complete the test and you want to do it again, or if you make a lot of errors and you have no idea where to start and you just want to start over, this button should work. We already hooked into the button in the beginning of this chapter by adding an event listener to the click event on the button and triggering the reset function.

Now we're going to go back and reset every single state so that we can start the whole process over. The first thing we'll do is reset the interval timer that runs in the background. That's that setInterval timer that sits inside the interval variable, so we'll just say clearInterval, interval. This just ensures the browser's not running in interval in the background after we start a new one because that would just waste a lot of resources. Next we'll grab the interval variable and set it to null.

We do this so that when we reassign set interval the next time we start the app we're not setting up a new interval with a new index number because then again we'll be running multiple processes in the browser simultaneously and waste a lot of resources. We also want to set the clock back to zero and that means we need to set the timer array back to zero. And here you'll remember it had four values. And finally, we need to set timerRunning back to false so that the if textEnteredLength equals zero and not timerRunning statement is true, and we can set up a new interval and run the clock again.

And now all that's left to do is the visual reset because right now if I go into my browser and I start typing something, I can start over but the starting over only happens on the back end, so if I now keep typing, nothing is working, and I have to go back and then it starts again, so it's not quite working the way I want yet. The first thing I need to do is clear the text area over here, so testArea.value, and I'll set that to nothing.

Next I'll reset the timer back to zero, the Timer.innerHTML zero, zero, zero, zero, zero, zero, and finally, I'll set the line around the box back to gray. Save that one final time and now you can go back and run the tests.

Looks like start over. Run the test again. Click start over. Run the test again. And I have to warn you this gets really, really addictive but what you see here is the functionality works as expected. Now that this typing speed app is complete you want to change the test text because right now this is really short.

You can so that by going to index.html, scrolling down until we find the div with the ID origin text, and just putting something else inside this paragraph. So, if I grab all of this text up here, and paste it in, save that, the text we're testing again will now change and we can match up this one instead. Now, I'm not going to finish this test because it'll take way too long and you don't want to watch that but what you see is the string matching between these two fields is exact.

It matches upper and lower case, symbols, numbers and everything else, so this really is a true typing speed test. Of course, if you want to enhance this typing speed tester you can. One thing you can do is add a words per minute count. You can find the calculation for it online, and you can just grab the time that you calculated, and combine it with the number of words in your test, and then you can figure out exactly how fast you're typing. You can also count the number of errors the person doing the test makes because every time an error is triggered you can just increment a number and then it can display the number of errors or you can do something really advanced like add an array of different texts so the tester can switch between different texts to test or even add a high score board.

All these things are possible with what you've learned so far in the course. Or you can just leave the app exactly the way it is, use it to your heart's content and speed up your own typing skills.