How to Create a Password Strength Checker with HTML, CSS, and JavaScript
In this Javascript tutorial, we will see how to create a basic password strength checker that evaluates password strength based on length, character types, and the presence of special characters.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Password Checker</title>
<style>
body{ background-color: #555; }
.password-checker{ background-color: #fff; font-family: Helvetica, sans-serif;
border: 1px solid #ddd; border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 0 auto; max-width: 400px; padding: 20px;
}
#password{ width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box;
border: 2px solid #ccc; border-radius: 4px;
}
#check-btn{ width: 100%; background-color: #4caf50; color: #fff; padding: 14px 20px;
margin: 8px 0; border: none; border-radius: 4px; cursor: pointer;
}
#check-btn:hover{ background-color: #4ca049; }
#result{ margin-top: 2px; font-weight: bold; }
</style>
</head>
<body>
<div class="password-checker">
<form>
<label for="password">Enter Password:</label>
<input type="password" id="password" placeholder="Enter your password">
<br>
<label for="show-password">
<input type="checkbox" id="show-password" onchange="tooglePasswordVisibility()">
show password
</label>
<br>
<br>
<button type="button" id="check-btn">Check Password</button>
<br>
<div id="result"></div>
</form>
</div>
<script>
// get the elements from the DOM
const checkBtn = document.getElementById("check-btn");
const password = document.getElementById("password");
const result = document.getElementById("result");
// function to toggle the visibility of the password field
function tooglePasswordVisibility(){
const passwordField = document.getElementById("password");
const showPasswordCheckbox = document.getElementById("show-password");
// if the checkbox is checked, show the password, otherwise hide it
if(showPasswordCheckbox.checked) {
passwordField.type = "text";
}
else{
passwordField.type = "password";
}
}
// add event listener to the button to check the password strength
checkBtn.addEventListener("click", ()=>{
// get the value of the password input field
let passwordValue = password.value;
// set an empty string for the result text
let resultText = "";
// regular expression to match special characters
const regex = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
// check the password strength
if(passwordValue.length < 8){
resultText = "Password should be at least 8 characters long.";
}
else if(!/[A-Z]/.test(passwordValue)){
resultText = "Password should contain at least 1 uppercase letter.";
}
else if(!/[a-z]/.test(passwordValue)){
resultText = "Password should contain at least 1 lowercase letter.";
}
else if(!/[0-9]/.test(passwordValue)){
resultText = "Password should contain at least 1 number.";
}
else if(!regex.test(passwordValue)){
resultText = "Password should contain at least 1 special character.";
}
else{
resultText = "Your password is strong.";
}
// display the result text
result.innerText = resultText;
});
</script>
</body>
</html>
Code Explanation:
This JavaScript code enables users to create a basic password strength checker with an input field for password entry and a strength-checking button.
This JavaScript code performs the following actions:
1 - When the "Show Password" checkbox is checked, it toggles the visibility of the password input field to either show or hide the entered password..
2 - Clicking the "Check Password" button triggers an event listener that assesses the entered password's strength.
It evaluates the password based on several criteria, considering it weak if it's less than 8 characters, lacks an uppercase letter, lacks a lowercase letter, lacks a digit, or lacks a special character.
If the password meets all these conditions, it's classified as strong, and the result text is updated to reflect its strength.
OUTPUT:
