Show/Hide Password Feature Using JavaScript

One of the best ways to sharpen your web development skills is to test small user interfaces. In this tutorial we will create show/hide password functionality using HTML, CSS and Javascript. This is a practical feature often seen in login or registration forms that allows users to toggle the visibility of their password.

Today's tutorial will be short, yet it helps you practice working hands on with handling form input events.

Why is Show/Hide Password Feature Useful?

It is usually hidden by default (shown by an stars) when users type their password into a form. But when the user wants to check whether they have typed the password correctly, the small icon button next to the input will click.

Below is a live demo that will help you understand how the Show/Hide password icon works.

Live demo:

HTML

CSS

JS

Result

HTML

At the beginning of the HTML code we will set up fontawesome. This is an icon library, with the help of which we used the "fa-eye" icon. You can see how to use Fontawesome version 4 here. So let's add the following code to your HTML to link. If you don't know how to make an HTML project folder, see here.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

We will create an HTML div element with the class "wrapper" which will be a container for our password input. Inside this container we will add an input field where users can type their password. This input type is set to password so that the characters will appear as dots or stars by default. Next to the input we will add a span element with the class "toggle-password". And inside this span we have created an icon element (i tag) using fontawesome with the class "fa fa-eye-slash". Clicking on this icon will instruct javascript to show or hide the password.

<div class="wrapper">
    <input type="password" placeholder="Enter your password" required="">
    <span class="toggle-password"><i class="fa fa-eye-slash" aria-hidden="true"></i></span>
</div>

Stylesheet (CSS):

Centering the wrapper:

We are setting up the basic styling for the document body. First we use flexbox to center the content vertically and horizontally by applying display, justify-content and align-items. Then the height is set to 100vh so that the content is always in the middle of the screen. We set the background color to a nice blue (hex code #50a8ff) to give it a bright look. Finally the font family is set to Arial for a simple style.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #50a8ff;
    font-family: 'Arial', sans-serif;
}

Styling the input box:

In the next section of CSS we style the "wrapper" that holds the input and toggle icons. We set its position to relative and set its width to 300px so that it centered.

The "toggle-password" span is placed on the far right inside the wrapper and centered vertically next to the input field. We use cursor CSS propriety to make it clear that it's clickable and to set a readable color and size for the icon.

.wrapper {
    position: relative;
    width: 300px;
}

.wrapper input {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.wrapper .toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #333;
    font-size: 18px;
}

Javascript:

Here we are adding a simple activity to show or hide the password. We first select the input field inside the "wrapper" and the eye icon inside the "toggle-password" using document.querySelector. Then we set up an event listener on the icon so that when it is clicked, the input field type toggles between "password" and "text". If the field is currently of type “password” clicking on the icon will change the input type to “text” and the typed characters will be visible.

const passwordField = document.querySelector('.wrapper input');
const toggleBtn = document.querySelector('.toggle-password i');

toggleBtn.addEventListener('click', () => {
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleBtn.classList.add('fa-eye');
        toggleBtn.classList.remove('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        toggleBtn.classList.remove('fa-eye');
        toggleBtn.classList.add('fa-eye-slash');

    }
});

At the same time the icon changes from an eye-slash (class name fa-eye-slash) to a regular eye (class name fa-eye). Clicking again hides the password and resets the original icon.

This short tutorial will help you learn key front-end development skills:
• How to select HTML elements using querySelector().
• How to handle user interactions with event listeners such as clicks.
• How to change properties dynamically.
• How to place elements beautifully using simple CSS techniques.
• Once you understand this basic setup, you can add more to it, like smooth animations, elegant transitions etc.

You can watch another Random Password Generator tutorial like this, stay well, keep coding, and see you in the next tutorial. Baibai programmer!.