DEV Community

Cover image for Password strength checker in HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

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.

You may like these:

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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')
})
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
incoderweb profile image
Ashutosh Tiwari Author

Please share feedback in comment box.