Password Validation using html and CSS and JavaScript

Veröffentlicht am: 28 August 2020
auf dem Kanal: Techie Coder

278

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:

let full_slash = document.querySelector('#full_slash');
function fullSlash(){
if(full_slash.className == "fa fa-eye"){
full_slash.className = "fa fa-eye-slash";
password.type = "text";
}
else{
full_slash.className = "fa fa-eye";
password.type = "password"
}
}

function spantext(){
if(password.value.match(/[A-Z]/) != null){
valid('capital' , 'fa-check' , 'fa-times');
}
else{
invalid('capital' , 'fa-check' , 'fa-times');
}
if(password.value.match(/[!@#$%^&*]/) != null){
valid('char' , 'fa-check' , 'fa-times');
}
else{
invalid('char' , 'fa-check' , 'fa-times');
}
if(password.value.match(/[0-9]/) != null){
valid('num' , 'fa-check' , 'fa-times');
}
else{
invalid('num' , 'fa-check' , 'fa-times');
}
if(password.value.length "Angle bracket greater than ...... because angle brackets aren't allowed in description i need to put this comment." 7){
valid('len' , 'fa-check' , 'fa-times');
}
else{
invalid('len' , 'fa-check' , 'fa-times');
}
}

const password = document.querySelector('.password');

function valid(item , v_icon , inv_icon){
let text = document.querySelector(`#${item}`);
text.style.opacity = "1";
let valid_icon = document.querySelector(`#${item} .${v_icon}`);
valid_icon.style.opacity = "1";
let invalid_icon = document.querySelector(`#${item} .${inv_icon}`);
invalid_icon.style.opacity = "0";

}
function invalid(item , v_icon , inv_icon){
let text = document.querySelector(`#${item}`);
text.style.opacity = "0.5";
let valid_icon = document.querySelector(`#${item} .${v_icon}`);
valid_icon.style.opacity = "0";
let invalid_icon = document.querySelector(`#${item} .${inv_icon}`);
invalid_icon.style.opacity = "1";

}

For more such videos click link below:
CSS Designs:    • CSS - Designs

Web Development:    • Playlist

Python Projects:    • Python Project

Machine Learning Projects:    • Machine Learning Projects
***************************************************************************************
Instagram :   / techie._.coder

Facebook : https://www.facebook.com/techiecoder/...

For my gaming channel :    / channel
***************************************************************************************

Auf dieser Seite können Sie das Online-Video Password Validation using html and CSS and JavaScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Techie Coder 28 August 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 278 Mal angesehen und es wurde von 18 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

1,035