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>form with password strength checker</title>
</head>
<body>
<!-- The heading-->
<svg>
<text y="30">Please play</text>
<text y="80">with the form</text>
</svg>
<div id="outside">
<form id="frm" >
<!--the name-->
<label>Your name:</label><br/>
<input type="text" id="name" onblur="nm()" maxlength=30 size=30 placeholder="nam"/><br/>
<!--name display-->
<div id="di1" class="color"></div>
<!-- the email-->
<label>Email address:</label><br/>
<input type="email" id="mail" size=30 placeholder="you@example.com" onblur="chkMail()" required/><br/>
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
body{
background-color: gray;
}
#frm {
position:fixed;
top:50%;
left:50%; transform:translate(-50%,-50%);
}
input:focus{
background-color: orange;
padding:7px;
font-weight:bolder;
}
.color{
color: red;
padding:0;
margin:0;
}
svg{
font:bold 40px 'serif';
}
text{
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
/**************
regular expression tuitorial
https://regexone.com/lesson/kleene_operators
************/
//it may not be the proper code its always trial and error
alert("This may not be the most beautiful code in the world it only domonstrates how regular expressions can come in handy \n \n suggestions are welcome ");
//for the input type name
function nm(){
var e=document.getElementById("name").value;
var di=document.getElementById("di1");
//if the name has a digit
if(e.match(/\d/)){
di.innerHTML="Really does the name have a number";
//its impossible to match regular expressions for name :)
}else{
di.innerHTML="How are you 😌 👉 👉 "+" "+e;
di.style.color="gold";
}
}
//for the password strength
function chk(){
//the display beneath
var p=document.getElementById("di3");
//get the password
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run