html
html
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
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
</head>
<body>
<div class="main">
<form action="mailto:gojquery@gmail.com" method="get">
<p>Sign up</p>
<input type="email" class="emailbox" data-accept="multidots.com" name="email" placeholder="Email">
<input type="password" name="pswrd1" class="ps1" placeholder="enter password">
<input type="password" name="pswrd2" class="ps2" placeholder="Confirm password">
<div class="pass-val">
<span>Password strength:</span>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="result"></p>
</div>
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
body {background-color: #68be4c;}
.main {;width: 100%; height: 100%; padding: 1px;box-sizing: border-box;}
form {width: 400px; max-width: 100%;margin: 50px auto;background-color: #fff;padding:50px;max-height: 100%;box-sizing: border-box;border-radius: 5px;border-radius: 5px; box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.3);}
form p {font-family: 'Cabin', sans-serif;font-size: 25px;letter-spacing: 1px;font-weight: bold;color: #000;text-align: center;}
input:not([type=submit]) {background-color: #f2f2f2;color: #000;display: block;width: 90%;margin:15px 0px;-webkit-appearrance:none;border:none;padding: 10px;font-family: 'Cabin', sans-serif;font-size: 15px;}
input[type=submit] {background-color: #00b241;color: #fff;border:none;width: 50%;margin:0 auto;padding: 10px;text-align: center; -webkit-appearance: none; display: block;font-family: 'Cabin', sans-serif;font-size: 15px;letter-spacing: 1px;font-weight: bold;cursor: pointer;}
input[type=submit]:hover {background-color: #06ce4f;transition: all ease 0.3s;}
/*Div for Password validation */
.pass-val {margin-bottom: 10px; }
.pass-val p {font-size: 13px;display: inline-block;margin-left: 6px;vertical-align: bottom;color: #f54949;}
.pass-val span {font-style: italic;font-size: 13px; font-family: sans-serif;}
.boxes {display: inline-block;width: 65px;vertical-align: bottom;}
.boxes .box {width: 10px;display: inline-block;height: 15px;border: 1px solid #d1d1d1;}
body {
}
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
$(document).ready(function(){
$(document).on('keyup', '.ps1', function(){
var ps1 = $('.ps1').val();
if ( ps1.length <= 3 ){
$('#result').text('password too short');
$('.box:first').css('background-color', '#e25f13');
}else {
$('#result').empty();
}
if ( ps1.length >= 4){
$('.box:eq(1)').css('background-color', '#6cc10f');
$('#result').text('password too weak');
}else {
$('.box:eq(1)').css('background-color', 'transparent');
}
if ( ps1.length >= 6){
$('.box:eq(2)').css('background-color', '#e4bf06');
$('#result').text('password is average');
}else {
$('.box:eq(2)').css('background-color', 'transparent');
}
if ( ps1.length >= 7){
$('.box:eq(3)').css('background-color', '#ece749');
$('#result').text('password is strong');
}else {
$('.box:eq(3)').css('background-color', 'transparent');
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Uruchom