Password Strength Calculator Using HTML, CSS, And JAVASCRIPT
Hey Guys, Welcome To The Blog, In This Blog We Are Going To See How To Create An Password Strength Calculator With Progress Bar Using Html, Css, And Java Script. Before That, We Will See What This Project Is About.
This Password Strength Calculator Is Used To Calculate The Strength Of the Password By Determining The Progress Bar With Selective Colors. When We Start Typing The Password The Progress Bar Starts Moving On With The Indication Of How The Password Is… With Specific Colors. And Those Colors With Indication Have Been Given.
Red – || !! Need Improvement !! ||
Yellow – || !! Good !! ||
Orange – || !! Better !! ||
Green – || !! Excellent !! ||
So this is what we gonna create. Now let’s begin with adding the source codes for our project and it starts with the html code.
Html Code Password Strength Calculator
<div class="container">
<div class="row">
<form>
<div class="col-sm-12 col-md-8 col-md-offset-2">
<div class="form-group">
<input type="password" data-strength class="form-control input-lg" name="password" placeholder="Password">
</div>
</div>
</form>
</div>
</div>Now We Have Successfully Added Our Html Code. In This Code, We First Giving An Div Tag With A Class Name That Contains The Whole Content. Then We Opening An Form Tag To Support Password Validation And Inside It We Are Using The Input Tag For Entering Password By User And A Separate Class Name In Which Is Used For Styling Purpose And Calling That In The Java Script Event Method.
So That’s Of For Html, Now We Begin With Styling Our Project By Adding The Css Code.
Css Code Password Strength Calculator
form{
margin-top:50px;
.strength{
height:0px;
width:100%;
background:#ccc;
margin-top: -7px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
overflow: hidden;
transition: height 0.3s;
span{
width:0px;
height: 7px;
display: block;
transition: width 0.3s;
}
}
}Now the css code is also added successfully. In this code, first, we are fixing the form value to 50px from margin-top. The password box will be down 50px from above.
Next, we mention our input class name for styling the input box by giving some certain common css properties and additionally we add some animation properties for engaging the progress bar. Inside the span section, we give some transition properties with values that go width direction.
100+ Front-end Projects for Web developers (Source Code)
So as of now the css code for the project is completed. But now we are mainly going to add the javascript part for validating the password with reporting progress bar.
JavaScript Code Password Strength Calculator
$(function() {
function passwordCheck(password) {
if (password.length >= 8)
strength += 1;
if (password.match(/(?=.*[0-9])/))
strength += 1;
if (password.match(/(?=.*[!,%,&,@,#,$,^,*,?,_,~,<,>,])/))
strength += 1;
if (password.match(/(?=.*[a-z])/))
strength += 1;
if (password.match(/(?=.*[A-Z])/))
strength += 1;
displayBar(strength);
}
function displayBar(strength) {
switch (strength) {
case 1:
$("#password-strength span").css({
"width": "20%",
"background": "#de1616"
});
break;
case 2:
$("#password-strength span").css({
"width": "40%",
"background": "#de1616"
});
break;
case 3:
$("#password-strength span").css({
"width": "60%",
"background": "#de1616"
});
break;
case 4:
$("#password-strength span").css({
"width": "80%",
"background": "#FFA200"
});
break;
case 5:
$("#password-strength span").css({
"width": "100%",
"background": "#06bf06"
});
break;
default:
$("#password-strength span").css({
"width": "0",
"background": "#de1616"
});
}
}
$("[data-strength]").after("<div id=\"password-strength\" class=\"strength\"><span></span></div>")
$("[data-strength]").focus(function() {
$("#password-strength").css({
"height": "7px"
});
}).blur(function() {
$("#password-strength").css({
"height": "0px"
});
});
$("[data-strength]").keyup(function() {
strength = 0;
var password = $(this).val();
passwordCheck(password);
});
});Now The Java Script Code Is Added Successfully. The Code Explanation Will Be In Parts So It Would Be Easy And Efficient To Understand.
Here We Have Used The Regex Compilations In Which It Validate The Password Entered By User With The Symbols We Declared, After That, It Would Process Further Steps.
First Part, We Declaring An Function With Function Name And Inside It We Are Giving Certain Conditions. Those Conditions Are If The Password Strength Is Above 8 Then It Starts Adding The Password Strength Which Results In Progress Bar.
Next, We Giving The Necessary Regex Properties For The Password Compilation, And With Js Method We Match The Regex With The User Entered Characters And Make The Count To Increase In Password Strength And Display It. For The Above Explanation, The Particular Line Of Code Is Given Below.
function passwordCheck(password) {
if (password.length >= 8)
strength += 1;
if (password.match(/(?=.*[0-9])/))
strength += 1;
if (password.match(/(?=.*[!,%,&,@,#,$,^,*,?,_,~,<,>,])/))
strength += 1;
if (password.match(/(?=.*[a-z])/))
strength += 1;
if (password.match(/(?=.*[A-Z])/))
strength += 1;
displayBar(strength);
}
Secondly, After Matching We Just Create An Function With The First Step’s Variable And Start Adding Values Inside It. By Using Switch Case Operator, We Just Passing Conditions For Example If The First Case In Switch Method Validates To Be True Then It Executes It Or Else It Breaks And Enter Into Another Case, Likewise, It Goes On. And Lastly, If All Case Is Not Valid Then We Set It To Default With Requisite Values.
In This Switch Case, If Case 1 Is Passed Then Progress Bar Starts Move On With The Letters Entering By the User, And The Background Colors That Matches With Number Of Characters Will Be Visible Among Them.
Likewise, Every Case Will Be Executed And The Progress Bar With Colors Is Also Change For Every Case It Entering.
The Code For the Above Explanation Is Given Below.
function displayBar(strength) {
switch (strength) {
case 1:
$("#password-strength span").css({
"width": "20%",
"background": "#de1616"
});
break;
case 2:
$("#password-strength span").css({
"width": "40%",
"background": "#de1616"
});
break;
case 3:
$("#password-strength span").css({
"width": "60%",
"background": "#de1616"
});
break;
case 4:
$("#password-strength span").css({
"width": "80%",
"background": "#FFA200"
});
break;
case 5:
$("#password-strength span").css({
"width": "100%",
"background": "#06bf06"
});
break;
default:
$("#password-strength span").css({
"width": "0",
"background": "#de1616"
});
}
}Lastly, After Those Two Steps, The Progress Bar Which Completes To The End After Entering Values Will Be Set To The Current Value And Background Color.
Create File Upload Using HTML,CSS And JAVASCRIPT Code
So It Will Be Easy To Identify How The Password Is Like After Entering That Specific Line Of Code Down Below.
$("[data-strength]").after("<div id=\"password-strength\" class=\"strength\"><span></span></div>")
$("[data-strength]").focus(function() {
$("#password-strength").css({
"height": "7px"
});
}).blur(function() {
$("#password-strength").css({
"height": "0px"
});
});
$("[data-strength]").keyup(function() {
strength = 0;
var password = $(this).val();
passwordCheck(password);
});
});Note: Here We Have Used Some J Query To Make The Shorter Lines Of Code.
Now We Have Successfully Added Our Code For The Project, But We Make Sure To See Our Project Preview In The Output Section Given Below.
ADVERTISEMENT
Final Output Password Strength Calculator
ADVERTISEMENT
Now We Have Successfully Created Our Password Strength Calculator With Progress Bar Using Html,css, JavaScript. You Can Use This Project For Your Personnel Needs And The Respective Lines Of Code Is Given With The Code Pen Link Mentioned Below.
ADVERTISEMENT
If You Find Out This Blog Helpful? , Then Make Sure To Search Code With Random On Google For Front End Projects With Source Codes And Make Sure To Follow The Code With Random Instagram Page.
ADVERTISEMENT
Refer Code- Matt Daives
ADVERTISEMENT
Written By – Ragunathan S
