Use event listeners to detect typing

- [Instructor] All right, let's start with the interactive components of our app. There are two interactive elements here, the test area, where we need to detect input, and here we need to do two things, first, detect the very first keystroke to start the clock, then, match the string of text that is being entered into this box with the string of text above. So we need to count the number of letters, and then count the number of letters in the string, and make sure that the two match. The second interactive element is the Start Over button, I just need to detect a click, here, and for all of this, I need a couple of event listeners.

So at the very bottom of my script, I'm going to start by setting up an eventListener for this box. But remember, this box is the test area box, so I'll say, testArea, addEventListener. Here I'm detecting keyboard events, and there are a ton of keyboard events to detect. In this case, I want to start the timer when the first key is pressed, so I'm going to use the keypress event, that will trigger the start function, which starts the timer.

Then I can set up that start function. And inside the start function, I need to make sure that I'm only detecting the very first keypress, so I'll do a quick little cheat here, and detect how much content currently sits inside this box, and if that content that currently sits there is equal to zero, then we start the timer. So I'll set up a let, with the name textEnteredLength, and set that equal to testArea.

Here we want the value of the testArea, so that's what's being entered, and a length property. If I console.log textEnteredLength, and open the console, you'll see that the first keystroke I make has the number zero. That's because at the time of that keystroke, there were zero letters inside this box, because the keypress event happens before the content actually gets entered into that value.

That also means, for the spellchecking component, where I need to match the key just entered in with the text up here in the box, I need to detect a different event. I'll go back to my script and add testArea, again. This time, I want to detect a keyup event, so that's when you let go of the key, and when the keyup event happens, I'll run a new function called spellCheck, and I'll set up that new function.

And here, we'll set up a new let, with the name textEntered, and set that equal to testArea and value. If I console.log out this value, you'll see in the console here, that when I input content, I first capture the number of strokes already in the box, so the first key will be zero, then, when I let go of the key, we output the actual text entered.

So if I put in A here, we get zero, then A. If I put in B, we get one, AB. C, two, ABC. That means I have the structural components in place to both start the timer, and do a proper string there between the string inside the test area, and the test string. That leaves one interactive component, the Start Over button. This is just a standard button, so we're going to grab the button, resetButton, addEventListener.

Here we're detecting click, and when the click happens, we run the reset function. Reset function is right here, and for now, we'll just console.log out reset button has been pressed! Save that, click the button. Every time we click it, reset button has been pressed. All right, that means we have all the interactive components in place, and we're ready for the next step.