All language subtitles for 9. Tracking Additional Properties

All right.

Hopefully you had some success on adding in some even handlers for the other two checkboxes and adding

in some properties to track whether or not they are checked.

Well this video we're going to go over a quick solution that just you know as I start to write out this

code.

If I name a variable slightly different than you do that is totally fine.

This remember that in the future we're going to we have to refer to some these different variables when

we actually generate our password.

But just make sure that as we start to generate that password you use whatever variable names you used.

If you end up using different names than ideal.

OK.

So let's get to it.

I'm going to flip back over to my editor when you first get started in my app component HDMI file.

I'm going to find the other two input elements inside of here that are of type checkbox on each these

I'm going to add on an event handler using the event binding syntax.

I'll first find use numbers on that one I'll add in the parentheses to say that I want to watch for

a change event and then anytime we change that input I'm going to call on change use numbers again.

That method does not yet exist.

We're going to have to define it in just a moment.

Let's first take care of use symbols as well done here.

I'll find the input byte checkbox on that one.

Allowed and change.

We'll put an on change.

Use symbols okay.

Let's go back over to our component class.

We're going to implement both of these methods but here's the component class right underneath.

On change use letters.

We will also add an on change.

Use numbers and on change.

Use symbols.

Now we need to make sure that we add in some additional properties to keep track of whether or not we

want to use numbers or symbols.

So next to all the other properties we've defined so far.

I'm going to also define include numbers and I'll initialize it to false.

I will also include or add in include symbols which also get started off as false.

Then inside of the respective handlers.

Right here right here we can update the value of those properties.

So say this does not include numbers is not so exclamation.

This dot include numbers and the same thing down here for use symbols as well.

So this dot includes symbols is not this not include symbols and that's it now to test this out.

Let's just try adding in some additional console logs to our on button click function the inside of

on button click I'll find the console log I'm going to replace what we have inside there right now with

a template string remember a template string in JavaScript uses the back to characters that is the character

to the left the one on your keyboard I'm making a back tick string here or a template string so I can

make it a multi line string and side they're all just put out some messages that say exactly how we

are generating this password we'll say about to generate a password with the following and then after

that I will print out this dot include letters

how about we say something and just make it a bit more clear we'll say like includes letters and we'll

print out either the true or false and I'll repeat that for the other two properties as well so includes

numbers going to be this dot include numbers and includes symbols this dot includes symbols and I think

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

a quick test I'll flip back over I'm going to try clicking generate right away and I'll see a message

that says that we're going to try to generate a password without letters numbers or symbols if I then

start to check some of these different checkboxes and click generate again I'll see that I properly

updated numbers.

So now numbers is true if I add in symbols I get symbols and numbers is true.

Now I can add in letters as well and I get all three as true.

All right.

So that is looking pretty good.

Now all we really have to do is add in the ability to track the length that the user enters and we can

use all this data whether or not to include these three different things along with the number of characters

to actually generate our password and throw it into that input.

We're actually pretty close here.

Let's take a pause and continue implementing this in the next video.