This JavaScript code assesses the password strength Meter for your website’s sign-up form. It dynamically evaluates password criteria. It visually represents password strength for users. This helps users create stronger passwords securely.
You can use this code on your website’s sign-up page. It enhances security by guiding users to create stronger passwords. The visual feedback encourages users to make passwords more secure.
How to Create JavaScript Password Strength Meter
1. First, load the following Ajax CDN link 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">
2. add the necessary HTML structure for your sign-up form. Include input fields for email and password and the required styling classes. Ensure your form has a unique ID for easy JavaScript targeting.
<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>
3. customize the CSS code to match your website’s design aesthetics. Adjust colors, fonts, and layout as needed to seamlessly integrate the password strength checker into your sign-up form.
@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;
}
4. Implement JavaScript functions to check the password strength. These functions will analyze the entered password and provide visual feedback to the user regarding its strength.
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%';
}
}
By following this tutorial, you’ve successfully integrated JavaScript code to enhance password security on your website. Users can now create stronger passwords with confidence, contributing to a more secure online environment.
