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 00:34 - 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, 01:09 - 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”.

01:54 - 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 02:59 - color and text message. Let’s put a label down here. “Label” with the class “pass label” and add a modificator class, “passlabel–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 “pasttext”. The password strength and a word itself. ID “text” is for a JavaScript handler. Now it’s - “week”. Now add some styles for that.

03:58 - 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.

06:36 - 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”.

08:12 - 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.

09:57 - 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.

11:57 - 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. .