DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Password show/hide button using vanilla JS

#webdev #javascript #html #css

Hello Everyone, I'm back after a long time.
In this post we are going t create a simple password show/hide button using HTML,CSS and JS.
Incase you're not able to understand what we're going to create then check out this video

HTML:

We create an input field of type="password" to Enter the password in it and for creating eye icon we use font awesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<input type="password" placeholder="Enter Your Password" id="pass">
<button id="btn"><i id="icon"class="fa-solid fa-eye"></i></button>
Enter fullscreen mode Exit fullscreen mode

CSS:

For styling, you are free to style the way you want.

JavaScript

We add an event listener to showbtn and onclick it call a function. For that we already set count= 1 and on click we increment count by 1
count += 1
Now we use if-else statement

if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
Enter fullscreen mode Exit fullscreen mode

If count is divisible by 2 then we remove fa-eye class from icon and add fa-eye-slash class to it and remove the type attribute from pass to make the password visible.

Else (count is not divisible by 2 ) then we remove fa-eye-slash class from icon and add fa-eye class to it and add attribute of type password pass to hide the password.

The complete JS code is given below

let inpPassword = document.getElementById("pass");
let showbtn = document.getElementById("btn");
let icon = document.getElementById("icon");

let count = 1;
showbtn.addEventListener("click", function() {
  count += 1;

  if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");


  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
});
Enter fullscreen mode Exit fullscreen mode

As I'm writing this post after a long time, maybe this post is not up to that level. I'm sorry for that.

Hope you like this tutorial.

Top comments (4)

Collapse
 
frankwisniewski profile image
Frank Wisniewski • • Edited

what a hassle for such a small story...

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Input Password</title>
  <style>
    input[type="password"]~span{
      user-select:none;
      cursor:pointer;
    }
   .opa{ opacity:0.5; }
  </style>
<label>Pass:
  <input type=password placeholder="Enter Your Password" /> 
  <span>👁</span> <!--UTF-8 (U+1F441) -->
</label>
  <script>
    "use strict";
    document.querySelector('input[type="password"]+span')
      .addEventListener('click', function(){
        let i = this.previousElementSibling
        i.type = i.type=='password' ? 'text': 'password'
        this.classList.toggle('opa')
    })
  </script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Even using font-awesome:

document.querySelector('input[type="password"]+i')
  .addEventListener('click', function() {
  let input = this.previousElementSibling;
  input.type = input.type == 'password' ? 'text' : 'password';
  this.className = this.className == 'fa fa-eye' ? 'fa fa-eye-slash' : 'fa fa-eye';
});
Enter fullscreen mode Exit fullscreen mode

Collapse
 
devrohit0 profile image
Rohit Sharma •

It looks more clean and now I get better understanding of it.
Thanks for it

Collapse
 
frankwisniewski profile image
Frank Wisniewski • • Edited

toggle() overwrites the last assigned icon!

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Input Password</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    label{
      position:relative;
    }
    input+i{
      user-select:none;
      cursor:pointer;
      position:absolute;
      right:3px;
      top:2px;
    }
  </style>
<label>Pass:
  <input type=password placeholder="Enter Your Password" /> 
  <i class="fa fa-eye"></i>
</label>
  <script>
    "use strict";
    document.querySelector('input[type="password"]+i')
      .addEventListener('click', function(){
      let i = this.previousElementSibling
      i.type = i.type=='password' ? 'text': 'password'
      this.classList.toggle('fa-eye-slash' )
    })
  </script>
Enter fullscreen mode Exit fullscreen mode

Read next

okoye_ndidiamaka_5e3b7d30 profile image

Virtual Reality in Web Development: Crafting Immersive Experiences with WebVR

Okoye Ndidiamaka -

sharathchandark profile image

Build an Advanced Image Editor with HTML, CSS & JavaScript - Filters, Cropping, and More

sharathchandark -

angstitc profile image

Angular 19: Die neue ResourceAPI

angular-freelancer.de -

l_walid profile image

Real-Time Location Tracking with Laravel and Pulsetracker's Redis Pub/Sub

Walid LAGGOUNE -