Breaking News: Grepper is joining You.com. Read the official announcement!

How to create strong password strength

Uptight Unicorn answered on September 3, 2022 Popularity 8/10 Helpfulness 1/10

answer How to create strong password strength

How to create strong password strength

Comment

<html>
<head>
    <!-- Bootstrap 5 link -->
    <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- CSS Styling -->
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    </style>
</head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        </h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weak</span>
        <br>
    </div>     
</body>
</html>

<script> 
	// timeout before a callback is called

let timeout;

// traversing the DOM and getting the input and span using their IDs

let password = document.getElementById('PassEntry')
let strengthBadge = document.getElementById('StrengthDisp')

// The strong and weak password Regex pattern checker

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

function StrengthChecker(PasswordParameter){
    // We then change the badge's color and text based on the password strength

    if(strongPassword.test(PasswordParameter)) {
        strengthBadge.style.backgroundColor = "green"
        strengthBadge.textContent = 'Strong'
    } else if(mediumPassword.test(PasswordParameter)){
        strengthBadge.style.backgroundColor = 'blue'
        strengthBadge.textContent = 'Medium'
    } else{
        strengthBadge.style.backgroundColor = 'red'
        strengthBadge.textContent = 'Weak'
    }
}

// Adding an input event listener when a user types to the  password input 

password.addEventListener("input", () => {

    //The badge is hidden by default, so we show it

    strengthBadge.style.display= 'block'
    clearTimeout(timeout);

    //We then call the StrengChecker function as a callback then pass the typed password to it

    timeout = setTimeout(() => StrengthChecker(password.value), 500);

    //Incase a user clears the text, the badge is hidden again

    if(password.value.length !== 0){
        strengthBadge.style.display != 'block'
    } else{
        strengthBadge.style.display = 'none'
    }
});
</script>

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: www.section.io

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Sep 03 2022

Uptight Unicorn

0 Answers Avg Quality 2/10

How to create strong password strength

Contents

More Related Answers

How to create strong password strength

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.