<!-- --------------------- Created By InCoder --------------------- -->
<!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>
/* --------------------- 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;
}
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')
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.