In today's video, we're gonna be building a password generator using JavaScript, and this is a great project because it's not very difficult to do.

But there's a ton of different ways you can build this project, and I'm gonna be showing you the way.

That is, by far one of the cleanest ways to design the code so you can pick up best practice tips in JavaScript.

So let's get started now.

Welcome back to Web to have simplified my name's Kyle, and my job is to simplify the Web for you.

So that sounds been trusting.

Make sure you subscribe for more videos just like this one to get started.

I have an example of what we're gonna be building over here on the right.

And as you can see, it's just a typical password generator.

We can determine how many characters you want by using the scroll bar, or we can actually just and put it here.

We could include upper case numbers, symbols, and then when we click, generate password.

As you can see, it's going to generate password.

So obviously, to get started, we're gonna need an index dot html page to put all of our code.

And if we just put exclamation point and hit enter, it's gonna give us the boilerplate code.

We could just give it a simple title of password generator and then also, we're gonna need tohave to other files.

We're gonna have a job script file, so that's going to be inside of a script tag.

And we're just gonna call this script dot Js and make sure you defer this so that it loads after the body of your HTML and then we're also going to need a link tag and this is going to be for our CSS call it styles that CSS.

And let's just create those files now.

So we have script dot Js and we're going to have styles dot CSS just like that.

And now that we have that done, the first thing we can work on is our HTML and to get started, the very first thing I want to create is a container which is going to contain this blue box of the black border.

So we could just create a container div here and inside of here is going to be over code.

First, we're gonna have this password generator title, which is just going to be an H one tag.

And inside of it, we're just gonna put password generator hopes generate or just like that and then also underneath that we're going to have this section actually contains are generated password, and we're gonna put that inside of an H three and for now, we'll just default password.

So that way, when you load up the page, it's just going to say password.

And we can actually open this up with live server just to see what we have.

So far as you can see, we have our title as wolves are generated Password placeholder.

For now, the next thing we're gonna have is the actual form, which is going to contain all over different input elements.

And if you remember, we have the number of characters here.

So let's create a label for that, and his label is going to be inside of here.

It's going to say a number of characters and then for that individual label, we're gonna have an input, and this input is going to be a range input.

That's what gives us the slider over here that you can see and then we just want also on top of having that range in foot.

We want tohave a number input, which allows us to have our number over here that we can control our range with.

We're gonna need javascript to hook that up.

But for now, if we save this and go over here, you can see we have our number input as well.

Is this slider over here?

And one thing that we do need to do is actually set up some minimum values.

So we want a minimum of one and we wanna have a maximum here about 50.

And we want that both on our range and on our number input here.

Also, we need to give these ideas so we can select them in the Java script.

So what's just come in here?

We can say I d character amount range.

We're gonna do the exact same thing for a number input for just gonna call this character amount number.

And we can use the I d instead of our four here.

And by doing that now, if we save this and come over here when we were very click on our label number of characters.

It's gonna put our focus inside the input over here.

Also, let's just put some d felt values in here.

We're gonna save by default.

These are both going to be 10.

So we could just save all your 10 and value 10.

And now, as you can see, both these inputs are set to 10 by default.

The next thing that we need to work on is adding in all of these different check boxes, which is gonna be fairly simple or again going to have a label with a four attributes.

And inside of this label, we're gonna first put here include upper case, and then we're going to have an input for that.

And this input is going to be a type of check box.

And of course, we want to make sure we get this an I d.

We're gonna call this include upper case, and we're gonna use the same four.

This is going to work exactly the same.

Now if we click on our include uppercase little check our box for us, which is copy this for the other ones so we can come in here and we can say that we want to include numbers and we want to change this to include numbers and lastly, same exact thing.

But this is going to be first symbols.

So include symbols, cleared symbols and include symbols.

Now, if we look over here, we have pretty much all of the form inputs that we need.

The last thing we need to do is this Generate password button so we could just create a button down here.

We're gonna make sure that we give it a type of submit.

And we want to just say it generate password clips, password, just like that.

And now, as you can see, over here, we have all over a different form inputs correctly on the page.

Now, with all of that html out of the way, we can start working on the styles.

And the very first style I want to work on is the body.

So we can just select our body tag here.

And of course, the very first thing that we see is our background color is just going to be this really dark black color.

And if we say that you see, we now have that background color and of course, to make our techs stand out.

We want to make sure our text is going to be.

Wait and there we go.

Now we can read everything much better.

The next thing we want to do is center all of our content, and the easiest way to do that is by using flex box.

So we'll say, display flex, justify content in the center and we want to align our items in the center.

And if you're unfamiliar with flex box, I have an entire video covering it, which you confined linked in the cards in the description below.

Also, to make sure the center vertically, we need to make sure we set Amen height of 100 view height, and that's going to fill the entire height of our screen.

