Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,870 --> 00:00:02,610
All right now that we've got a good idea of what's going on.
2
00:00:02,670 --> 00:00:04,560
Let's start to implement this kind of approach.
3
00:00:04,560 --> 00:00:07,370
We're going to first take care of one of those checkboxes.
4
00:00:07,380 --> 00:00:11,640
We're going to make sure that each of our different checkbox elements has an event handler assigned
5
00:00:11,640 --> 00:00:15,580
to it whenever user changes the value of a checkbox by clicking on it.
6
00:00:15,600 --> 00:00:17,440
We're going to store that value either.
7
00:00:17,640 --> 00:00:20,020
Yes we want to include letters or no we don't.
8
00:00:20,020 --> 00:00:23,790
And the final password as a property on our component class.
9
00:00:23,860 --> 00:00:25,510
So let's get to it.
10
00:00:25,520 --> 00:00:28,660
Well first take care of the use letters checkbox right here.
11
00:00:28,710 --> 00:00:33,780
We need to make sure that we add an event handler to that thing and detect any time it gets changed.
12
00:00:33,810 --> 00:00:39,180
Now just so you know us like ticking that thing in on ticking it is referred to as a change event.
13
00:00:39,180 --> 00:00:41,150
That is the name of the event that is triggered.
14
00:00:41,160 --> 00:00:47,770
Any time we change it I'm gonna go back over to my editor and I went to find my component template file.
15
00:00:47,770 --> 00:00:49,460
Here it is right here.
16
00:00:49,460 --> 00:00:55,530
And then going to scroll down to the label it says use letters I'll find the input tied to it.
17
00:00:55,530 --> 00:00:57,500
And then we will add an event handler to it.
18
00:00:57,500 --> 00:01:01,790
Remember this is the event binding syntax event binding syntax.
19
00:01:01,790 --> 00:01:07,760
As we discussed just a moment ago right here uses the parentheses and then inside the parentheses we
20
00:01:07,760 --> 00:01:11,870
put the name of the event that we want to watch for though on this input.
21
00:01:11,870 --> 00:01:17,990
I will add in some parentheses and I'll say I want to watch for the change event and then whenever that
22
00:01:17,990 --> 00:01:24,900
occurs I want to run a method that I'm going to define on my component class instance bold called The
23
00:01:24,900 --> 00:01:25,230
Method.
24
00:01:25,230 --> 00:01:28,080
How about on change.
25
00:01:28,440 --> 00:01:33,160
Use letters we have not yet defined that method.
26
00:01:33,160 --> 00:01:34,900
We're going to have to change or define it.
27
00:01:34,900 --> 00:01:38,250
Right now I'm going to save this file.
28
00:01:38,470 --> 00:01:44,550
I'll go back over to my component class instance inside of here or I'll find my component class and
29
00:01:44,560 --> 00:01:48,120
then inside of it I'm going to define that method that we just tried to call.
30
00:01:48,260 --> 00:01:51,900
Go on change what we call it use letters
31
00:01:56,070 --> 00:01:59,210
now as you would guess anytime that we change that input right there.
32
00:01:59,290 --> 00:02:04,620
Time we ticket or until ticket that method is going to be called but as we just discussed and as we
33
00:02:04,650 --> 00:02:10,380
just looking at that diagram a moment ago we now need a property on our class to record whether or not
34
00:02:10,380 --> 00:02:17,370
that thing is checked or not though on my class I'm going to add in an additional property to call it.
35
00:02:17,370 --> 00:02:25,900
How about include letters and I'm going to give it a default or initial starting value of us by default.
36
00:02:25,950 --> 00:02:32,270
We are not including any letters inside of our generated password so then anytime that on change use
37
00:02:32,270 --> 00:02:38,050
letters gets called I will update the value of include letters.
38
00:02:38,050 --> 00:02:45,250
So I'll say this dot include letters is going to be equal to the opposite of whatever it currently is
39
00:02:45,790 --> 00:02:48,570
though not notice the exclamation there.
40
00:02:48,670 --> 00:02:54,610
It's not include letters not to test this out.
41
00:02:54,700 --> 00:03:00,400
Let's go down to on button click remember that gets called anytime we click on that submit button inside
42
00:03:00,400 --> 00:03:07,580
there I'm going to add in a console log of this dot include letters that we'll try ticking that checkbox
43
00:03:07,600 --> 00:03:12,610
and unthinking it and clicking that button a couple times and just verifying that we've got the correct
44
00:03:12,610 --> 00:03:19,090
value stored on our component class instance it's going to save this file I'm going to flip back over
45
00:03:20,090 --> 00:03:26,540
I'm going to click on generate right away and I'll see that by default use letters is false if I then
46
00:03:26,600 --> 00:03:27,380
check that thing.
47
00:03:27,380 --> 00:03:31,220
So the use letters checkbox in particular and then click on generate again.
48
00:03:31,280 --> 00:03:33,200
It's now been flip to true.
49
00:03:33,200 --> 00:03:36,890
And finally if I uncheck it and generate again it is back to false.
50
00:03:36,890 --> 00:03:39,160
There are definitely keeping track of that property correctly.
51
00:03:40,490 --> 00:03:40,730
All right.
52
00:03:40,730 --> 00:03:45,430
So now we need to repeat that same process for the other two checkboxes as well.
53
00:03:45,530 --> 00:03:48,020
I would like you to try to take care of this on your own.
54
00:03:48,020 --> 00:03:50,590
So this is going to be a little exercise.
55
00:03:50,590 --> 00:03:52,510
It is 100 percent optional.
56
00:03:52,540 --> 00:03:54,140
If you don't want to do this on your own.
57
00:03:54,200 --> 00:03:54,810
No problem.
58
00:03:54,830 --> 00:03:58,480
Just skip over to the next video and I'll show you exactly how to do it.
59
00:03:58,760 --> 00:04:06,710
Otherwise go ahead and try to add in a event handler to these other two checkboxes you'll need to go
60
00:04:06,710 --> 00:04:10,250
through the exact same process of what we just did inside this video.
61
00:04:10,700 --> 00:04:12,360
You'll find the appropriate inputs.
62
00:04:12,470 --> 00:04:14,490
You'll add on the change event handler.
63
00:04:14,600 --> 00:04:15,980
You'll call it method.
64
00:04:16,130 --> 00:04:19,530
You'll need to make sure that you add a method to the component class.
65
00:04:19,730 --> 00:04:24,320
You'll need to make sure you add in a new property to track whether or not to include the numbers and
66
00:04:24,320 --> 00:04:30,050
symbols and so on and update that property inside the appropriate method once again.
67
00:04:30,070 --> 00:04:32,560
Go ahead and give it a shot on your own if you don't want to do it.
68
00:04:32,560 --> 00:04:33,190
No problem.
69
00:04:33,190 --> 00:04:35,210
Just kept on over to the next video.
70
00:04:35,260 --> 00:04:38,200
Quick pause and we'll go over a solution in just a moment.
7217
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.