Rundown of HTML markup

- [Narrator] To start this project let's take a quick look at the files we'll be working with. Index.html has some standard components. Here we have a H1 heading at the very top followed by a description of what this app is all about. Then there's a container that holds the test text. This is the text that needs to be matched down here in the text area. And finally we have a timer area, and a button that says Start over. Right now, none of this stuff works. Timer is not running, nothing happens when I type, and I can click on this button all I want, nothings happening.

That's fine, we're not going to make any changes to the HTML or the CSS of this. This is exactly what the app will look like when it's done. What we will do is write a bunch of Javascripts to hook into the different features. Let's take a quick look at the backend to just see how everything stitches together. Here in index.html we have a header that is the header section. We then have a main that holds all the main content. And inside the main there's the article at the top that has the intro content. None of this is relevant to what we're doing.

The section with the class test-area is where the actual test happens. And here we have first a div with the id origin-text, that contains a paragraph. The contents inside this container is what we'll use to match against what the user is typing in. So whatever text you put here where it currently says The text to test, will be the text that the user needs to type in. Then we have the test-wrapper. Here we have textarea with the id test-area that we will retrieve content from. Here there's a section with id clock that contains a div with the class timer.

Currently it's just hard-coded to 00:00:00, this is the starting state of the timer. And then finally we have a button with the id reset, that says Start over. Like I said, we're not touching any of this. You can if you want to change the text inside this origin-text area, but that's the only thing you'll need to make any changes to. In script.js I've just set up constants that map to the different components within index.html. So here we have testWrapper which maps to the test-wrapper. We have testArea which maps to test-area.

originText maps to origin-text p, so that is the inner html of the paragraph that sits inside this origin text box here. resetButton maps to the id reset. And finally theTimer maps to timer. In addition, I've added comments in script.js that list out all the different things we need to do to get the script to work. So if we start at the bottom we add event listeners for keyboard input and the reset button. That's just so that we can actually interact with the app. Then, when we interact with the app, several things will happen.

We'll start the timer, then we will actually run the timer up here. Then we will match the text entered with the provided text on the page. And finally there's a reset button to reset everything. Alright, those are the structural components, now let's work through this app step by step to add in all the features and get it to work properly.