Show/Hide Password Toggle in Javascript

Hello readers, Today in this blog you’ll learn how to create a show/hide password toggle in Javascript. Earlier, you learned to create a contact us page using HTML & CSS with cool animations. I have also created a blog on other cool stuff about web designing.

Password toggle is used to either show or hides the password entered by the user in the input field. If a user wants to see the password s/he entered, then they click the toggle button and they can easily see their password. So, for ease of the user, we have to create the toggle button. So today I am going to show you how you can create a password toggle button in Javascript.

At first, I created a container div with full width and height of 100 viewport height(vh) and inside that container, I created a form and inside the form, there is an input field of the type ‘password’. As a toggle button, I have used an eye icon from the font awesome. In that <i> tag, I have included onclick event to show the password if the user clicks it. Now you have to change the input type from password to text and vice versa using javascript if the user clicks the icon.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Password show/hide toggle in Javascript).

Video Tutorial of Show/Hide Password Toggle in Javascript

All this page design is based on CSS and the password toggle is based on Javascript. If you’re a beginner you can also create this type of password show/hide toggle. If you like this program (Password show/hide toggle in Javascript) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Password show/hide toggle in Javascript [Source Codes]

To create this program (Password show/hide toggle in Javascript). First, you need to create three files one HTML file, one CSS file, and one Javascript file. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.

HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <title>Password Toogle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form action="">
            <input type="password" id="pass" placeholder="Password">
            <span><i class="fas fa-eye" onclick="show_pass()"></i></span>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #02243f;
}
.container form{
    display: flex;
    align-items: center;
}
.container form input{
    padding: 15px 5px;
    width: 300px;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 18px;
    padding-right: 40px;
}
.container form input:focus{
    border: 1px solid #01faed;
    box-shadow: 0px 0px 10px #01faed;
}
.container form span i{
    font-size: 25px;
    margin-left: -35px;
    color: #666;
    cursor: pointer;
}
.container form span i:active{
    color: #000;
}

At last, create a Javascript file with the name script.js and paste the given code into your Javascript file. Note it, you’ve to create a file with a .js extension.

Javascript

  var x = document.getElementById('pass');

function show_pass(){
    if(x.type === "password"){
        x.type = "text";
    }else{
        x.type = "password";
    }
}

Note: you can use this Javascript code internally in your HTML file just before the </body> tag.

That’s all, now you’ve successfully created a password show/hide toggle in Javascript. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

You Might Also Like

Video Tutorial of Show/Hide Password Toggle in Javascript

Password show/hide toggle in Javascript [Source Codes]

HTML

CSS

Javascript

Post a Comment

Post a Comment

About Us

Contact Form