1
00:00:00,300 --> 00:00:05,160
Hello and welcome back in this lesson, we're going to do a quick code review, and I'm also going to

2
00:00:05,160 --> 00:00:11,010
do a little bonus improvement on our application to make it function a little bit more seamlessly for

3
00:00:11,010 --> 00:00:11,550
the user.

4
00:00:11,910 --> 00:00:18,630
So the user, the objective of this application is for users that have a whole bunch of string content

5
00:00:18,960 --> 00:00:22,950
and they want to get the emails out and they not only want to get the emails, they want to get the

6
00:00:22,950 --> 00:00:27,300
unique emails out of this huge string of content.

7
00:00:27,690 --> 00:00:30,750
And this is actually a really useful application for the users.

8
00:00:31,230 --> 00:00:32,610
So we see the way that it works.

9
00:00:32,610 --> 00:00:37,090
When you press get emails, we output the emails into the new text area.

10
00:00:37,320 --> 00:00:40,260
So this is that extracted version of the emails.

11
00:00:40,440 --> 00:00:45,300
We're extracting it nice and neatly and also Colen separating these out.

12
00:00:45,720 --> 00:00:53,010
So again, really nice, useful application, only taking out the unique emails and using regex in order

13
00:00:53,010 --> 00:00:53,780
to accomplish that.

14
00:00:54,000 --> 00:00:56,970
So let's run through the code that we used in order to set this up.

15
00:00:57,120 --> 00:00:58,110
We didn't have any styling.

16
00:00:58,110 --> 00:01:02,420
And of course, you can apply styling as needed to make it look a whole lot better.

17
00:01:02,430 --> 00:01:05,400
But we did want to focus on JavaScript for this application.

18
00:01:05,580 --> 00:01:08,680
So the bulk of the lessons were focused on JavaScript.

19
00:01:08,700 --> 00:01:10,650
Of course, we created a text area.

20
00:01:10,650 --> 00:01:11,580
We created a button.

21
00:01:11,820 --> 00:01:17,370
We created another area here where we can output some content, some information to the user about how

22
00:01:17,370 --> 00:01:19,100
many emails were found and the last.

23
00:01:19,110 --> 00:01:22,700
We have another text area where we've got our output being shown.

24
00:01:23,220 --> 00:01:30,090
So we selected all of the elements into JavaScript objects to make them really easy to access and utilize

25
00:01:30,090 --> 00:01:31,160
within our code.

26
00:01:31,410 --> 00:01:37,280
Then we went and started to build out our application code, so we needed to have interaction and interaction.

27
00:01:37,290 --> 00:01:41,820
The only interaction on the page is other than to paste content is to do get emails.

28
00:01:42,150 --> 00:01:46,140
So we've got a button that adds an event listener.

29
00:01:46,140 --> 00:01:52,200
So whatever that button gets clicked, we get the raw text value that's contained within the paste text

30
00:01:52,410 --> 00:01:53,130
text area.

31
00:01:53,580 --> 00:01:55,290
We use our regular expression.

32
00:01:55,300 --> 00:01:59,400
So we built out a regular expression that extracts out email content.

33
00:01:59,580 --> 00:02:07,230
So it looks for uppercase lowercase letters and digits, zero to nine also for decimals underscores

34
00:02:07,230 --> 00:02:08,220
and dashes.

35
00:02:08,230 --> 00:02:14,580
So these are all valid within an email address, takes all of the content over until it hits an at symbol.

36
00:02:14,820 --> 00:02:17,010
So that's the next part of what we're looking for.

37
00:02:17,020 --> 00:02:20,280
So we make sure that we do have an add symbol within that string.

38
00:02:20,430 --> 00:02:21,390
And then the same thing.

39
00:02:21,390 --> 00:02:26,550
We look for all of that content and then that content all the way up until we hit a decimal point,

40
00:02:26,790 --> 00:02:31,980
because as we know, with every email address, you need to have a domain name, a domain names all

41
00:02:31,980 --> 00:02:32,730
have decimals.

42
00:02:33,060 --> 00:02:38,610
So we need to have that dot, that decimal there and or the period, whatever you want to call it.

43
00:02:38,760 --> 00:02:45,420
And we know with after the period, we can have any number of characters, again, representing the

44
00:02:45,420 --> 00:02:45,960
domain.

45
00:02:46,050 --> 00:02:48,030
So most of them, they don't have digits.

46
00:02:48,030 --> 00:02:51,510
So you could probably remove this part out, but we'll just keep it just in case.

47
00:02:51,630 --> 00:02:53,970
And you can also formalize this a little bit better.

48
00:02:54,300 --> 00:02:59,820
But for now, we'll just keep this in and we're looking for the same characters, numbers and so on

49
00:02:59,970 --> 00:03:03,540
and looking for all of that information until the next space.

50
00:03:03,690 --> 00:03:10,490
So we're grabbing all of that and it's grabbing the content as well as creating a case insensitive so

51
00:03:10,500 --> 00:03:12,270
it doesn't matter if it's upper or lower case.

52
00:03:12,690 --> 00:03:16,170
So that makes it really flexible and grabbing the email addresses.

