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 by | N/A |
| Project Download | Link Available below |
| Language used | HTML and JavaScript |
| External link / Dependencies | NO |
| Responsive | Yes |
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.Syntaxswitch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// 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)Exampleconst fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruit.Password Strength Checker Using Html and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Strength Validation Example</title>
<script>
function validatePassword(password) {
// Do not show anything when the length of password is zero.
if (password.length === 0) {
document.getElementById("msg").innerHTML = "";
return;
}
// 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)) {
ctr++;
}
}
// Display it
var color = "";
var strength = "";
switch (ctr) {
case 0:
case 1:
case 2:
strength = "Very Weak";
color = "red";
break;
case 3:
strength = "Medium";
color = "orange";
break;
case 4:
strength = "Strong";
color = "green";
break;
}
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";
}
}
</script>
</head>
<body>
<strong>JavaScript Password Strength Validation Example</strong>
<div>
<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
</div>
</body>
</html>
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.
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?
No
