DEV Community

Cover image for Show or Hide Password using JavaScript
Piyush | Coding Torque
Piyush | Coding Torque

Posted on • Originally published at codingtorque.com

Show or Hide Password using JavaScript

Hello Guys! In this blog, I'm going to explain to you how to make a Show or Hide Password input field using JavaScript. You can use this project in your login page of your website. This will be a step-by-step guide including HTML and CSS. Let's get started πŸš€.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
Enter fullscreen mode Exit fullscreen mode

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

In the below HTML code, we have a wrapper div with the class "wrapper". Inside that, we have an input field of type password and a button to toggle the type of password i.e. show or hide. We have an onclick attribute on the button to invoke the changeType() function whenever clicked on the button.

<div class="wrapper">
    <input type="password" id="password">
    <button id="eyeBtn" onclick="changeType()"><i> class="fas fa-eye-slash"></i></button>
</div>
Enter fullscreen mode Exit fullscreen mode

Here is the final HTML code

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- font-awesome icons css  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Show or Hide Password using Javascript - @codescientist x @codingtorque</title>
</head>

<body>
    <div class="wrapper">
        <input type="password" id="password">
        <button id="eyeBtn" onclick="changeType()"><i> class="fas fa-eye-slash"></i></button>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Output Till Now

HTML output of show-hide password

Let's understand CSS part

In the below CSS code.

  1. We declare a * selectors for the font Poppins that we have imported in our head tag.
  2. Next we have the wrapper class which uses flex property to align elements in a div.
@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10rem 30rem;
    width: 250px;
    height: 40px;
    border: 2px solid;
    border-radius: 20px;
    overflow: hidden;
}

.wrapper input {
    height: 100%;
    width: 85%;
    border: none;
    padding: 5px 10px;
    outline: none;
}

.wrapper button {
    height: 100%;
    width: 15%;
    border: none;
    cursor: pointer;
}  
Enter fullscreen mode Exit fullscreen mode

Output Till Now

CSS output of show-hide password

Finally a JavaScript part

In the below javascript code, we have changeType() function to toggle the input type.
In changeType() function, we have declared passwordInput and eyeBtn variables which contain password and button elements. Next, we have created a conditional statement that checks the type of input field and switches the types respectively.

function changeType() {
    const passwordInput = document.getElementById("password");
    const eyeBtn = document.getElementById("eyeBtn");

    if (passwordInput.getAttribute("type") === "password") {
        passwordInput.setAttribute("type", "text");
        eyeBtn.innerHTML = `<i> class="fas fa-eye-slash"></i>`
    }
    else {
        passwordInput.setAttribute("type", "password");
        eyeBtn.innerHTML = `<i> class="fas fa-eye"></i>`
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)