Password Strength Checker Using Javascript | Password Strength Checker

Password Strength Checker Using JavaScript (Source Code)

Password Strength Checker Using JavaScript (Source Code)

Hello Coder, a very warm Welcome to the Codewithrandom new blog. Today we are going to create an input in which we can type our password and check the Strength of the password. So let’s create a Password Strength Checker using Javascript.So let’s start with the code. But what I believe seeing a live server of the project will help while developing and understanding the code.
Code byN/A
Project DownloadLink Available below
Language usedHTML and JavaScript
External link / DependenciesNO

Live Preview Of Password Strength Checker 

Password Strength Checker Code

Html is used for creating the layout/skeleton of the website. Here we are using the basic concepts of html like div, span, input, and strong.100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.Tip: use the <b> tag to specify bold text without any extra importance!We are using a password visibility toggle.What is the strength of a password?Password strength means size/bit of the password. Password strength must good enough so, that it does not get easily hacked/cracked. Good password strength is always must to keep the password.What is good password strength ?A good password must have at least one letter A good password must have at least one capital letter A good password must have at least one number A good password must have at least one special letter such as, @, etc.., A good password should not contain multiple identical consecutive characters A good password should not be the same as the account name A good password must be at least 8-12 characters long A good password must not be a common password such as someone’s name, 1234, I love you, etc..,Simple Portfolio Website Using Html And Css With Source CodeSwitch:-Here for conditions, we are using a switch statement, instead of a switch statement you can use an if-else statement.The switch statement is used to perform different actions based on different conditions.The javascript switch statements the switch statement to select one of many code blocks to be executed.Syntax
switch(expression) {
case x:
// code block
case y:
// code block
// code block
This is how it works:The switch expression is evaluated once. The value of the expression is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default code block is executed.Gym Website Using HTML and CSS With Source CodeThe break keywordWhen javascript reaches a break keyword, it breaks out of the switch block.This will stop the execution inside the switch block.It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.The default keywordThe default keyword specifies the code to run if there is no case match:Array:-Using an array literal is the easiest way to create a javascript array.Syntax:
const array_name = [item1, item2, ...];
Loop:-One way to loop through an array is using a for loop:Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
Adding array elementsThe easiest way to add a new element to an array is using the push() method:10+ HTML CSS Projects For Beginners (Source Code)Example
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruit.

Password Strength Checker Using Html and JavaScript

 <!DOCTYPE html>
<title>JavaScript Password Strength Validation Example</title>
function validatePassword(password) {
// Do not show anything when the length of password is zero.
if (password.length === 0) {
document.getElementById("msg").innerHTML = "";
// Create an array and push all possible values that you want in password
var matchedCase = new Array();
matchedCase.push("[$@$!%*#?&]"); // Special Charector
matchedCase.push("[A-Z]"); // Uppercase Alpabates
matchedCase.push("[0-9]"); // Numbers
matchedCase.push("[a-z]"); // Lowercase Alphabates
// Check the conditions
var ctr = 0;
for (var i = 0; i < matchedCase.length; i++) {
if (new RegExp(matchedCase[i]).test(password)) {
// Display it
var color = "";
var strength = "";
switch (ctr) {
case 0:
case 1:
case 2:
strength = "Very Weak";
color = "red";
case 3:
strength = "Medium";
color = "orange";
case 4:
strength = "Strong";
color = "green";
document.getElementById("msg").innerHTML = strength;
document.getElementById("msg").style.color = color;
function myFunction() {
var x = document.getElementById("pwd");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
<strong>JavaScript Password Strength Validation Example</strong>
<label for="pwd">Password:</label>
<input type="password" id="pwd" onkeyup="validatePassword(this.value);"/><span id="msg"></span>
<input type="checkbox" onclick="myFunction()">Show Password 
Note:- as, per the above program javascript is directly used in integration with html, and here as the user will enter the password in the textbox he/she will come to know its strength of it.The output of the above program.
Password Strength Checker Using JavaScript
Password Strength Checker Using JavaScript
 So that’s it for this blog. I hope you learned a lot about toggling password visibility as well as the password strength checker. Comment down if you liked this blog and help us to reach more people, share this blog with your friends and let them know about this resourceful website.If you have any queries or doubts related to the blog or content or any web dev-related stuff feel free to comment your query/doubt in the comment box and let us know your doubt and get a solution to them.Written by Himanshu Singh

Which code editor do you use for this Weather App project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?


Leave a Reply