And to get rid of this annoying scroll war, all we need to do this said our margin to zero.

And that's going to get rid of the scroll bar for us now, lastly, so that we have a font that is a little bit interesting.

Look at We could just come into our fund family here, and we can just choose one of these values.

For example, we could just go with the Georgia fund.

And if we say you can see are fine, just looks a little bit more interesting.

It's nothing amazing, but it'll work for this application.

Next, we need to actually select this rapper Dave that we created, which we gave the class of container.

So instead of here, we could just say Doc Container.

And if you remember it, this is going to be this giant blue box area.

So we want to change the background color to be that blue color, which is 00666699 And if we say that you can see we get that blue color.

Also, we can change instead of here are patting to be three r e m.

That we have a bunch of space around our content as well as we want a little bit of a border radius so we could get those rounded corners.

In our case, one r e m is gonna work fine.

And then that black border is just gonna help it stand out a little bit from around the edges will say two pixels of solid black.

As you see, we have that nice looking border right now Also, we can make us that all of our content inside of here is in the center by doing the same exact flex box trick.

So we can say display flex, justify content in the center and a line items in the center as you can see it.

Now, everything is lined up in the centre, but to make it a vertical instead of horizontal, all we need to do is change the flux direction to column.

And as you can see, everything went back to going in that vertical direction.

The next thing we need to work on his style and our form inputs because they're obviously a mess right now.

And easiest way to do that is just to put a class on our form will just give it a class of form and we're actually gonna use CSS grid for this.

So if you're unfamiliar with CSS cred, I again have an entire video on it and the cards and the description.

So you make sure you check that out.

But essentially, we want to change here the display to grid and we want to modify the grid template columns and we want there to be two separate columns, one for the label, as you can see here, and one for the value section.

We want them both just to be auto sized.

So we're just going to say great temple columns, auto and auto.

As you can see, we now have two columns, but there's a problem.

And as because our range slider and our input are on two separate rose, we want them to take up one column instead of two different columns.

So to do that, we're gonna wrap them in a div.

So that way that Dave is going to span an entire column, and these objects inside of it are going to be in that column.

Now, if we save, you can see that our slider and our input are both on the same column.

But everything is really scrunched up right next to each other.

So in order to fix that, gonna add a little bit of a gap.

First, we're gonna add a gap on the road, or you're gonna use one r e m.

And we're gonna use a column gap in between our columns of three r e m magic.

You see, they're really spaces out.

Our elements and looks a lot better.

The last thing we need to do, just make sure that our grid is centred, Soul said.

Justify content centered in a line items in the centre.

Now that'll make sure that our group is always inside the center of its container instead of stretching or being pushed around.

Now what we need to do is actually style are different elements.

So, for example, this password generator title.

So let's just add a class to that of title clips title Just like that.

And now, inside of our style sheet, we can select that title and weaken first to remove the margin from it.

We can also make sure we text the line it in the center just so everything is in the center and there we go.

You can see that just made that her password generator title is a little bit more squished up with our display password.

Also, we should bold these labels so they're easier to read so we can just say label.

We want to make all of those a funt weight of bold magic.

You see, that just made them a little bit easier to read its expander screen a little bit, we go.

Another thing that you may notice is that our input box here is not centered with our range letter, and it's also very wide concerning the maximum number.

It's 50.

It'll only ever be two digits long.

So in order to fix that, we could just put a class on this rapper container.

We're gonna call it character amount Container.

We could just copy this selector, and instead of our style shoot, we can use that selector and all that we need to do is actually make sure that we set it to display of Flex.

And we want to align our items in the center and you'll see that's going to align these in the centre vertically just like that.

And then we can select our input instead of here are number input.

Swisher's at a class to that.

What is just going to be number input?

And instead of our style of shooting, we could just say Oops, number input.

All we want to do is set the with to be to R E M, which is going to be about the width of two characters, as you can see here and that looks a lot better now.

Now there are only two elements left on our page to style, and one of those is going to be our password input section Solo again was just at a class to that.

We can come in here.

We can say that our class, his password, password display and let's copy over that class and what we need to do inside this password display is first change the background color toe.

Wait because, as you can see, it's white will say background color of white.

Make sure we intend that properly.

There we go, and we also want the color of this to be black.

It's that way the text will show, as you can see over here now we have a white background and the black text.

Also, we had to add a little bit of padding because right now that's way too squished.

Ups will say one R e m of padding.

We're gonna add a border around this of one pixel, and we're gonna use the same color as our background never go.

That looks pretty nice, and we also want to make sure we manually set the height and width of this.

So that way, if we change the size of our password, it's not gonna make our box grow and shrink.

So what we're gonna do is we want to make sure we have a height here of two R e m essentially that allow us to fit two rows of text and we also want to sit in here with which is just going to be 350 pixels.

And as you can see, that box is going to take up essentially the full width of our container, which looks really nice.