├── index.html
└── script.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Password Strength
8 |
61 |
62 |
63 |
64 | Password Strength Test
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const strengthMeter = document.getElementById('strength-meter')
2 | const passwordInput = document.getElementById('password-input')
3 | const reasonsContainer = document.getElementById('reasons')
4 |
5 | passwordInput.addEventListener('input', updateStrengthMeter)
6 | updateStrengthMeter()
7 |
8 | function updateStrengthMeter() {
9 | const weaknesses = calculatePasswordStrength(passwordInput.value)
10 |
11 | let strength = 100
12 | reasonsContainer.innerHTML = ''
13 | weaknesses.forEach(weakness => {
14 | if (weakness == null) return
15 | strength -= weakness.deduction
16 | const messageElement = document.createElement('div')
17 | messageElement.innerText = weakness.message
18 | reasonsContainer.appendChild(messageElement)
19 | })
20 | strengthMeter.style.setProperty('--strength', strength)
21 | }
22 |
23 | function calculatePasswordStrength(password) {
24 | const weaknesses = []
25 | weaknesses.push(lengthWeakness(password))
26 | weaknesses.push(lowercaseWeakness(password))
27 | weaknesses.push(uppercaseWeakness(password))
28 | weaknesses.push(numberWeakness(password))
29 | weaknesses.push(specialCharactersWeakness(password))
30 | weaknesses.push(repeatCharactersWeakness(password))
31 | return weaknesses
32 | }
33 |
34 | function lengthWeakness(password) {
35 | const length = password.length
36 |
37 | if (length <= 5) {
38 | return {
39 | message: 'Your password is too short',
40 | deduction: 40
41 | }
42 | }
43 |
44 | if (length <= 10) {
45 | return {
46 | message: 'Your password could be longer',
47 | deduction: 15
48 | }
49 | }
50 | }
51 |
52 | function uppercaseWeakness(password) {
53 | return characterTypeWeakness(password, /[A-Z]/g, 'uppercase characters')
54 |
55 | }
56 |
57 | function lowercaseWeakness(password) {
58 | return characterTypeWeakness(password, /[a-z]/g, 'lowercase characters')
59 | }
60 |
61 | function numberWeakness(password) {
62 | return characterTypeWeakness(password, /[0-9]/g, 'numbers')
63 | }
64 |
65 | function specialCharactersWeakness(password) {
66 | return characterTypeWeakness(password, /[^0-9a-zA-Z\s]/g, 'special characters')
67 | }
68 |
69 | function characterTypeWeakness(password, regex, type) {
70 | const matches = password.match(regex) || []
71 |
72 | if (matches.length === 0) {
73 | return {
74 | message: `Your password has no ${type}`,
75 | deduction: 20
76 | }
77 | }
78 |
79 | if (matches.length <= 2) {
80 | return {
81 | message: `Your password could use more ${type}`,
82 | deduction: 5
83 | }
84 | }
85 | }
86 |
87 | function repeatCharactersWeakness(password) {
88 | const matches = password.match(/(.)\1/g) || []
89 | if (matches.length > 0) {
90 | return {
91 | message: 'Your password has repeat characters',
92 | deduction: matches.length * 10
93 | }
94 | }
95 | }
--------------------------------------------------------------------------------