This lesson, we're going to set up our e-mail that we're going to utilize in the upcoming lessons,
first of all, we need a div, give it a class, and this is where our typed out message will be.
And that can just be a blank div for now.
Next, we need a text area.
So this is the area where the user is actually going to type something.
We can give it a name and let's just call it words.
And we'll set a number of columns.
So but we do 75 columns and also some rows, the five rows, and we're going to start it off as default
disabled because we don't want the user coming in and typing anything quite yet.
And a simple line break.
And of course, you can style this as needed setting type so type button and we'll just have a start
button.
So when the user is ready to start their typing test, they can hit the start button and the text will
appear here within the message area.
And I already do have a bunch of text here and you can add this in as needed.
So I've got an array of several different phrases that we can put out there for the user and challenge
the user to type.
So we've got three different phrases, their string values.
Next, let's.
Connect our JavaScript to our elements on the page.
So selecting a variable called message, we're going to use documents.
I'm going to make this big.
So using the document object, we can use query selector, selecting out the element with a class of
message that's going to be contained within that object.
We also want to have our PLI text.
So this is the text area.
That player is going to be outputting it.
And once again, we can use query selector because we only have the one element and this one we can
go by tag name so we can use text area and one more that we need to connect with.
And that's the button.
So using document query selector, we're going to grab the elements, the button on the page and then
using a button we're going to add an event listener.
So making our button clickable.
So whenever the user clicks the button that we know they're ready to start typing.
And then this is where we have all of our gameplay.
And for now, we'll just do a console log and we'll take the inner text of that current button.
So in case we decide to add some more buttons, we can make sure that the user's clicking the one with
start inside of it or in case we update this content.
So refresh start and we see that start gets output within our console.
So go ahead and set this up.
You can use the wording that I have fun wording or you can create your own and added into this project.
So you will need some content for the user to type.
Go ahead and set up your HTML and then connect your HTML.
So your document object content into your JavaScript, adding an event listener button.
So making the button clickable and you're going to be ready to proceed to the next lesson where we're
going to continue to build this application out.
So go ahead and set that up.