Show/Hide Password using JavaScript | Coding Torque

Hello Guys! Welcome to Coding Torque. 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 🚀.

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. QR Code Generator using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

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>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

@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;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

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"></i>`
    }
    else {
        passwordInput.setAttribute("type", "password");
        eyeBtn.innerHTML = `<i> class="fas fa-eye-slash"></i>`
    }
}

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