How to make Password Strength Checker in JavaScript
A Password Strength Checker is a user-friendly tool that helps users create secure and strong passwords by evaluating the strength of the password in real-time. It visually indicates whether a password is weak, medium, or strong based on criteria such as the inclusion of letters, numbers, special characters, and minimum length.
Why Use a Password Strength Checker?
With increasing security concerns on the web, weak passwords are a common vulnerability. A password strength checker guides users to create stronger, harder-to-crack passwords using client-side validation.
Technologies Used
- HTML: Structure of the form and input
- CSS: Styling the interface and strength indicators
- JavaScript: Evaluating password strength with Regex
How It Works
The checker evaluates password strength based on:
- Presence of letters (a–z, A–Z)
- Presence of numbers (0–9)
- Presence of special characters (@, #, $, %, etc.)
- Length of the password (6–8+ characters)
Depending on these factors, the password is marked as weak, medium, or strong.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password Strength Checker</title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>
</head>
<body>
<div class="container">
<h2>Check Your Password Strength</h2>
<input type="password" placeholder="Enter password" id="password">
<div class="strength-meter">
<div class="bar" id="bar1"></div>
<div class="bar" id="bar2"></div>
<div class="bar" id="bar3"></div>
</div>
<p class="feedback" id="feedback">Password strength will appear here</p>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Code
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
width: 90%;
max-width: 400px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.strength-meter {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.bar {
height: 8px;
flex: 1;
margin: 0 3px;
background: #ddd;
border-radius: 5px;
transition: background 0.3s;
}
.feedback {
text-align: center;
font-size: 14px;
color: #888;
}
.weak {
background-color: red !important;
}
.medium {
background-color: orange !important;
}
.strong {
background-color: green !important;
}
JavaScript Code
const passwordInput = document.getElementById('password');
const bar1 = document.getElementById('bar1');
const bar2 = document.getElementById('bar2');
const bar3 = document.getElementById('bar3');
const feedback = document.getElementById('feedback');
passwordInput.addEventListener('input', function () {
const password = passwordInput.value;
let strength = 0;
if (password.length >= 6) strength++;
if (/[A-Z]/.test(password) && /[0-9]/.test(password)) strength++;
if (/[^A-Za-z0-9]/.test(password) && password.length >= 8) strength++;
// Reset bar colors
[bar1, bar2, bar3].forEach(bar => bar.className = 'bar');
if (strength === 0) {
feedback.textContent = "Too weak";
} else if (strength === 1) {
bar1.classList.add('weak');
feedback.textContent = "Weak password";
} else if (strength === 2) {
bar1.classList.add('medium');
bar2.classList.add('medium');
feedback.textContent = "Medium strength";
} else if (strength === 3) {
bar1.classList.add('strong');
bar2.classList.add('strong');
bar3.classList.add('strong');
feedback.textContent = "Strong password!";
}
});
Demo
Please click the button below to view the demo.
Conclusion
The Password Strength Checker is a practical tool for improving password security by guiding users to create stronger credentials. It can be easily integrated into login or registration forms on websites or web apps.
By using HTML, CSS, and JavaScript together, you can build an interactive, real-time strength meter that boosts your site’s UX and security.