53
00:03:16,350 --> 00:03:19,410
So that's our expression that we created using regular expressions.

54
00:03:19,740 --> 00:03:26,730
And we use JavaScript method of match to check to see if our string or string value here.

55
00:03:26,730 --> 00:03:31,710
The text input here has any matches for the regular expression.

56
00:03:31,920 --> 00:03:37,950
And if it does the way JavaScript works when you use batch, it builds out an array of the returned

57
00:03:37,950 --> 00:03:38,520
values.

58
00:03:38,700 --> 00:03:45,510
So we create an array called email data and we had a problem because we needed to remove out only unique

59
00:03:45,510 --> 00:03:46,080
values.

60
00:03:46,260 --> 00:03:48,270
So we saw that email data worked fine.

61
00:03:48,270 --> 00:03:53,220
We were able to output that content into the inner text and we were able to actually create our mini

62
00:03:53,220 --> 00:03:54,390
application for that.

63
00:03:54,630 --> 00:03:58,800
But in order to move out and get only unique items, we created a loop.

64
00:03:58,950 --> 00:04:04,240
So looping through all that data, we created a brand new array in order to have hello's.

65
00:04:04,470 --> 00:04:05,550
How is that data?

66
00:04:05,730 --> 00:04:12,720
And then we also, as we loop through, we have a condition that checks to see if the value of email

67
00:04:12,720 --> 00:04:18,240
data X, whatever that email address is, is already existing within that holdaway.

68
00:04:18,300 --> 00:04:20,940
And if it is, then we skip it, we don't add it.

69
00:04:21,120 --> 00:04:24,360
And if it's not, then that's where we get the negative one.

70
00:04:24,360 --> 00:04:27,900
And that means that we need to add it into the new array that we're building.

71
00:04:27,900 --> 00:04:28,890
So it's the holder array.

72
00:04:28,890 --> 00:04:33,860
And then over here is where we're joining together, the array back into a string.

73
00:04:33,870 --> 00:04:39,210
We have an option in JavaScript using join to separate it out by whatever characters we want.

74
00:04:39,210 --> 00:04:42,180
We can have a whole bunch of characters and we can have one.

75
00:04:42,600 --> 00:04:44,340
So we do the semicolon by default.

76
00:04:44,340 --> 00:04:45,390
It's going to be the comma.

77
00:04:45,400 --> 00:04:47,460
So if you don't list anything there, it'll just be the comma.

78
00:04:47,610 --> 00:04:52,470
So they'll output it just as we saw the regular array being output within the text area.

79
00:04:52,620 --> 00:04:54,390
And then we've got some information for the user.

80
00:04:54,390 --> 00:04:59,790
So we see how many emails we have within the holder because this is an array, it's got a length value.

81
00:04:59,980 --> 00:05:05,170
And then last, we would put that value into the entire text, so one of the other functions that I

82
00:05:05,170 --> 00:05:10,540
still want to add in, and this is kind of a little bit bonus function, is whenever we click on this,

83
00:05:10,690 --> 00:05:12,730
I want to be able to select all of that content.

84
00:05:12,730 --> 00:05:17,590
So the user what they're typically going to be doing is in this text area, they want to select everything

85
00:05:17,590 --> 00:05:18,330
to copy it out.

86
00:05:18,670 --> 00:05:20,290
So let's make that a little bit easier.

87
00:05:20,440 --> 00:05:26,980
And we already do have that object sitting here so we can add in to that object, adding an event listener.

88
00:05:26,980 --> 00:05:31,170
So out of that listener, the that listener that we're listening for is click.

89
00:05:31,360 --> 00:05:38,530
So whenever the user clicks on our finished text area, what we want to do is we want to invoke some

90
00:05:38,530 --> 00:05:41,920
type of function and this one needs an extra T there at the end.

91
00:05:42,520 --> 00:05:44,800
And the function could be another anonymous function.

92
00:05:45,070 --> 00:05:48,250
Or you can link it out to a function if you want it to, if you want it to have something a little bit

93
00:05:48,250 --> 00:05:50,060
more complex and flexible.

94
00:05:50,680 --> 00:05:57,070
So what we want to do is we want to select the content so we can use this select method.

95
00:05:57,400 --> 00:06:03,280
And this allows us to essentially select the content that is there and just do this select.

96
00:06:03,580 --> 00:06:05,200
So what's going to happen now?

97
00:06:05,350 --> 00:06:10,570
Whenever I do get emails and I click it, it's automatically going to select all the content.

98
00:06:10,750 --> 00:06:16,000
So make it a little bit easier for the user in order to copy those emails.

99
00:06:16,030 --> 00:06:16,750
So that's it.

100
00:06:16,750 --> 00:06:22,980
And I hope you've enjoyed this section and building out this email extractor application.

101
00:06:23,050 --> 00:06:24,250
Try it out for yourself.

102
00:06:24,250 --> 00:06:25,900
The source code has been included.

103
00:06:26,080 --> 00:06:31,000
If you have any questions or comments, I'm always happy to help answer them and clarify anything that

104
00:06:31,000 --> 00:06:32,860
we've covered within the previous lessons.

105
00:06:33,160 --> 00:06:34,990
Thanks again for taking the section.