forked from Ceeejeey/password-strength-checker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
49 lines (42 loc) · 1.65 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const password = document.getElementById("password");
const message = document.getElementById("message");
const strength = document.getElementById("strength");
const submitButton = document.querySelector("button");
const eyeOpen = document.getElementById("eyeOpen")
const eyeClose = document.getElementById("eyeClose")
password.addEventListener("input", () => {
const passwordValue = password.value;
const passwordLength = passwordValue.length;
let strengthValue = '';
let color = '';
// Regex patterns for special characters, numbers, and uppercase letters
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(passwordValue);
const hasNumber = /\d/.test(passwordValue);
const hasUppercase = /[A-Z]/.test(passwordValue);
if (passwordLength === 0) {
strengthValue = '';
} else if (passwordLength < 5 || !hasSpecialChar || !hasNumber || !hasUppercase) {
strengthValue = 'Weak';
color = "#FF0000";
} else if (passwordLength < 10) {
strengthValue = 'Medium';
color = "#FBFF00";
} else if (passwordLength >= 10) {
strengthValue = 'Strong';
color = "#42FF00";
}
strength.innerHTML = `${strengthValue}`;
message.style.display = "block";
message.style.color = color;
});
submitButton.addEventListener("click", () => {
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
if (type === "password") {
eyeClose.style.display = "inline";
eyeOpen.style.display = "none";
} else {
eyeOpen.style.display = "inline";
eyeClose.style.display = "none";
}
});