1
00:00:00,120 --> 00:00:04,680
This lesson, we're going to set up our e-mail that we're going to utilize in the upcoming lessons,

2
00:00:04,950 --> 00:00:10,890
first of all, we need a div, give it a class, and this is where our typed out message will be.

3
00:00:12,320 --> 00:00:14,960
And that can just be a blank div for now.

4
00:00:15,440 --> 00:00:17,410
Next, we need a text area.

5
00:00:17,660 --> 00:00:21,890
So this is the area where the user is actually going to type something.

6
00:00:22,220 --> 00:00:25,850
We can give it a name and let's just call it words.

7
00:00:27,900 --> 00:00:29,880
And we'll set a number of columns.

8
00:00:31,370 --> 00:00:40,730
So but we do 75 columns and also some rows, the five rows, and we're going to start it off as default

9
00:00:40,730 --> 00:00:45,140
disabled because we don't want the user coming in and typing anything quite yet.

10
00:00:46,360 --> 00:00:47,960
And a simple line break.

11
00:00:47,980 --> 00:00:56,230
And of course, you can style this as needed setting type so type button and we'll just have a start

12
00:00:56,230 --> 00:00:56,550
button.

13
00:00:56,860 --> 00:01:03,220
So when the user is ready to start their typing test, they can hit the start button and the text will

14
00:01:03,220 --> 00:01:04,950
appear here within the message area.

15
00:01:05,260 --> 00:01:10,480
And I already do have a bunch of text here and you can add this in as needed.

16
00:01:10,640 --> 00:01:17,980
So I've got an array of several different phrases that we can put out there for the user and challenge

17
00:01:17,980 --> 00:01:19,480
the user to type.

18
00:01:19,660 --> 00:01:23,110
So we've got three different phrases, their string values.

19
00:01:24,350 --> 00:01:25,310
Next, let's.

20
00:01:26,220 --> 00:01:31,150
Connect our JavaScript to our elements on the page.

21
00:01:31,860 --> 00:01:36,950
So selecting a variable called message, we're going to use documents.

22
00:01:36,960 --> 00:01:37,930
I'm going to make this big.

23
00:01:38,520 --> 00:01:46,170
So using the document object, we can use query selector, selecting out the element with a class of

24
00:01:46,170 --> 00:01:50,070
message that's going to be contained within that object.

25
00:01:50,550 --> 00:01:54,150
We also want to have our PLI text.

26
00:01:55,050 --> 00:01:57,150
So this is the text area.

27
00:01:57,150 --> 00:01:59,600
That player is going to be outputting it.

28
00:02:00,360 --> 00:02:05,340
And once again, we can use query selector because we only have the one element and this one we can

29
00:02:05,340 --> 00:02:10,860
go by tag name so we can use text area and one more that we need to connect with.

30
00:02:10,860 --> 00:02:12,040
And that's the button.

31
00:02:12,630 --> 00:02:22,260
So using document query selector, we're going to grab the elements, the button on the page and then

32
00:02:22,290 --> 00:02:24,860
using a button we're going to add an event listener.

33
00:02:24,870 --> 00:02:27,120
So making our button clickable.

34
00:02:27,330 --> 00:02:31,740
So whenever the user clicks the button that we know they're ready to start typing.

35
00:02:31,950 --> 00:02:34,350
And then this is where we have all of our gameplay.

36
00:02:35,070 --> 00:02:43,880
And for now, we'll just do a console log and we'll take the inner text of that current button.

37
00:02:44,370 --> 00:02:50,060
So in case we decide to add some more buttons, we can make sure that the user's clicking the one with

38
00:02:50,100 --> 00:02:53,660
start inside of it or in case we update this content.

39
00:02:54,180 --> 00:02:58,900
So refresh start and we see that start gets output within our console.

40
00:02:59,310 --> 00:03:00,630
So go ahead and set this up.

41
00:03:00,840 --> 00:03:06,780
You can use the wording that I have fun wording or you can create your own and added into this project.

42
00:03:06,990 --> 00:03:10,050
So you will need some content for the user to type.

43
00:03:10,350 --> 00:03:14,700
Go ahead and set up your HTML and then connect your HTML.

44
00:03:14,700 --> 00:03:20,700
So your document object content into your JavaScript, adding an event listener button.

45
00:03:20,890 --> 00:03:25,440
So making the button clickable and you're going to be ready to proceed to the next lesson where we're

46
00:03:25,440 --> 00:03:27,260
going to continue to build this application out.

47
00:03:27,420 --> 00:03:28,520
So go ahead and set that up.