Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,850 --> 00:00:01,200
All right.
2
00:00:01,210 --> 00:00:06,650
Hopefully you had some success on adding in some even handlers for the other two checkboxes and adding
3
00:00:06,650 --> 00:00:09,870
in some properties to track whether or not they are checked.
4
00:00:09,990 --> 00:00:14,200
Well this video we're going to go over a quick solution that just you know as I start to write out this
5
00:00:14,200 --> 00:00:14,770
code.
6
00:00:14,770 --> 00:00:18,340
If I name a variable slightly different than you do that is totally fine.
7
00:00:18,380 --> 00:00:22,120
This remember that in the future we're going to we have to refer to some these different variables when
8
00:00:22,120 --> 00:00:23,790
we actually generate our password.
9
00:00:23,950 --> 00:00:29,010
But just make sure that as we start to generate that password you use whatever variable names you used.
10
00:00:29,020 --> 00:00:31,760
If you end up using different names than ideal.
11
00:00:31,780 --> 00:00:31,990
OK.
12
00:00:32,020 --> 00:00:33,450
So let's get to it.
13
00:00:33,460 --> 00:00:38,790
I'm going to flip back over to my editor when you first get started in my app component HDMI file.
14
00:00:38,800 --> 00:00:44,330
I'm going to find the other two input elements inside of here that are of type checkbox on each these
15
00:00:44,350 --> 00:00:48,550
I'm going to add on an event handler using the event binding syntax.
16
00:00:48,610 --> 00:00:54,100
I'll first find use numbers on that one I'll add in the parentheses to say that I want to watch for
17
00:00:54,100 --> 00:01:04,480
a change event and then anytime we change that input I'm going to call on change use numbers again.
18
00:01:04,530 --> 00:01:06,080
That method does not yet exist.
19
00:01:06,090 --> 00:01:08,540
We're going to have to define it in just a moment.
20
00:01:08,550 --> 00:01:11,420
Let's first take care of use symbols as well done here.
21
00:01:11,500 --> 00:01:16,060
I'll find the input byte checkbox on that one.
22
00:01:16,060 --> 00:01:17,550
Allowed and change.
23
00:01:17,900 --> 00:01:19,760
We'll put an on change.
24
00:01:19,760 --> 00:01:23,610
Use symbols okay.
25
00:01:23,670 --> 00:01:25,580
Let's go back over to our component class.
26
00:01:25,590 --> 00:01:31,880
We're going to implement both of these methods but here's the component class right underneath.
27
00:01:31,890 --> 00:01:33,600
On change use letters.
28
00:01:33,600 --> 00:01:35,350
We will also add an on change.
29
00:01:35,370 --> 00:01:39,900
Use numbers and on change.
30
00:01:39,980 --> 00:01:46,200
Use symbols.
31
00:01:46,220 --> 00:01:50,670
Now we need to make sure that we add in some additional properties to keep track of whether or not we
32
00:01:50,670 --> 00:01:53,160
want to use numbers or symbols.
33
00:01:53,190 --> 00:01:55,920
So next to all the other properties we've defined so far.
34
00:01:55,920 --> 00:02:01,920
I'm going to also define include numbers and I'll initialize it to false.
35
00:02:01,920 --> 00:02:09,880
I will also include or add in include symbols which also get started off as false.
36
00:02:09,920 --> 00:02:12,130
Then inside of the respective handlers.
37
00:02:12,140 --> 00:02:15,140
Right here right here we can update the value of those properties.
38
00:02:15,230 --> 00:02:20,900
So say this does not include numbers is not so exclamation.
39
00:02:20,900 --> 00:02:26,270
This dot include numbers and the same thing down here for use symbols as well.
40
00:02:26,270 --> 00:02:37,980
So this dot includes symbols is not this not include symbols and that's it now to test this out.
41
00:02:38,000 --> 00:02:44,260
Let's just try adding in some additional console logs to our on button click function the inside of
42
00:02:44,290 --> 00:02:50,820
on button click I'll find the console log I'm going to replace what we have inside there right now with
43
00:02:50,880 --> 00:02:56,580
a template string remember a template string in JavaScript uses the back to characters that is the character
44
00:02:56,580 --> 00:03:02,340
to the left the one on your keyboard I'm making a back tick string here or a template string so I can
45
00:03:02,340 --> 00:03:07,540
make it a multi line string and side they're all just put out some messages that say exactly how we
46
00:03:07,540 --> 00:03:16,910
are generating this password we'll say about to generate a password with the following and then after
47
00:03:16,910 --> 00:03:23,430
that I will print out this dot include letters
48
00:03:26,120 --> 00:03:31,220
how about we say something and just make it a bit more clear we'll say like includes letters and we'll
49
00:03:31,220 --> 00:03:38,200
print out either the true or false and I'll repeat that for the other two properties as well so includes
50
00:03:38,890 --> 00:03:52,500
numbers going to be this dot include numbers and includes symbols this dot includes symbols and I think
51
00:03:52,500 --> 00:04:00,260
I've got a hybrid there I've got an extra s on includes OK Alex Good let's now save this and we'll do
52
00:04:00,260 --> 00:04:06,350
a quick test I'll flip back over I'm going to try clicking generate right away and I'll see a message
53
00:04:06,350 --> 00:04:11,540
that says that we're going to try to generate a password without letters numbers or symbols if I then
54
00:04:11,540 --> 00:04:16,010
start to check some of these different checkboxes and click generate again I'll see that I properly
55
00:04:16,040 --> 00:04:16,970
updated numbers.
56
00:04:16,970 --> 00:04:22,210
So now numbers is true if I add in symbols I get symbols and numbers is true.
57
00:04:22,340 --> 00:04:26,600
Now I can add in letters as well and I get all three as true.
58
00:04:26,600 --> 00:04:26,900
All right.
59
00:04:26,900 --> 00:04:28,400
So that is looking pretty good.
60
00:04:28,550 --> 00:04:33,980
Now all we really have to do is add in the ability to track the length that the user enters and we can
61
00:04:33,980 --> 00:04:39,020
use all this data whether or not to include these three different things along with the number of characters
62
00:04:39,020 --> 00:04:42,520
to actually generate our password and throw it into that input.
63
00:04:42,530 --> 00:04:43,820
We're actually pretty close here.
64
00:04:43,820 --> 00:04:47,020
Let's take a pause and continue implementing this in the next video.
6699
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.