Show Password Eye Icon Html | Password Eye Icon Html Css Javascript

Show Password Eye Icon Html | Password Eye Icon Html Css Javascript

Show Password Eye Icon Html | Password Eye Icon Html Css Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Show Password Eye Icon Html. We use HTML, Css, and javascript for this Show Password Eye Icon Html. I hope you enjoy our blog so let's start with a basic HTML structure for the Show Password Eye Icon Html.

HTML Code

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <link rel="icon" href="./invisible.png" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Password Eye Mini Project</title>  
   <link  
    rel="stylesheet"  
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"  
    crossorigin="anonymous"  
   />  
   <link  
    rel="stylesheet"  
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"  
   />  
   <link rel="stylesheet" href="./style.css" />  
  </head>  
  <body>  
   <div class="container">  
    <h1>Password Eye HTML Component</h1>  
    <div class="row">  
     <div class="input-group mb-3">  
      <input  
       type="password"  
       class="form-control"  
       placeholder="Enter password"  
       aria-label="User's password"  
       aria-describedby="basic-addon2"  
      />  
      <span class="input-group-append">  
       <button type="button" class="btn btn-light">  
        <i id="password-eye" class="fa fa-eye"></i>  
       </button>  
      </span>  
     </div>  
    </div>  
   </div>  
   <script src="./app.js" type="text/javascript"></script>  
   <script  
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"  
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"  
    crossorigin="anonymous"  
   ></script>  
   <script  
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"  
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"  
    crossorigin="anonymous"  
   ></script>  
   <script  
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"  
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"  
    crossorigin="anonymous"  
   ></script>  
  </body>  
 </html>  
There is all the HTML code for the Show Password Eye Icon Html. Now, you can see an output with CSS, then we write javascript for the Show Password Eye Icon Html.
output
Show Password Eye Icon Html | Password Eye Icon Html Css Javascript

CSS code

 .container{  
      padding-top: 20vh;  
      text-align: center;  
 }  
 .container h1 {  
      margin-bottom: 10vw;  
 }  
 .container .input-group{  
      width: 35%;  
      margin-left: 33%;  
 }  
Css Updated output
Show Password Eye Icon Html | Password Eye Icon Html Css Javascript

Javascript code 

 window.onload = function(){  
      const input = document.querySelector('input');  
      const eye = document.querySelector('#password-eye');  
      const eyeBtn = eye.closest('button');  
      eyeBtn.onclick = function() {  
           if (input.type === 'password') {  
                input.type = 'text';  
                eye.classList.remove('fa-eye');  
                eye.classList.add('fa-eye-slash');  
           } else {  
                input.type = 'password';  
                eye.classList.add('fa-eye');  
                eye.classList.remove('fa-eye-slash');  
           }  
      }  
 }  
Final output
Show Password Eye Icon Html | Password Eye Icon Html Css Javascript

Show Password Eye Icon Html | Password Eye Icon Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Show Password Eye Icon Html. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Show Password Eye Icon Html using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post