Show and Hide Password With Eye Icon using HTML & JavaScript

Show/Hide Password Eye Icon With HTML And JavaScript

Hello Coder,Welcome to the Codewithrandom blog. In this blog, We learn how to create Show Hide a Password With an Eye Icon with Html Code. 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.

Before we start with our project, we need to understand some of the general concepts of show/hide passwords.

What is a Show/Hide Password?

A show and hide password is a javascript feature that helps users keep their privacy by adding toggle icons that add and remove the password class to display and hide passwords. This helps in maintaining user privacy in public and keeping the data safe.

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Show Password In Html With Eye Icon:-

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" />

Show/hide Password Eye Icon 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 <div> 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.

Restaurant Website Using HTML and CSS

Output:-

 

Show Password In Html With Eye Icon
Show Password In Html With Eye Icon

 

CSS Code:-

* {
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.

Portfolio Website using HTML and CSS (Source Code)

HTML+ CSS Code Output:-

Show/hide Password Eye Icon Html
Show/hide Password Eye Icon Html

 

ADVERTISEMENT

Show/hide Password Eye Icon Html
Show/hide Password Eye Icon Html

 

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

10+ HTML CSS Projects For Beginners (Source Code)

Final Output Of  Show/Hide Password Eye Icon With HTML And JavaScript:-

Live Preview Of Show and Hide Password Eye Icon:-

 

 

Show/hide Password Eye Icon Html
Show/hide Password Eye Icon Html

 

Show/hide Password Eye Icon Html
Show/hide Password Eye Icon Html
 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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 

FAQ For Show/Hide Password Eye Icon:-

What is the purpose of show/hide password?

The main purpose of show and hide password is toggle between the plain task and asterisk sign . Show password helps user to check whether the input password is correct or not.

Is it safe to use Show password?

Show password is totally secure. It is an added function that enables users to verify whether or not the password they have entered is accurate.

What is a Show/Hide Password?

A show and hide password is a javascript feature that helps users keep their privacy by adding toggle icons that add and remove the password class to display and hide passwords. This helps in maintaining user privacy in public and keeping the data safe



Leave a Reply