Password Strength Meter in pure JS: JavaScript tutorial


Hi! Let’s create today a simple password
strength meter in pure JavaScript. If this is your first time here and you
want to learn Frontend and JavaScript, start right now by subscribing, and don’t forget to turn on the subtitles. [Music playing] Let’s create a simple password analyzer that uses the following parameters: length, content, and case. Each parameter gives some points:
The first parameter is the length. The more symbols in the password, the
more scores it has. If password length is greater than 12 symbols it adds 1 point,
otherwise it adds a fraction. The password should contain letters (only Latin
ones), digits and symbols. Each of them adds some scores. The last parameter is the case of letters. There are should be upper case letters and
lower case letters. Each types add a half of a score. For simplification I check only for Latin letters. To analyze that, I need to to observe the input tag changes using a “key up” method. When a user releases a key, I’ll examine the input data. For your real application, you need to consider the reaction on every input,
“copy-paste” actions, mouse events, etc. But not for this tutorial. Let’s dive into the code. [Music playing] Let’s create a wrapper. It should be a
container with a class “pass”. Let’s set styles. For body: a background color
“light yellow” should be nice. And for our wrapper. The class “pass”. And define the geometry: display “flex”
and the direction “align”. flex-direction is “column”, align-items is “center”
and “justify-content” is “center”. Those I’ll put our “inputs” in the center
of the wrapper. Now let’s create input fields. It should be input with the type
“password” “Auto complete” for a password I turn off. Set the class for styling it. It should
be a “pass_inp” and ID “input”. I’m going to use this ID for for a JavaScript handler. And styles for it. For class “pass_inp” set its geometry. And add some margins. 20px and 0.
It’s located not in the center because I have a typo here. Good. Then a label that
indicates the strength using a specific color and text message.
Let’s put a label down here. “Label” with the class “pass label” and add a modificator
class, “pass__label–week”. To specify a password strength I’m going to use several
modificators, like “weak”, “strong”, etc. And set an ID that I am going to use
for a JavaScript handler: “indicator”. Then a span. Inside it I display a word that
specifies password strength. So a class here is “past__text”. The password strength and a word itself .
ID “text” is for a JavaScript handler. Now it’s – “week”. Now add some styles for that. For a label itself set its geometry Fix these typos, it should be
“underscore underscore”. And now modificators. For “fair” it will be “yellow”. “good” will be “silver”. “strong” will be “lime green”. Again this typo. And styles for “pass text”. Now let’s review our styles. Okay, I need to fix of this one and this one. What’s about my styles for his label? I have correct naming for a “pass” label. Let’s check in the markup. Yes, I need
to fix on this. Good, let’s review this margin. Yes I have a typo here. OK.
Now that looks nice. Let’s create a function itself. So, for HTML for “input” on
“key up” I’ll add a handler But take into account that for a
production already code you need to add an even handle, because this solution
will be more robust. Let’s add an event handler here. Let’s create all elements and store
them into variables. So input… One more for “indicator”. An “indicator”
here. And another one for a text element. Now our function: “pass check”. Let’s store a password from a value…
Input value. And define an object for the current strength. It consists of three parameters. 0 is here. “complexity scores”. 0 as well. “case scores”. Now is our validation. If password’s length is lower than 4 – set the scores to 0. If it’s greater than 12, then set it to 1. Otherwise, calculate the value
according to this formula. “Password length” divided by 20. Then let’s calculate the final scores. It should be “Math round” of following values. Take the sum of our scores like this. Plus another one, “complexity scores”. And one more, “case scores”. As for now we calculate the value of length scores only. I create a function that should display the results. Like “set strength”
for scores. Let’s define this function. Function “set strength”.
Level of complexity here. Case “0”, it should be a level “weak”. “break”. Case “1” – a level is equal to “fair”. “Case 2” – level “good”. “3” is “strong”. And “default” is “weak”. And display these values. innerText,
display our level there. And for “indicator” change its class name,
equals to the following. And our modificator. Let’s try this one
you Good, that works. Now let’s add the rest of our verifications. Let’s check for
the complexity. For that I’m going to use a regular
expression and compare our value if it contains digits, letters and special
characters. Like that. If “password” matches something, a regular
expression here with the key “global”. Then the current strength should be increased. “complexity scores” plus something. Check for digits first. Digits here. Now for letters only Latin letters for simplification “from a to z” and for
capital letters “from A to Z”. And change this factor. And the same for
special characters. Capital “W” and the “underscore”. And change this factor to 0.4.
Let’s check. Good. Now let’s calculate “case scores” like following. “Case scores” here. For black letters
“from A to Z” that adds 0.5 points and for capital letters the same “from A
to Z” here. Let’s review. Good. I like this one.
That’s it, so easy. My code is available on CodePen. Documentation is available on the Internet. Follow the links if you’re eager to get more. [Music playing] If you like this video, give it “thumbs up,”
share it with your friends, subscribe to the channel and watch other episodes. Thanks for watching and dive deeper.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *