html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Password Validator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<label for="psw">Password:</label>
<input type="password" autocomplete="off" id="psw" name="psw">
</div>
<div id="message">
<h3>Test Your Password</h3>
<p id="lengthCounter"><b>Number of Characters:</b></p>
<p id="PSWlength" class="invalid"><b>Minimum 8 Characters in Length</b></p>
<p id="upper" class="invalid"><b>Uppercase Letters</b></p>
<p id="lower" class="invalid"><b>Lowercase Letters</b></p>
<p id="number" class="invalid"><b>Numbers</b></p>
<p id="symbol" class="invalid"><b>Symbols</b></p>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
input {
width: 50%;
padding: 10px;
border: 1px solid #CCC;
border-radius: 5px;
box-sizing: border-box;
}
.container {
background-color: #EEE;
padding: 20px;
}
#message {
background: #EEE;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
font-size: 15px;
}
h3 {
text-align:center;
Enter to Rename, Shift+Enter to Preview
js
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
window.onload = function() {
const myInput = document.getElementById('psw');
const lengthC = document.getElementById('lengthCounter');
const PSWlength = document.getElementById('PSWlength');
const upper = document.getElementById('upper');
const lower = document.getElementById('lower');
const number = document.getElementById('number');
const symbol = document.getElementById('symbol');
const lengthCounter = (pass) => {
const len = pass.length;
lengthC.innerHTML = (`<b>Number of Characters: ${len} </b>`);
};
const lengthValidator = (pass) => {
if (pass.length >= 8) {
PSWlength.classList.remove('invalid');
PSWlength.classList.add('valid');
} else {
PSWlength.classList.remove('valid');
PSWlength.classList.add('invalid');
}
};
const capitalValidator = (pass) => {
const upperCaseLetters = /[A-Z]/g;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Uruchom