In this step-by-step YouTube tutorial, you'll learn how to create a user-friendly Show/Hide Password feature using the power of HTML, CSS, and JavaScript. Whether you're a web developer looking to enhance your user interface or a beginner eager to improve your coding skills, this video will guide you through the entire process.
1.Create a New Folder
2.Open the Folder in Vs Code
3.Create index.html and style.css Files
4.Create Img Folder and download close eye and open eye pictures to Img folder
5.Begin Coding
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Show Hide Password</title>
</head>
<body>
<div class="input-box">
<input type="password" placeholder="Password" id="password">
<img src="Img/close-eye.png" id="eyeicon">
</div>
<script>
let eyeicon = document.getElementById("eyeicon");
let password = document.getElementById("password");
eyeicon.onclick = function(){
if(password.type == "password"){
password.type = "text";
eyeicon.src = "Img/open-eye.png"
}else{
password.type = "password";
eyeicon.src = "Img/close-eye.png"
}
}
</script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body{
background-color: beige;
}
.input-box{
background-color: #fff;
width: 90%;
max-width: 500px;
border-radius: 5px;
padding: 10px 20px ;
margin: 300px auto;
display: flex;
align-items: center;
}
.input-box input{
width: 100%;
padding: 10px 0;
border:0 ;
outline:0;
font-size: 24px;
color: black;
}
.input-box img{
width:35px ;
cursor: pointer;
}
Comments
Post a Comment