TOGGLE PASSWORD VISIBILITY.
In this web development program we have try to toggle visibility of Password; It means when user enter the password it is already hidden as user click on eye symbols we put in code , password will hide or will be shown according initial state of password. See this below code and try to understand how did we achieve the required result.
PROGRAMMING CODE :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Password Hide and Show</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
html{font-size: 62.5%;}
#A{width: 100vw;height: 100vh;display: grid;place-items: center;
background-color: #000;}
#B{width: 50%;height: auto;display: grid;
place-items: center;background-color:darkslateblue;
padding: 5rem 3rem;position: relative;}
#i1,#i2,#i3{width: 100%;padding:1rem;color:red;
font-family: 'Trebuchet MS';border:.2rem solid #000;
border-radius: .3rem;margin: 1.5rem auto;font-size: 2.5rem;}
#i1,#i2,#i3:focus{outline-color: blue;}
#i4{padding:1rem 4rem;background-color: green;
font-size: 2rem;color: #fff;font-family: cursive; cursor: pointer;
border-radius: .3rem;}
#i4:hover{background-color: #fff;color: green
;border-color: green;}
@media(max-width:750px){html{font-size: 50%;}
#B{width: 75%;}}
#B h2{width:100%;color: #fff;font-size: 2rem;
font-family:sans-serif;text-align: left;margin: 1rem auto;}
#sh i{position: absolute; color: #000;
font-size: 2.5rem;right: 9%;top:45%;cursor: pointer;}
#sh i{display: none;}
#i2:valid ~ #sh #show {display: block;}
</style>
</head>
<body>
<div id="A">
<div id="B">
<h2>Username :</h2>
<input type="text" id="i1" required/>
<br>
<h2>Password :</h2>
<input type="password" id="i2" required/>
<div id="sh">
<i class="fa fa-eye" id="show"></i>
<i class="fa fa-eye-slash" id="hide"></i>
</div>
<br>
<h2>Confirm Password :</h2>
<input type="password" id="i3" required/>
<br><br>
<input type="submit" onclick="checkpass()" id="i4" value="Submit">
</div>
</div>
<script>
function checkpass()
{
var p1 = document.getElementById('i2').value;
var p2 = document.getElementById('i3').value;
if(p1 != p2){
alert("Password are not matching!!");
return false;
}
else if(p1 == '' || p2 == '')
{
alert("Passwords cannot be Empty");
return false;
}
else{
alert("Welcome !!");
}
}
function HaS(){
document.querySelector('#sh i').style.display='block';
}
var s = document.getElementById('show');
var h = document.getElementById('hide');
var i = document.getElementById('i2');
ishide = true;
let showpw = () =>{
ishide = false;
i.type = 'text';
s.style.display = 'none';
h.style.display = 'block';
}
let hidepw = () =>{
ishide = true;
i.type = 'password';
h.style.display = 'none';
s.style.display = 'block';
}
s.addEventListener("click",function(){
ishide ? showpw() : hidepw();
});
h.addEventListener("click",function(){
ishide ? showpw() : hidepw();
});
</script>
</body>
</html>
OUTPUT :)
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
