In this article we going to make Password strength indicator using html css and JavaScript: A simple yet effective way to show your users how strong their passwords are. I have created password strength indicator in signup form below the input field of password. But here we only going to make password strength checker or indicator. As I have already shared many articles on how to make signup form (you can search on website).
The password strength indicator shows the strength of password that is written by user. You may have seen different type of password strength checker.
In this article you’ll learn how to create your own password strength checker using html css and javascript.
This password strength checker includes :
- Password strength text(Weak, Medium & Strong).
- Progress bar (Range from 0 to 100%).
- Tool Tip (Conditions to make strong password).
- Signup form (I made this password strength checker inside sign up form.)
This password strength indicator shows the live strength of password with status text (weak, medium & strong) and progress bar (range from 0% to 100%) when user typing the password. You can see demo and whole tutorial in below YouTube video.
Video Tutorial on Password Strength Meter Using HTML, CSS and JavaScript.
So basically, you can say the password is strong, when password fulfilled the below conditions, that Password must have:
- At least 8 characters.
- At least 1 uppercase letter.
- At least 1 lowercase letter.
- At least 1 number.
- At least 1 special character from !@#$%^&*.
You can add more conditions according to you that what you called a strong password.
Password Strength Meter.
So, the password strength meter or password strength bar we going to make is a simple. Initially password strength meter is hidden and when user start typing password or if password field get value, it appears or visible.
When user type the password, the password strength meter shows the status text of password strength (weak, medium and strong) and progress bar (width range from 0 to 100%) of according to conditions sets.
So, let’s start making it step by step.
Below are steps to make password strength meter.
Step 1: Create files and basic structure of html.
Create one folder and open it in your code editor. Create two files in that folder with html and css extension. Create basic structure of html and Link css file with html file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
}
Output:
Step 2: Create simple sign up form.
As we going to add password strength meter inside registration form we going to first create registration or signup form.
See below code it’s a simple form using just html and css.
I have added the comment in html code ‘password strength meter’ from where we going to start writing the code for password strength meter.
Also read: Create registration and login form using HTML and CSS.
Also read: How to create animated login and signup form using HTML, CSS & JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<h2>Sign Up</h2>
<form action="#">
<div class="input_box">
<input type="text" required>
<label>Username</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Email Id</label>
</div>
<div class="input_box">
<input type="text" class="password" required>
<label>Create Password</label>
<!-- Password strength indicator here -->
</div>
<div class="input_box">
<input type="text" required>
<label>Confirm Password</label>
</div>
<div class="link">By creating an account you agree to <a href="#">Terms & Conditions</a></div>
<button type="submit">Create Account</button>
<div class="link">Already have an account? <a href="#">Login</a></div>
<div class="link">Need Help? <a href="#">Contact Us</a></div>
</form>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
}
.box{
width: 400px;
background-color: #fff;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0px 5px 30px -20px #000;
text-align: center;
}
.box h2{
font-size: 40px;
}
.box .input_box{
width: 100%;
margin: 30px 0px;
position: relative;
}
.box .input_box input{
width: 90%;
padding: 12px 20px;
font-size: 25px;
background-color: #f2f2f2;
border-radius: 200px;
border: none;
outline: none;
}
.box .input_box label{
position: absolute;
font-size: 25px;
top: 12px;
left: 18px;
color: #7a7a7a;
pointer-events: none;
transition: 0.2s;
}
.box .input_box input:focus + label,
.box .input_box input:valid + label{
font-size: 16px;
color: blue;
top: -22px;
}
/* ---------- button ---------- */
.box form button{
width: 100%;
padding: 10px 20px;
font-size: 25px;
font-weight: bold;
border: none;
border-radius: 200px;
background-color: blue;
color: #fff;
cursor: pointer;
}
.box form .link{
font-size: 16px;
margin: 20px 0px;
}
.box form .link a{
color: blue;
text-decoration: none;
font-weight: bold;
}
Output:
Step 3: Create password strength meter.
Our password strength meter shows live status of password strength in text(weak, medium and strong) and progress bar(range from 0% to 100%).
We going to write code below the create password field in html file. I have added comment in html code in step no. 2.
We going to add password strength text (weak, medium and strong), progress bar and tool tip (that shows the conditions to make a strong password).
Let’s first make password strength text and progress bar.
HTML
<div class="password_strength_box">
<div class="password_strength">
<p class="text"></p>
<div class="line_box">
<div class="line"></div>
</div>
</div>
</div>
CSS
.password_strength_box{
width: 90%;
display: flex;
justify-content: space-between;
place-items: center;
margin: 10px auto;
}
.password_strength_box .password_strength{
width: 100%;
}
.password_strength .text{
font-size: 16px;
text-align: left;
margin-bottom: 5px;
font-weight: bold;
color: red;
}
.password_strength .line_box{
background-color: #f2f2f2;
}
.password_strength .line{
width: 10%;
height: 5px;
border-radius: 100px;
background-color: red;
transition: 0.3s;
}
Output:
Now let’s add tool tip for password conditions to create strong password insde class="password_strength_box".
The conditions I have added to create strong password is. Password must be:
- At least 8 characters.
- At least 1 uppercase letter.
- At least 1 lowercase letter.
- At least 1 number.
- At least 1 special character from !@#$%^&*.
You can add more conditions according to you that what you called a strong password.
HTML
<div class="tool_tip_box">
<span>?</span>
<div class="tool_tip">
<p style="list-style: none;"><b>Password must be:</b></p>
<p>At least 8 character long</p>
<p>At least 1 uppercase letter</p>
<p>At least 1 lowercase letter</p>
<p>At least 1 number</p>
<p>At least 1 special character from !@#$%^&*</p>
</div>
</div>
CSS
.tool_tip_box{
cursor: pointer;
margin-left: 10px;
position: relative;
}
.tool_tip_box span{
font-size: 16px;
font-weight: bold;
border-radius: 100px;
border: 2px solid #000;
width: 18px;
height: 18px;
display: inline-block;
}
.tool_tip_box .tool_tip{
position: absolute;
width: 200px;
top: 30px;
right: -100px;
background-color: #f6f6f6;
padding: 10px 30px;
z-index: 10;
border-radius: 12px;
text-align: left;
line-height: 1.5;
box-shadow: 0px 5px 10px -5px #000;
pointer-events: none;
opacity: 0;
transition: 0.2s;
transition-delay: 0.5s;
}
.tool_tip_box:hover .tool_tip{
opacity: 1;
}
.tool_tip p{
display: list-item;
}
Output:
Design is ready.
Before setting the password strength conditions let's add some other basic conditions. That we only have to show a password strength metre when the user type or password field has value. If password length is 0, we hide it and we also hide the password strength metre initially (when page load) if password length is 0. So, let’s add that condition.
JavaScript
let line = document.querySelector(".line");
let text = document.querySelector(".text");
let password_strength_box = document.querySelector(".password_strength_box");
let password = document.querySelector(".password");
if (password.value.length == 0) {
password_strength_box.style.display = "none";
}
password.oninput = function () {
if (password.value.length == 0) {
password_strength_box.style.display = "none";
}
// Further code form here
}
Now let’s add Password strength conditions in javascript. I have added conditions according to below conditions:
- At least 8 characters.
- At least 1 uppercase letter.
- At least 1 lowercase letter.
- At least 1 number.
- At least 1 special character from !@#$%^&*.
You can create your own according to what you called a strong password.
The password strength conditions that I created is:
If password length is greater than or equal 1 then password is weak. And we set the progress bar to 5% and added red colour. And we show the password strength metre
If password length is greater than or equal 2 then password is weak. And we set the progress bar to 10% and added red colour.
If password length is greater than or equal 3 then password is weak. And we set the progress bar to 20% and added red colour.
If password length is greater than or equal 4 then password is weak. And we set the progress bar to 35% and added red colour if at password length 4 if there is one special character (from !@#$%^&*) then I have set password strength text medium and progress bar 45% and colour #e9ee30.
If password length is greater than or equal to 5 and it contains at least one upper- and lower-case letter, then password is medium. And set the progress bar to 50% and added # e9ee30 colour.
If password length is greater than or equal to 6 and it contains at least one number, then password is medium. And set the progress bar to 70% and added # e9ee30 colour.
If password length is greater than or equal to 7 and it contains at least one number and one upper- and lower-case letter, then password is medium. And set the progress bar to 80% and added # e9ee30 colour.
If password length is greater than or equal to 8 and it contain at least one number, one upper and lower case letter and one special character from !@#$%^&*, then the password is strong. And set the progress bar to 100% and added #2ccc2c colour.
Here below is the code(if conditions). that is inside the oninput event(i added a comment in above javascript code that 'further code from here').
JavaScript
if (password.value.length >= 1) {
password_strength_box.style.display = "flex";
line.style.width = "5%";
line.style.backgroundColor = "red";
text.style.color = "red";
text.innerHTML = "Weak";
}
if (password.value.length >= 2) {
password_strength_box.style.display = "flex";
line.style.width = "10%";
line.style.backgroundColor = "red";
text.style.color = "red";
text.innerHTML = "Weak";
}
if (password.value.length >= 3) {
password_strength_box.style.display = "flex";
line.style.width = "20%";
line.style.backgroundColor = "red";
text.style.color = "red";
text.innerHTML = "Weak";
}
if (password.value.length >= 4) {
password_strength_box.style.display = "flex";
line.style.width = "35%";
line.style.backgroundColor = "red";
text.style.color = "red";
text.innerHTML = "Weak";
if ((password.value.match(/[!@#$%^&*]/))) {
password_strength_box.style.display = "flex";
line.style.width = "45%";
line.style.backgroundColor = "#e9ee30";
text.style.color = "#e9ee30";
text.innerHTML = "Medium";
}
}
if (password.value.length >= 5 &&
(password.value.match(/[A-Z]/)) &&
(password.value.match(/[a-z]/))) {
password_strength_box.style.display = "flex";
line.style.width = "50%";
line.style.backgroundColor = "#e9ee30";
text.style.color = "#e9ee30";
text.innerHTML = "Medium";
}
if (password.value.length >= 6 &&
(password.value.match(/[0-9]/))) {
password_strength_box.style.display = "flex";
line.style.width = "70%";
line.style.backgroundColor = "#e9ee30";
text.style.color = "#e9ee30";
text.innerHTML = "Medium";
}
if (password.value.length >= 7 &&
(password.value.match(/[A-Z]/)) &&
(password.value.match(/[a-z]/)) &&
(password.value.match(/[0-9]/))) {
password_strength_box.style.display = "flex";
line.style.width = "80%";
line.style.backgroundColor = "#e9ee30";
text.style.color = "#e9ee30";
text.innerHTML = "Medium";
}
if (password.value.length >= 8 &&
(password.value.match(/[A-Z]/)) &&
(password.value.match(/[a-z]/)) &&
(password.value.match(/[0-9]/)) &&
(password.value.match(/[!@#$%^&*]/))) {
password_strength_box.style.display = "flex";
line.style.width = "100%";
line.style.backgroundColor = "#2ccc2c";
text.style.color = "#2ccc2c";
text.innerHTML = "Strong";
}
So that’s it. You can see demo in above YouTube video.
You may like:
- How to create a simple random password generator using HTML, CSS and JavaScript.
- How to show and hide password with checkbox using JavaScript.
- How to create 4-digit OTP input field using JavaScript.
- How to create a tool tip using HTML and CSS.
- How to create a random captcha generator using HTML, CSS and JavaScript.
Final code:
So that’s how you can make password strength checkers using html css and simple javascript. If you have any questions or suggestions you can write in the comment section.
Share your thoughts.