1
00:00:01,510 --> 00:00:06,040
This lesson, we're going to be setting up our text area that we're going to use in the later lessons

2
00:00:06,040 --> 00:00:11,650
to connect with and count the number of characters that are available within the text area is, first

3
00:00:11,650 --> 00:00:13,030
of all, set up our div.

4
00:00:13,030 --> 00:00:16,330
So this is our main container div withinside that div.

5
00:00:16,330 --> 00:00:21,490
We're going to need a text area element and we can give this one a class.

6
00:00:23,480 --> 00:00:31,310
Let's call it text, and we also need an output area, so a div give that one a class of output so that

7
00:00:31,310 --> 00:00:36,800
we can provide some messaging to the user as they're typing content into their text area.

8
00:00:37,280 --> 00:00:39,830
Next, let's open up our JavaScript.

9
00:00:39,840 --> 00:00:45,870
So within our script tags, we're going to be connecting these elements as JavaScript objects.

10
00:00:46,220 --> 00:00:54,380
So first of all, setting up our output, using documents and I'm going to use query selector in order

11
00:00:54,380 --> 00:00:59,080
to select the class with the class of output.

12
00:00:59,600 --> 00:01:02,570
So add that into a variable called output.

13
00:01:03,050 --> 00:01:05,810
Also, we're going to be selecting the text area.

14
00:01:06,230 --> 00:01:07,910
I'm going to just call that text.

15
00:01:08,060 --> 00:01:11,790
So document using query selector as well.

16
00:01:12,260 --> 00:01:15,040
We're going to be selecting the whole text area.

17
00:01:15,230 --> 00:01:17,840
So all of that content that's available within the text area.

18
00:01:18,040 --> 00:01:20,260
So next, we're ready to add an event listener.

19
00:01:20,270 --> 00:01:21,980
So let's save that, refresh it.

20
00:01:22,190 --> 00:01:24,240
And then we've got our text area.

21
00:01:24,500 --> 00:01:28,550
We can also apply some styling to style our text area.

22
00:01:28,550 --> 00:01:30,740
So we've got our style tags up here.

23
00:01:30,860 --> 00:01:36,000
So selecting our text area, let's set up a default width for it.

24
00:01:36,020 --> 00:01:40,970
So how about we do four hundred picks as a default and a height of 150?

25
00:01:41,450 --> 00:01:43,580
So go ahead and set this up for yourself.

26
00:01:44,090 --> 00:01:52,430
You should have a basic text area within your browser as well as an output class, an output div that's

27
00:01:52,430 --> 00:01:53,180
just below that.

28
00:01:53,530 --> 00:01:59,180
So once you've set that up and you can also make sure that everything is set up properly by going into

29
00:01:59,180 --> 00:02:06,110
the console and typing the names of the variables so that if you see them being output here, then you've

30
00:02:06,110 --> 00:02:08,640
made the successful connection to those elements.

31
00:02:08,810 --> 00:02:12,740
So coming up next, we're going to add event listeners and add some interaction.