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

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.

 * {  
       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.

 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