codemediaweb.com

Code Media

hire me

Show Hide Password Using JavaScript

by
Show Hide Password Using JavaScript

In this article, you will learn how to create Show Hide Password using JavaScript. JavaScript Show Hide Password is a great project that is used a lot. This type of design is basically what we see when logging in or registering on different types of websites. 

When the password is input, the password is displayed in dot form. But this type of project (javascript hide password in the source) will help you see your password. There is an icon that you can click on to see the dot shapes.

This type of design is used in almost all websites. You can easily add javascript hide password in a login form. To build it you need to have a basic idea about HTML CSS JavaScript.

Show Hide Password JavaScript

I have shared the complete tutorial below on how you can create this JavaScript Show Hide Password Input. First I created an input box using HTML. You can input anything in that box. 

Here I have taken the help of input type ‘password’. As a result, what you input will be available in dot form. I have added an icon on the right side here. If you click on that icon, these dots will be converted into text.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo above has helped you to know how this design works. You can easily add it to your project. 

Below is the complete tutorial on how I created this project (Hide / Show Password using Eye icon). For this, you create an HTML and CSS file then follow the steps below.

Step 1: Basic structure of Show Hide Password

Using the following HTML and CSS codes I have created a box at the top of the web page. You can input everything in this box. But this box is now just a background. Later I implemented it to input using the input function.

 The height of the box is 55 px and the width is 320px. I used white as the background color and the box-shadow helped to enhance the beauty.

<div class=”wrapper”>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ‘Poppins’, sans-serif;
}
body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #066ad4;
}
.wrapper{
  position: relative;
  height: 55px;
  width: 320px;
  margin:150px auto;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
Basic structure of Show Hide Password

Step 2: Create a place to input the password

Now I have created a place to input the password using input. As a result, when you type something, it will be converted to dot form. Here the size of the input is kept equal to the box i.e. the input can be done in the entire space of the box.

<input type=”password” placeholder=”Enter Password” required>
.wrapper input{
  width: 100%;
  height: 100%;
  border: none;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  border-radius: 5px;
}
.wrapper input::placeholder{
  font-size: 17px;
}
Create a place to input the password

Step 3: Add an icon to hide the password

 Now I have added an icon that will help to see and hide the password.

<span class=”show-btn”><i class=”fas fa-eye”></i></span>
.wrapper span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #0a2d5f;
  cursor: pointer;
  display: block;
}

Here I have given some CSS code using ‘before’. This icon will change when you click on the eye icon. Although I later took the help of JavaScript to make it work.

.wrapper span i.hide-btn::before{
  content: “\f070”;
}
Add an icon to hide the password

Step 4: Activate Show Hide Password with JavaScript

Above we have basically designed it (Toggle Password Visibility Using Javascript). Now is the time to implement it with the help of JavaScript. I have given a complete explanation here which will help you to understand step by step how it worked.

Using JavaScript below, I set a constant of icons and place IDs to input. We cannot use any HTML directly in JavaScript.

 const passField = document.querySelector(“input”);
 const showBtn = document.querySelector(“span i”);

I made this password visible and the hidden system functional using OnClick. I have given a condition using the if function.

      ➤ When you click on the icon, if the input is a password, it will be converted to text and the icon will change with it.

      ➤ To change the icon I have already been instructed to change the icon in the tags called ‘Hidden Button’ using CSS code.

Then by adding else I added the second condition that

      ➤ If the above conditions do not apply then the password will remain in the dot and the new icon will be removed. The old icon can be seen instead.

showBtn.onclick = (()=>{
  if(passField.type === “password”){
      passField.type = “text”;
      showBtn.classList.add(“hide-btn”);
   }else{
      passField.type = “password”;
      showBtn.classList.remove(“hide-btn”);
     }
 });
Show Hide Password

If you know basic JavaScript you can easily understand this. Hopefully from the tutorial above you have learned how to create this Show Hide Password system using JavaScript.

Be sure to comment on how you like the article. You can download the source code required to create this project (password show hide program using eye icon) from the download button below.

Leave a comment