This lesson, we're going to be setting up our text area that we're going to use in the later lessons
to connect with and count the number of characters that are available within the text area is, first
of all, set up our div.
So this is our main container div withinside that div.
We're going to need a text area element and we can give this one a class.
Let's call it text, and we also need an output area, so a div give that one a class of output so that
we can provide some messaging to the user as they're typing content into their text area.
Next, let's open up our JavaScript.
So within our script tags, we're going to be connecting these elements as JavaScript objects.
So first of all, setting up our output, using documents and I'm going to use query selector in order
to select the class with the class of output.
So add that into a variable called output.
Also, we're going to be selecting the text area.
I'm going to just call that text.
So document using query selector as well.
We're going to be selecting the whole text area.
So all of that content that's available within the text area.
So next, we're ready to add an event listener.
So let's save that, refresh it.
And then we've got our text area.
We can also apply some styling to style our text area.
So we've got our style tags up here.
So selecting our text area, let's set up a default width for it.
So how about we do four hundred picks as a default and a height of 150?
So go ahead and set this up for yourself.
You should have a basic text area within your browser as well as an output class, an output div that's
just below that.
So once you've set that up and you can also make sure that everything is set up properly by going into
the console and typing the names of the variables so that if you see them being output here, then you've
made the successful connection to those elements.
So coming up next, we're going to add event listeners and add some interaction.