1
00:00:00,450 --> 00:00:02,170
Hello and welcome this lesson.

2
00:00:02,190 --> 00:00:06,570
We are going to be setting up and preparing to build our application, which is going to be an email

3
00:00:06,570 --> 00:00:11,250
extractor, there's a few things that we need to cover off and a little bit of each HTML that we have

4
00:00:11,250 --> 00:00:14,310
to add in in order to be able to create our output.

5
00:00:14,580 --> 00:00:16,950
So first of all, let's create a text area.

6
00:00:16,980 --> 00:00:23,010
We can use this text area to provide a spot for the user to be able to paste content in, and then we

7
00:00:23,010 --> 00:00:28,540
can use that in order to extract out all of the email addresses out of that string value.

8
00:00:28,860 --> 00:00:34,590
Also, let's create a button and we can get we can give it a label here of get emails.

9
00:00:34,710 --> 00:00:36,920
And then lastly, one more text area.

10
00:00:37,110 --> 00:00:40,560
And this is going to be the text area where we're going to put that content.

11
00:00:40,560 --> 00:00:44,430
So all of the emails are going to go out here and we can call this one output.

12
00:00:44,610 --> 00:00:50,730
Let's do a quick refresh now, opening up our script area and selecting the elements in order to be

13
00:00:50,730 --> 00:00:54,430
able to apply and make use of them within our JavaScript code.

14
00:00:54,460 --> 00:00:57,900
Well, this is going to be our raw text or raw string.

15
00:00:57,900 --> 00:01:04,020
We can just call it raw text and using documents, query selector, we're going to select text area

16
00:01:04,020 --> 00:01:05,850
and we do have two text areas.

17
00:01:05,850 --> 00:01:11,970
So we have to select according to the name and specify the name of the text area as text area.

18
00:01:12,000 --> 00:01:16,560
So that can distinguish between the two different text area elements that we have on our page.

19
00:01:16,560 --> 00:01:22,410
But once we save that and usually I do like to check to make sure that I do have that raw text area

20
00:01:22,440 --> 00:01:23,340
available for me.

21
00:01:23,340 --> 00:01:25,200
So I am selecting that right element.

22
00:01:25,200 --> 00:01:29,310
And there's a number of different ways you could also give it in an ID and selected by the ID or the

23
00:01:29,310 --> 00:01:29,760
class.

24
00:01:29,940 --> 00:01:32,000
So there's a number of different ways to get that.

25
00:01:32,250 --> 00:01:36,480
There's also a few other options, few other elements that we need to select.

26
00:01:36,510 --> 00:01:41,490
So this is the finished text and this one has a name of output.

27
00:01:41,490 --> 00:01:43,320
So make sure that we can select that.

28
00:01:43,320 --> 00:01:46,140
And this is where we're going to be outputting finished emails.

29
00:01:46,150 --> 00:01:49,440
And then lastly, we've got one last one and this is the button.

30
00:01:49,440 --> 00:01:54,870
So selecting out our button object and this one's really easy because we only do have just the one button

31
00:01:55,050 --> 00:02:00,690
so we can select it by the tag selecting the button element and we can add an event listener, of course,

32
00:02:00,690 --> 00:02:02,040
to that so button.

33
00:02:02,520 --> 00:02:04,440
So just make sure that we do have the right element.

34
00:02:04,830 --> 00:02:07,670
And lastly, let's add in an event listener to that.

35
00:02:07,890 --> 00:02:14,790
So the BTE adding in add event, listener and event listener that we want to listen for is a click and

36
00:02:14,790 --> 00:02:21,330
once it gets clicked, that we want to pull out that information from the text area and pass it through

37
00:02:21,330 --> 00:02:27,180
our formula, where are we going to be extracting the email addresses and then finally output that finished

38
00:02:27,180 --> 00:02:29,080
text in the finished text area.

39
00:02:29,460 --> 00:02:35,250
So just adding in that last event listener, just to make sure that everything is functioning, so ready

40
00:02:35,250 --> 00:02:36,420
to move on to the next step.

41
00:02:36,660 --> 00:02:40,350
So go ahead and click the email so you should see click within the console.

42
00:02:40,530 --> 00:02:43,050
I can make this a little bit bigger as well so you can see it.

43
00:02:43,680 --> 00:02:49,890
So we see we've got our text area here, our second text area, and you can reference them according

44
00:02:49,890 --> 00:02:51,390
to the JavaScript objects.

45
00:02:51,540 --> 00:02:57,480
And you can in Chrome, as you reference them and you hover over it, you can see that it highlights

46
00:02:57,630 --> 00:02:58,860
the correct element.

47
00:02:59,220 --> 00:03:03,660
So that's how you know that you've got the correct element into the JavaScript object and you're ready

48
00:03:03,660 --> 00:03:06,150
to go with it as well as the button.

49
00:03:06,510 --> 00:03:07,710
And we've got that one.

50
00:03:07,710 --> 00:03:13,470
And you can also see when you click it that that gets triggered and it runs the block a code that's

51
00:03:13,710 --> 00:03:14,460
within the event.

52
00:03:14,460 --> 00:03:18,480
Listener, one last thing I do want to add into the button.

53
00:03:18,480 --> 00:03:22,080
I'm going to just have some line breaks there so it looks a little bit better on the page.

54
00:03:22,320 --> 00:03:25,890
One hundred columns, we can just go with fifty, so it's half as wide.

55
00:03:25,890 --> 00:03:28,260
And of course, you could do this within styling as well.

56
00:03:28,380 --> 00:03:34,170
This is the spot where you paste the emails so we can also label that so we can say paste and then we'll

57
00:03:34,170 --> 00:03:34,860
line break that.

58
00:03:34,860 --> 00:03:35,680
So refresh.

59
00:03:35,700 --> 00:03:40,680
So this is where our generated content is going to be output and then the user can select that paste

60
00:03:40,680 --> 00:03:41,220
that in.

61
00:03:41,250 --> 00:03:41,940
So that's good.

62
00:03:42,030 --> 00:03:43,320
Clean out all of the text.

63
00:03:43,560 --> 00:03:46,050
So go ahead and set this up within your own project.

64
00:03:46,050 --> 00:03:50,400
Set up the JavaScript objects so you're ready to move on to the next lesson.

65
00:03:50,490 --> 00:03:56,400
We're going to be taking a look at how we can actually extract the email values out of the text and

66
00:03:56,400 --> 00:04:00,630
then output them lastly into the finished text element.

67
00:04:00,900 --> 00:04:02,310
So that's all still to come.