Hello and welcome this lesson.
We are going to be setting up and preparing to build our application, which is going to be an email
extractor, there's a few things that we need to cover off and a little bit of each HTML that we have
to add in in order to be able to create our output.
So first of all, let's create a text area.
We can use this text area to provide a spot for the user to be able to paste content in, and then we
can use that in order to extract out all of the email addresses out of that string value.
Also, let's create a button and we can get we can give it a label here of get emails.
And then lastly, one more text area.
And this is going to be the text area where we're going to put that content.
So all of the emails are going to go out here and we can call this one output.
Let's do a quick refresh now, opening up our script area and selecting the elements in order to be
able to apply and make use of them within our JavaScript code.
Well, this is going to be our raw text or raw string.
We can just call it raw text and using documents, query selector, we're going to select text area
and we do have two text areas.
So we have to select according to the name and specify the name of the text area as text area.
So that can distinguish between the two different text area elements that we have on our page.
But once we save that and usually I do like to check to make sure that I do have that raw text area
available for me.
So I am selecting that right element.
And there's a number of different ways you could also give it in an ID and selected by the ID or the
class.
So there's a number of different ways to get that.
There's also a few other options, few other elements that we need to select.
So this is the finished text and this one has a name of output.
So make sure that we can select that.
And this is where we're going to be outputting finished emails.
And then lastly, we've got one last one and this is the button.
So selecting out our button object and this one's really easy because we only do have just the one button
so we can select it by the tag selecting the button element and we can add an event listener, of course,
to that so button.
So just make sure that we do have the right element.
And lastly, let's add in an event listener to that.
So the BTE adding in add event, listener and event listener that we want to listen for is a click and
once it gets clicked, that we want to pull out that information from the text area and pass it through
our formula, where are we going to be extracting the email addresses and then finally output that finished
text in the finished text area.
So just adding in that last event listener, just to make sure that everything is functioning, so ready
to move on to the next step.
So go ahead and click the email so you should see click within the console.
I can make this a little bit bigger as well so you can see it.
So we see we've got our text area here, our second text area, and you can reference them according
to the JavaScript objects.
And you can in Chrome, as you reference them and you hover over it, you can see that it highlights
the correct element.
So that's how you know that you've got the correct element into the JavaScript object and you're ready
to go with it as well as the button.
And we've got that one.
And you can also see when you click it that that gets triggered and it runs the block a code that's
within the event.
Listener, one last thing I do want to add into the button.
I'm going to just have some line breaks there so it looks a little bit better on the page.
One hundred columns, we can just go with fifty, so it's half as wide.
And of course, you could do this within styling as well.
This is the spot where you paste the emails so we can also label that so we can say paste and then we'll
line break that.
So refresh.
So this is where our generated content is going to be output and then the user can select that paste
that in.
So that's good.
Clean out all of the text.
So go ahead and set this up within your own project.
Set up the JavaScript objects so you're ready to move on to the next lesson.
We're going to be taking a look at how we can actually extract the email values out of the text and
then output them lastly into the finished text element.
So that's all still to come.