Hello friends, today in this blog, we will learn how to create a password strength checker in HTML, CSS, and Javascript. In our previous blog, we saw how to create a random password generator in HTML, CSS, and Javascript. Now it's time to create a password strength checker. If you are interested, you can check my other javascript projects here.
The password strength checker checks the password that which user has entered and indicates the strength of the password it also indicates the password can be hacked by hackers or not. It has a meter that checks the user-entered password including a full combination of symbols, numbers, uppercase, and lowercase letters.
You may like these:
- Custom Video Player Design
- Responsive Accordion Design
- Cool Button with Background Animation
- How to Detect User Location using Javascript
This design [Password strength checker] has a container or box in that it has a title and an input box with a type of password and last but not least a message. When you start typing it changes its input and message color according to the strength of the password. It has a password show or hides toggler also.
If you are feeling difficulty understanding what am I trying to say? So you can check the source code and preview it as well.
Here:- Password strength checker
HTML Code
<!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>Password Strength Checker - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="checkerContainer">
<h1 class="title">password strength checker</h1>
<div class="form-group" data-placeholder="Password">
<input type="password" id="passwordChecker">
<span class='passTypeToggle' title="Show"><i class="fa-solid fa-eye"></i></span>
</div>
<div class="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
/* --------------------- Created By InCoder --------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: rgb(0 0 0 / 85%);
}
.checkerContainer {
width: 25rem;
margin: 1rem;
display: flex;
align-items: center;
border-radius: 0.6rem;
flex-direction: column;
justify-content: center;
background: rgb(0 0 0 / 35%);
box-shadow: 0 0 20px rgb(76 76 76 / 33%);
}
.checkerContainer .title {
color: #ccc;
margin-top: 0.8rem;
margin-bottom: 0.8rem;
font-size: clamp(1rem, 4vw, 1.6rem);
}
.checkerContainer .form-group {
height: 2.6rem;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: calc(100% - 4rem);
}
.checkerContainer .form-group #passwordChecker {
width: 100%;
height: 100%;
outline: none;
font-size: 1rem;
margin-top: 0.2rem;
color: #ccccccbd;
position: relative;
letter-spacing: 1px;
border-radius: 0.4rem;
background: transparent;
padding: 0 2rem 0 0.5rem;
border: 3px solid #3b3b3b;
transition: background 0.19s ease-in-out;
}
.checkerContainer .passTypeToggle {
top: 50%;
right: 4%;
display: none;
font-size: 18px;
cursor: pointer;
color: #ccccccbd;
position: absolute;
transform: translate(10%, -50%);
font-family: "Font Awesome 5 Free";
}
.checkerContainer .form-group::before {
left: 0;
top: 50%;
z-index: 1;
padding: 0 4px;
font-size: 14px;
user-select: none;
color: #ccccccbd;
position: absolute;
pointer-events: none;
content: attr(data-placeholder);
transform: translate(15%, -50%);
transition: transform .2s ease-in-out;
}
.checkerContainer .form-group.focus::before {
background: #191919;
transform: translate(15%, -130%);
}
.checkerContainer .form-group #passwordChecker:focus label {
color: #fff;
}
.checkerContainer .form-group.weak #passwordChecker {
color: rgb(239, 68, 68);
border: 2px solid rgb(239, 68, 68);
}
.checkerContainer .form-group.weak::before{
color: rgb(239, 68, 68);
}
.checkerContainer .form-group.medium #passwordChecker {
color: rgb(251, 191, 36);
border: 2px solid rgb(251, 191, 36);
}
.checkerContainer .form-group.medium::before{
color: rgb(251, 191, 36);
}
.checkerContainer .form-group.strong::before{
color: rgb(34, 197, 94);
}
.checkerContainer .message.weak {
color: rgb(239, 68, 68) !important;
}
.checkerContainer .message.medium {
color: rgb(251, 191, 36) !important;
}
.checkerContainer .form-group.strong #passwordChecker {
color: rgb(34, 197, 94);
border: 2px solid rgb(34, 197, 94);
}
.checkerContainer .message.strong {
color: rgb(34, 197, 94) !important;
}
.checkerContainer .form-group input:focus {
background: #4f4b4b;
}
.checkerContainer .message {
margin-top: 0.4rem;
color: #ccccccbd;
margin-bottom: 0.8rem;
}
Javascript Code
let input = document.querySelector('#passwordChecker')
let formGroup = document.querySelector('.form-group')
let message = document.querySelector('.message')
let passTypeToggle = document.querySelector('.passTypeToggle')
let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')
document.body.addEventListener('click', function (e) {
if (input.contains(e.target)) {
formGroup.classList.add('focus')
} else {
if(input.value == ''){
formGroup.classList.remove('focus')
}
}
});
let checkPasswordStrength = (password) => {
let message = {}
if(strongPassword.test(password)) {
message = {
strength : 'strong'
}
} else if(mediumPassword.test(password)) {
message = {
strength : 'medium'
}
} else {
message = {
strength : 'weak'
}
}
return message
}
input.addEventListener('keyup', e => {
let password = e.target.value
password != "" ? passTypeToggle.style.display = 'block' : passTypeToggle.style.display = 'none'
if(password == ''){
message.classList.remove('weak')
message.classList.remove('medium')
message.classList.remove('strong')
formGroup.classList.remove('weak')
formGroup.classList.remove('medium')
formGroup.classList.remove('strong')
message.innerHTML = ''
}else{
let result = checkPasswordStrength(password)
if(result.strength == 'weak'){
message.classList.remove('medium')
message.classList.remove('strong')
formGroup.classList.remove('medium')
formGroup.classList.remove('strong')
message.classList.add('weak')
formGroup.classList.add('weak')
message.innerHTML = 'Your Password is weak.'
}else if(result.strength == 'medium'){
formGroup.classList.remove('weak')
formGroup.classList.remove('strong')
message.classList.remove('weak')
message.classList.remove('strong')
message.classList.add('medium')
formGroup.classList.add('medium')
message.innerHTML = 'Your Password is medium.'
}else{
formGroup.classList.remove('weak')
formGroup.classList.remove('medium')
message.classList.remove('weak')
message.classList.remove('medium')
message.classList.add('strong')
formGroup.classList.add('strong')
message.innerHTML = 'Your Password is Strong.'
}
}
})
passTypeToggle.addEventListener('click', e => {
input.getAttribute('type') == 'password' ? input.setAttribute('type', 'text') : input.setAttribute('type', 'password')
input.getAttribute('type') == 'password' ? passTypeToggle.setAttribute('title', 'Show') : passTypeToggle.setAttribute('title', 'Hide')
document.querySelector('.passTypeToggle i').classList.toggle('fa-eye')
document.querySelector('.passTypeToggle i').classList.toggle('fa-eye-slash')
})
Top comments (1)
Please share feedback in comment box.