Password strength checker in HTML, CSS, and Javascript

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.

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')
})

Blog

Password strength checker in HTML, CSS, and Javascript

Ashutosh Tiwari

You may like these:

HTML Code

CSS Code

Javascript Code

Join Our Newsletter. No Spam, Only the good stuff.

Related