<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3 class="text-center"> password validator </h3>
<form action="#" method="post" class="center-block">
<input type="password" id="password" autocomplete="off" class="form-control input-lg" placeholder = "Enter your Password">
<input class="button btn" onclick="checkpassword()" type="button" value="submit">
<br/>
<label> Meter </label> <progress max="100" value="0" id="meter"></progress>
<br/>
<br/>
<input type="button" id="toggle" onclick = "result()" class="btn btn-success btn-lg btn-block" value="Show Password Strength">
</form>
<div class="textbox text-center"></div>
<div id="passwordvalue" class="text-center"></div>
<script src="script.js"></script>
</body>
</html>
body {
background-color: #0b5ca2;
text-align: center;
}
h3 {
color: white;
text-align:center;
margin:0 auto;
}
form {
width: 400px;
text-area:70px;
margin-left:auto;
margin-right:auto;
text-align: center;
display:inline-block;
}
form input {
margin-bottom: 6px;
}
div { color: yellow;
font-size: 20px;
}
input [type=submit]{
background-color:brown;
font-size: 20px;
color: white;
}
label{ font-size: 20px;
color: white;
}
progress{
background-color:yellow;
}
var code = document.getElementById("password");
var strengthbar = document.getElementById("meter");
var display = document.getElementsByClassName("textbox")[0];
code.addEventListener("keyup", function() {
checkpassword(code.value);
});
function result() {
var showHide = document.getElementById("toggle");
var val= document.getElementById("passwordvalue")
if (val.style.display==="block"){
val.style.display="none";
showHide.value="Hide";
}
else{
val.style.display="block";}
return (val.innerHTML ="The strength of your password is" + " " + strengthbar.value + "%");
}
function checkpassword(password) {
var strength = 0;
if (password.match(/[a-z]+/)) {
strength += 1;
}
if (password.match(/[A-Z]+/)) {
strength += 1;
}
if (password.match(/[0-9]+/)) {
strength += 1;
}
if (password.match(/[$@#&!]+/)) {
strength += 1;
}
if(password.length === 0){ display.innerHTML = "";
}
if (password.length < 6 && password.length !==0) {
display.innerHTML = "minimum password length is 6";
}
if(password.length > 6 && password.length < 12) { display.innerHTML = "";
}
if (password.length > 12) {
display.innerHTML = "maximum password length is 12";
}
switch (strength) {
case 0:
strengthbar.value = 0;
break;
case 1:
strengthbar.value = 25;
break;
case 2:
strengthbar.value = 50;
break;
case 3:
strengthbar.value = 75;
break;
case 4:
strengthbar.value = 100;
break;
}
}
/**
var code = document.getElementById("password");
var strengthbar = document.getElementById("meter");
code.addEventListener("keyup",function(){
checkpassword(code.value)
})
var display = document.getElementsByClassName("textbox")[0];
function checkpassword(password)
{
var strength=0;
if (password.match(/[a-z]+/)){
strength+=1;
}
if (password.match(/[A-Z]+/)){
strength+=1;
}
if (password.match(/[0-9]+/)){
strength+=1;
}
if (password.match(/[$@#&!]+/)){
strength+=1;
}
if (password.length < 6){
display.innerHTML ="minimum number of characters is 6";
}
if (password.length > 12){
display.innerHTML = "maximum number of characters is 12";
}
switch(strength){
case 0:
strengthbar.value=0;
break;
case 1:
strengthbar.value=25;
break;
case 2:
strengthbar.value=50;
break;
case 3:
strengthbar.value=75;
break;
case 4:
strengthbar.value=100;
break;
}
}
**/
/**
$(document).ready(function(){
var input = $("#password").val();
if (input.length>0 && input.length<6){
$(".textbox").text("password must be at least six characters long");
}
else if (input.length>6 && input.length<12){$(".textbox").text("");}
else if (input.length>12){$(".textbox").text("you have exceeded the number of allowed characters");}
else {$(".textbox").text("");}
});
**/