Password Show or Hide Toggle using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Toggle Button to Show or Hide Password using HTML CSS & JavaScript. Earlier I have shared a blog on how to create an Animated Login Form Design and now I'm going to create Password Show Hide Toggle Button.

Generally, Password Show or Hide Toggle lets you easily hide or show passwords via JavaScript. The logic behind it is, at first, the type of input is a password, so the characters are in the bullet format, but when you click on the toggle button or icon, then the type of input change into the text from the password and the password visible.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Password Show or Hide Toggle).

Video Tutorial of Password Show or Hide Toggle

In the video, you have seen the password toggle to show or hide the entered password and I hope you have understood the basic codes behind creating this program. As you know, I used JavaScript to change the input type into text on the icon or button click. If you're a beginner then you can also create this toggle button because it's not hard to understand the JavaScript codes.

If you like this program (Password Show or Hide Toggle) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Toggle Button in your Login & Signup Form.

Password Show or Hide Toggle [Source Codes]

To create this program (Password Show or Hide Toggle). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Password Show or Hide Toggle | CodeLab</title> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="wrapper">
      <input type="password" placeholder="Enter Password" required>
      <span class="show-btn"><i class="fas fa-eye"></i></span>
    </div>
<script>
      const passField = document.querySelector("input");
      const showBtn = document.querySelector("span i");
      showBtn.onclick = (()=>{
        if(passField.type === "password"){
          passField.type = "text";
          showBtn.classList.add("hide-btn");
        }else{
          passField.type = "password";
          showBtn.classList.remove("hide-btn");
        }
      });
    </script>

  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #8e44ad;
}
.wrapper{
  position: relative;
  height: 55px;
  width: 320px;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
.wrapper input{
  width: 100%;
  height: 100%;
  border: 1px solid #8e44ad;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  border-radius: 5px;
}
.wrapper input::placeholder{
  font-size: 17px;
}
.wrapper span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #8e44ad;
  cursor: pointer;
  display: none;
}
.wrapper input:valid ~ span{
  display: block;
}
.wrapper span i.hide-btn::before{
  content: "\f070";
}

Video Tutorial of Password Show or Hide Toggle

You might like this:

Password Show or Hide Toggle [Source Codes]

Thanks for visiting, Keep visiting.

Post a Comment

Post a Comment

About Us

Contact Form