This code snippet helps you to create a password strength checker using JavaScript. It sets up an event listener on an input field for a password, and when the user types in the password field, it checks the password strength and updates a visual indicator of the password strength. It also defines several helper functions to toggle the password visibility, toggle the icon shown on the password visibility button, and check the password strength.
Finally, the password strength is then visualized using a progress bar that changes color and width based on the password strength.
Now it’s time to create our project.
How to Create JavaScript Password Strength Checker
First of all, load the following assets into the head tag of your HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
Create the HTML structure for the password strength checker as follows:
<head>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> -->
<script src="https://kit.fontawesome.com/1c2c2462bf.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" id="validateForm">
<h1>Welcome</h1>
<fieldset>
<!-- Email input-->
<div class="form-group">
<label class="col-md-12 control-label" for="textinput">
Email
</label>
<div class="col-md-12">
<input id="email" name="textinput"
type="email" autocomplete="off"
placeholder="Enter your email address"
class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-12 control-label" for="passwordinput">
Password
</label>
<div class="col-md-12">
<input id="password" class="form-control input-md"
name="password" type="password"
placeholder="Enter your password" >
<span class="show-pass" onclick="toggle()">
<i class="far fa-eye" onclick="myFunction(this)"></i>
</span>
<div id="popover-password">
<p><span id="result"></span></p>
<div class="progress">
<div id="password-strength"
class="progress-bar"
role="progressbar"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="width:0%">
</div>
</div>
<ul class="list-unstyled">
<li class="">
<span class="low-upper-case">
<i class="fas fa-circle" aria-hidden="true"></i>
Lowercase & Uppercase
</span>
</li>
<li class="">
<span class="one-number">
<i class="fas fa-circle" aria-hidden="true"></i>
Number (0-9)
</span>
</li>
<li class="">
<span class="one-special-char">
<i class="fas fa-circle" aria-hidden="true"></i>
Special Character (!@#$%^&*)
</span>
</li>
<li class="">
<span class="eight-character">
<i class="fas fa-circle" aria-hidden="true"></i>
Atleast 8 Character
</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<a href="#" class="btn login-btn btn-block">
Create Account
</a>
</div>
<div class="ex-account text-center">
<p>Already have an account? Signin
<a href="/">here</a>
</p>
<div class="divider"></div>
</div>
</fieldset>
</form>
</div>
<!-- <script src="main.js"></script> -->
</body>
Now, style the password strength checker using the following CSS styles:
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
body {
font-family: "PT Sans", sans-serif;
}
.container {
background-color: #2bd5e9;
}
h1 {
margin: 15px 0 25px;
text-align: center;
font-size: 30px;
}
input {
color: #022255 !important;
}
input[type=email]:focus,
input[type=password]:focus,
input[type=text]:focus {
box-shadow: 0 0 5px rgba(246, 8, 110, 0.8);
border: 1px solid rgba(246, 8, 110, 0.8);
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.form-horizontal {
width: 320px;
background-color: #ffffff;
padding: 25px 38px;
border-radius: 12px;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
}
.control-label {
text-align: left !important;
padding-bottom: 4px;
}
.progress {
height: 3px !important;
}
.form-group {
margin-bottom: 10px;
}
.show-pass {
position: absolute;
top: 5%;
right: 8%;
}
.progress-bar-danger {
background-color: #e90f10;
}
.progress-bar-warning {
background-color: #ffad00;
}
.progress-bar-success {
background-color: #02b502;
}
.login-btn {
width: 180px !important;
background-image: linear-gradient(to right, #f6086e, #ff133a) !important;
font-size: 18px;
color: #fff;
margin: 0 auto 5px;
padding: 8px 0;
}
.login-btn:hover {
background-image: linear-gradient(to right, rgba(255, 0, 111, 0.8), rgba(247, 2, 43, 0.8)) !important;
color: #fff !important;
}
.fa-eye {
color: #022255;
cursor: pointer;
}
.ex-account p a {
color: #f6086e;
text-decoration: underline;
}
.fa-circle {
font-size: 6px;
}
.fa-check {
color: #02b502;
}
Finally, add the following JavaScript function for its :
let state = false;
let password = document.getElementById("password");
let passwordStrength = document.getElementById("password-strength");
let lowUpperCase = document.querySelector(".low-upper-case i");
let number = document.querySelector(".one-number i");
let specialChar = document.querySelector(".one-special-char i");
let eightChar = document.querySelector(".eight-character i");
password.addEventListener("keyup", function(){
let pass = document.getElementById("password").value;
checkStrength(pass);
});
function toggle(){
if(state){
document.getElementById("password").setAttribute("type","password");
state = false;
}else{
document.getElementById("password").setAttribute("type","text")
state = true;
}
}
function myFunction(show){
show.classList.toggle("fa-eye-slash");
}
function checkStrength(password) {
let strength = 0;
//If password contains both lower and uppercase characters
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
strength += 1;
lowUpperCase.classList.remove('fa-circle');
lowUpperCase.classList.add('fa-check');
} else {
lowUpperCase.classList.add('fa-circle');
lowUpperCase.classList.remove('fa-check');
}
//If it has numbers and characters
if (password.match(/([0-9])/)) {
strength += 1;
number.classList.remove('fa-circle');
number.classList.add('fa-check');
} else {
number.classList.add('fa-circle');
number.classList.remove('fa-check');
}
//If it has one special character
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
strength += 1;
specialChar.classList.remove('fa-circle');
specialChar.classList.add('fa-check');
} else {
specialChar.classList.add('fa-circle');
specialChar.classList.remove('fa-check');
}
//If password is greater than 7
if (password.length > 7) {
strength += 1;
eightChar.classList.remove('fa-circle');
eightChar.classList.add('fa-check');
} else {
eightChar.classList.add('fa-circle');
eightChar.classList.remove('fa-check');
}
// If value is less than 2
if (strength < 2) {
passwordStrength.classList.remove('progress-bar-warning');
passwordStrength.classList.remove('progress-bar-success');
passwordStrength.classList.add('progress-bar-danger');
passwordStrength.style = 'width: 10%';
} else if (strength == 3) {
passwordStrength.classList.remove('progress-bar-success');
passwordStrength.classList.remove('progress-bar-danger');
passwordStrength.classList.add('progress-bar-warning');
passwordStrength.style = 'width: 60%';
} else if (strength == 4) {
passwordStrength.classList.remove('progress-bar-warning');
passwordStrength.classList.remove('progress-bar-danger');
passwordStrength.classList.add('progress-bar-success');
passwordStrength.style = 'width: 100%';
}
}
That’s all! hopefully, you have successfully created our project. If you have any questions or suggestions, feel free to comment below.
