Skip to content

Instantly share code, notes, and snippets.

@akinyeleolat

akinyeleolat/index.html

Last active June 20, 2019 19:05
Show Gist options
  • Save akinyeleolat/88d7914d3cbb329ce860f8d2a03c33d6 to your computer and use it in GitHub Desktop.
Save akinyeleolat/88d7914d3cbb329ce860f8d2a03c33d6 to your computer and use it in GitHub Desktop.
Download ZIP
password validator
Raw
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1><span>Password</span> Strength</h1>
<div class="container">
<form id="myform" action="#">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">Password</label>
<input type="password" id="psw" name="psw" required>
<button type="button" class="button" onclick="getPassword()">Check Password</button>
<div id="passwordDescription" class="strength0">Password not entered</div>
</form><div id="progressbar">
<div id="progressbarIn"></div>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="symbol" class="invalid">At least <b>1 special characters/symbol</b></p>
<p id="passlength" class="invalid">Minimum <b>6 characters and maximum 12 characters </b></p>
</div></div>
 </body>
</html>
Raw
script.js
function getPassword(){
var Usrname=document.getElementById("usrname").value;
var password=document.getElementById("psw").value;
//var pswlength=password.length;
//document.getElementById("passwordDescription").innerHTML=pswlength;
document.getElementById("message").style.display="block";
document.getElementById("progressbar").style.display="block";
var score=0;
if(CheckUpperCase(password))score++;
if(CheckLowerCase(password))score++;
if(CheckNumber(password))score++;
if(CheckSymbol(password))score++;
CheckPasswordStrength(score);
CheckLength(password.length);
//console.log(password.length);
}
let CheckUpperCase = function (password){
if ( password.match(/[A-Z]/) ){
capital.classList.remove("invalid");
capital.classList.add("valid");
return true;
//password_strength++;
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
return false;
}
}
let CheckLowerCase=function(password){
if(password.match(/[a-z]/)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
//password_strength++;
return true;
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
return false;
}
}
let CheckNumber=function(password){
if (password.match(/[0-9]/g)) {
number.classList.remove("invalid");
number.classList.add("valid");
return true;
} else {
number.classList.remove("valid");
number.classList.add("invalid");
return false;
}
}
let CheckSymbol=function(password){
  var symbols =/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g;
  if (password.match(symbols)) {  
symbol.classList.remove("invalid");
symbol.classList.add("valid");
return true;
//password_strength++;
} else {
symbol.classList.remove("valid");
symbol.classList.add("invalid");
return false;
}
}
let CheckLength=function(pswlength){
if(pswlength>=6 && pswlength<=12)
{
console.log(pswlength);
passlength.classList.add("valid");
passlength.classList.remove("invalid");
} else {
passlength.classList.remove("valid");
passlength.classList.add("invalid");
}
}
function CheckPasswordStrength(score){
//this.score=score;
console.log(score);
 const desc =[];
desc[0] = "No input";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Good";
desc[4] = "Strong";
//desc[4] =
       const meter = [];
meter[0] = "0%";
meter[1] = "25%";
meter[2] = "50%";
meter[3] = "75%";
meter[4] = "100%"
//document.getElementById("progressbar").style.display="block";
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordDescription").className = "strength" + score;
document.getElementById("progressbarIn").style.width=meter[score];
document.getElementById("progressbarIn").innerHTML = meter[score];
}
Raw
style.css
html{
background: #696969;
font-family: 'Lato', sans-serif;
color:white;
}
h1{
color:white;
font-size:50px;
text-align:center;
padding-top:30px;
margin-bottom:20px;
}
h1 span{
font-weight:bold;
color:white;
opacity:.3;
}
/* Style all input fields */
input {
width: 25%;
padding: 12px;
border: 1px solid green;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
background: lightyellow;
color: green;
}
/* Style the submit button */
.button {
color: white;
width:12.5%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
display: inline-block;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
background-color: #4CAF50;
border-radius: 5px;
box-shadow: 0 5px #999;
font-size:16px;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/* Style the container for inputs */
.container {
padding: 20px;
   width: 80%;
   position: absolute;
margin: 0 auto;
}
#myform{
width: 100%;
margin: 0 auto;
position: relative;
margin-bottom:6px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
color: #000;
   margin-top: 5px;
border-radius: 5px; /* (height of inner div) / 2 + padding */
padding: 3px;
display:none;
 width:250px;
border:2px solid red;
border-bottom: 6px solid red;
background-color: lightgrey;
}
#message p {
padding: 10px 35px;
font-size: 15px;
}
/* progress bar for password strength*/
#progressbar {
background-color: #ccc;
border-radius: 13px; /* (height of inner div) / 2 + padding */
padding: 3px;
display:none;
width:100%;
margin-bottom:6px;
}
#progressbarIn {
background-color: green;
width: 0%; /* Adjust with JavaScript */
height: 20px;
border-radius: 13px;
color: #fff;
text-align: center;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content:url("https://findicons.com/files/icons/2166/oxygen/16/checkmark_korganizer.png");
}
/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: url("https://findicons.com/files/icons/1620/crystal_project/16/button_cancel.png");
}
#passwordStrength
{
height:15px;
display:block;
float:left;
border-bottom: 6px solid white;
}
#passwordDescription{
position:relative;
float: center;
}
.strength0
{
width:250px;
background:#cccccc;
color:green;
}
.strength1
{
width:250px;
background:#ff0000;
}
.strength2
{
width:250px;
background:#ff5f5f;
}
.strength3
{
width:250px;
background:#56e500;
}
.strength4
{
background:#399800;
width:250px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment