html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Password Strength Challenge</title>
<!-- jquery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<h3>Type in your password:</h3>
<input type="password" id="pass" autofocus/> <span></span><br/>
<label><input type="checkbox" name="show" id="show">Show the password</label>
<p id="p1"></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
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
font-family: Helvetica;
}
body{
margin-top: 10px;
}
div{
width: 80%;
height: 100%;
margin: 0 auto;
}
h3{
font-size: 1.3rem;
}
#pass{
width: 50%;
margin: 10px 0;
}
span{
color: red;
}
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
$(function(){
$("#show").change(function() {
if(this.checked) {
$("#pass").attr("type", "text");
}else{
$("#pass").attr("type", "password");
}
});
});
setInterval(checkStrength, 600);
function checkStrength(){
var pwd = $("#pass").val();
var strengthPoints = 0, pwdStrength = "";
if(pwd.length <=3){
strengthPoints = 0;
}else {
if(pwd.length >= 8){
strengthPoints++;
}
if(pwd.search("[a-z]")>-1){
strengthPoints++;
}
if(pwd.search("[A-Z]")>-1){
strengthPoints++;
}
if(pwd.search("[0-9]")>-1){
strengthPoints++;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run