show and hide password | show and hide password using HTML CSS JavaScript – Code With Random










show and hide password | show and hide password using html css javascript - codewithrandom





Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a show and hide password. We use HTML, Css, and javascript for this show and hide passwords. Hope you enjoy our blog so let’s start with a basic HTML structure for a  show and hide password. 

font awesome cdn

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  

HTML code

   <div class="password-field">  
<input type="password" id="fakePassword" placeholder="Enter Password" />
<span><i id="toggler"class="far fa-eye"></i></span>
</div>

There is all HTML code for the show and hide the password. Now, you can see output without CSS, then we write css & javascript for the show and hide password.

output
 * {  
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
flex-direction: column;
}
body .password-field {
position: relative;
}
body .password-field input {
width: 30rem;
height: 4em;
padding: 1em;
border: 0;
border-radius: 10px;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
font-size: 1rem;
letter-spacing: 1px;
}
body .password-field input::placeholder {
color: #000;
font-weight: bold;
}
body .password-field #toggler {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

Now we have completed our CSS section,  Here is our updated output CSS.

output 

show and hide password | show and hide password using html css javascript - codewithrandom

show and hide password | show and hide password using html css javascript - codewithrandom

Now add javascript for toggle show and hide password.

Javascript code

 var password = document.getElementById('fakePassword');  
var toggler = document.getElementById('toggler');
showHidePassword = () => {
if (password.type == 'password') {
password.setAttribute('type', 'text');
toggler.classList.add('fa-eye-slash');
} else {
toggler.classList.remove('fa-eye-slash');
password.setAttribute('type', 'password');
}
};
toggler.addEventListener('click', showHidePassword);

Final output

show and hide password | show and hide password using html css javascript - codewithrandom

show and hide password | show and hide password using html css javascript - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the show and hide password . you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
Share on:

Leave a Comment