Password Validation using html and CSS and JavaScript

In this video we will see how to make password validation using html and CSS and JavaScript

tags #password #validation #html #CSS #JavaScript

CSS Code:
*{
margin: 0;
padding: 0;
outline: none;
border: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}

body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: mediumaquamarine;
}

.container{
background: ghostwhite;
width: 400px;
height: 350px;
padding: 50px;
border-radius: 50px;
box-shadow: 0 0 20px rgba(8, 9, 1, 0.9);
}

.container .password{
width: 80%;
height: 45px;
padding: 0 50px 0 20px ;
border-radius: 30px;
font-size: large;
background: #e7eee5;
border: 1px solid rgb(66, 190, 132);
transition: 0.2s;
}

.container .password:focus{
box-shadow: 0 0 25px rgb(66, 190, 132);
}

.container p{
margin: 10px 10px 30px;
opacity: 0.5;
transition: 0.2s;
color: rgba(8, 9, 1, 0.9);
border: 1px solid rgba(8, 9, 1, 0.9);
border-radius: 20px;
padding: 10px 10px;
}

.container p span{
font-size: 20px;
color: rgba(20, 40, 60, 1);
margin-left: 45px;
}
.container p i{
position: absolute;
text-align: center;
width: 32px;
height: 32px;
line-height: 30px;
font-size: larger;
}

.fa-check{
color: green;
opacity: 0;
}
.fa-times{
color: red;
opacity: 1;
}

.container #full_slash{
color: rgba(20, 40, 60, 1);
font-size: 22px;
transform: translateX(350px) translateY(-35px);
cursor: pointer;
}

Javascript code:

function fullSlash(){
}
else{
}
}

function spantext(){
valid('capital' , 'fa-check' , 'fa-times');
}
else{
invalid('capital' , 'fa-check' , 'fa-times');
}
valid('char' , 'fa-check' , 'fa-times');
}
else{
invalid('char' , 'fa-check' , 'fa-times');
}
valid('num' , 'fa-check' , 'fa-times');
}
else{
invalid('num' , 'fa-check' , 'fa-times');
}
valid('len' , 'fa-check' , 'fa-times');
}
else{
invalid('len' , 'fa-check' , 'fa-times');
}
}

function valid(item , v_icon , inv_icon){

}
function invalid(item , v_icon , inv_icon){

}

For more such videos click link below:

***************************************************************************************

***************************************************************************************