password weakness checker
<html>
<head>
<!-- Bootstrap 5 link -->
<link href= "https://cdn.jsdelivr.net/npm/[email protected]/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>
5
1
// 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'
}
});
Thank you!
1
0
Are there any code examples left?
New code examples in category Javascript
-
Javascript 2023-04-21 22:52:36
-
Javascript 2022-03-27 22:25:20 javascript download string as file
-
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
-
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
-
Javascript 2022-03-27 21:15:02 javascript regex french phone number
-
Javascript 2022-03-27 21:05:03 cypress custom error message
-
Javascript 2022-03-27 21:00:05 create element javascript with id
-
Javascript 2022-03-27 20:40:57 feather icons react
-
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
-
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password