Show Password With Eye Icon HTML and JavaScript
Greetings and welcome to the Codewithrandom blog. This article will show you how to create the Show Password With Eye Icon. HTML, CSS, and JavaScript were used to create this Show Password With Eye Icon. The function that provides a feature inside the project that aids in efficient user interaction on the website is created using the display password function.
.png "Show Password Eye Icon Html | Password Eye Icon Html Css Javascript")
In this article, we will add the font-awesome icon for the eye inside our password field and use that icon as the show and conceal password. The “show/hide password” function gives a user confidence that the password they have entered is correct or incorrect.
50+ HTML, CSS & JavaScript Projects With Source Code
I hope you enjoy our blog so let’s start with a basic HTML Structure for the Show Password With Eye Icon.
HTML Code For Show Password With Eye Icon
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="icon" href="./invisible.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Password Eye Mini Project</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="container"> <h1>Password Eye HTML Component</h1> <div class="row"> <div class="input-group mb-3"> <input type="password" class="form-control" placeholder="Enter password" aria-label="User's password" aria-describedby="basic-addon2" /> <span class="input-group-append"> <button type="button" class="btn btn-light"> <i id="password-eye" class="fa fa-eye"></i> </button> </span> </div> </div> </div> <script src="./app.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> </body> </html>
We’ll use the form element to create a form for the structure of our password, and inside the form tag, we’ll create an input for the password using the “password” input type. the place where the user can enter their passcode. Additionally, we used a few Bootstrap classes, so we also have to import a few links into the HTML’s header area.
The entire HTML code for the “Show Password With Eye Symbol” can be found here. You can now view results without JavaScript or CSS. Then, for Show Password With Eye Icon, we create JavaScript for the primary functionality and CSS for styling.
Restaurant Website Using HTML and CSS
Only Html Code Output
CSS Code For Show Password With Eye Icon
.container{
padding-top: 20vh;
text-align: center;
}
.container h1 {
margin-bottom: 10vw;
}
.container .input-group{
width: 35%;
margin-left: 33%;
}As we have used bootstrap inside our project, most of the styling of our project is done with the help of bootstrap classes. Inside the bootstrap classes, we will align the password icon with the password input box.
Animated Login Form Using HTML and CSS (Source Code)
Step 1:The text will be aligned to the center of the website using the text-align property and the class identifier (.container), as well as the padding-top and text-align properties.
.container {
padding-top: 20vh;
text-align: center;
}
Step2:We’ll add a bottom margin of 10 vw using the parent-child class selector (.container h1), pick the input text, and set the width to 35%. Additionally, we’ll include a 33% left border.
.container h1 {
margin-bottom: 10vw;
}
.container .input-group {
width: 35%;
margin-left: 33%;
}CSS output:
Portfolio Website using HTML and CSS (Source Code)
Html + Css Updated Output
JavaScript Code For Show Password With Eye Icon
window.onload = function(){
const input = document.querySelector('input');
const eye = document.querySelector('#password-eye');
const eyeBtn = eye.closest('button');
eyeBtn.onclick = function() {
if (input.type === 'password') {
input.type = 'text';
eye.classList.remove('fa-eye');
eye.classList.add('fa-eye-slash');
} else {
input.type = 'password';
eye.classList.add('fa-eye');
eye.classList.remove('fa-eye-slash');
}
}
}Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
To enable the password show and hide functionality, use Javascript. We’ll build a window-based algorithm. The HTML components within the function can be chosen by loading and using the document. We will select HTML components using queryselector() and eryselector() and store their values in an ant variable. As soon as the user clicks on the button and icon button with the text value, we will make a onclick event, check the password, and add a remove icon class to reveal and conceal the password.
Video Output:
Final Output Of Show Password With Eye Icon
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Now that we have completed our Show Password With Eye Icon. Here is our updated output with JavaScript. Hope you like the Show Password With Eye Icon. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
ADVERTISEMENT
Thank you!
ADVERTISEMENT
In this post, we learn how to create Show Password With Eye Icon HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
ADVERTISEMENT
Written by – Code With Random/Anki
ADVERTISEMENT
Code by – Dm For Credit
