Show/Hide Password With Eye Icon using HTML And JavaScript

Welcome to the Codewithrandom blog. In this blog, We learn how to create Show and Hide a Password With an Eye Icon. We use HTML, CSS, and JavaScript for this Show And Hide Password With Eye Icon. We have an input field with a password tag and an eye icon for showing or hiding passwords in the input field using JavaScript.

I hope you enjoy our blog so let's start with a basic html structure for a Show and Hide Password With an Eye Icon.

Show/hide Password Eye Icon Html Code:-

Create your html file first, then paste this code into the html head area or add the Font Awesome CDN link to it. We need font awesome CDN in order for the eye icon in input to display conceal the password.

CDN link with Link Tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

HTML Code

<div class="password-field">
<input type="password" id="fakePassword" placeholder="Enter Password" />
<span><i id="toggler"class="far fa-eye"></i></span>
</div>

Now to add the structure for our show/hide password.Using the

tag we will create the a password field and using the input tag with type as password we will create an input field for the password and using the font awesome tag we will add the eye icon for showing the password.

There is all the html code for the Show and Hide Password With Eye Icon. Now, you can see output without Css and JavaScript. then we write Css for styling and add javascript code for the show to hide the password.

CSS Code for Styling Eye Icon In Password Field:-

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
flex-direction: column;
}
body .password-field {
position: relative;
}
body .password-field input {
width: 30rem;
height: 4em;
padding: 1em;
border: 0;
border-radius: 10px;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
font-size: 1rem;
letter-spacing: 1px;
}
body .password-field input::placeholder {
color: #000;
font-weight: bold;
}
body .password-field #toggler {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

Step1: We will change the padding and margin to "zero" using the universal tag selector (*), and we will set the box size to border-box using the box-sizing property.

Now that we have selected the body element, we will set the width to "100%" of the body, the display property to "flex," the align item property to "centre," the font-color property to "white," and the display property to "flex." We will also align all of the text using these properties.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    flex-direction: column;
}

Step2: The input area will now have styling added. Using the class selector, we will choose the input field. Then, using the width and height properties, we will fix the width to "30 rem" and the height to "4 em," respectively. Additionally, we'll change the border radius to "30 px" using the border-radius property.

body .password-field input {
    width: 30rem;
    height: 4em;
    padding: 1em;
    border: 0;
    border-radius: 10px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
    font-size: 1rem;
    letter-spacing: 1px;
}

body .password-field input::placeholder {
    color: #000;
    font-weight: bold;
}

body .password-field #toggler {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

Now we have completed our Styling Of Input and eye icon. Here is our updated output HTML+ CSS.

Now add JavaScript to toggle Show and Hide Password On Click Eye Icon.

JavaScript Code For Show Password Eye Icon:-

var password = document.getElementById('fakePassword');
var toggler = document.getElementById('toggler');
showHidePassword = () => {
if (password.type == 'password') {
password.setAttribute('type', 'text');
toggler.classList.add('fa-eye-slash');
} else {
toggler.classList.remove('fa-eye-slash');
password.setAttribute('type', 'password');
}
};
toggler.addEventListener('click', showHidePassword);

It's just some basic JavaScript code. First, we use document.getelementById to take password input in javascript. Then, we use javascript code to build an if/else function that displays and hides passwords with a change in the eye icon.

Toggle between the classes, we will build a function in javascript and use the add and remove methods of the classes to either add the display or show the class or else hide it.

Now we have completed our Show and Hide Password With Eye Icon Using Html and JavaScript Code. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Comments

[Sumona Jana]

This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
Boarding schools in Bangalore