Show Password With Eye Icon HTML,CSS, and JavaScript

Show Password With Eye Icon HTML,CSS, and JavaScript

Show Password With Eye Icon HTML,CSS, and JavaScript
Show Password With Eye Icon HTML,CSS, and JavaScript

 

Welcome to the Codewithrandom blog. In this blog, we learn how to create the Show Password With Eye Icon. We use HTML, CSS, and JavaScript for this Show Password With Eye Icon.

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

Table of Contents

<!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>

There is all the Html code for the Show Password With Eye Icon. Now, you can see output without Css and JavaScript. then we write Css for styling and Add JavaScript for the main functionality in Show Password With Eye Icon.

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

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');
}
}
}

Final Output Of Show Password With Eye Icon

 

 

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

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.

Thank you!

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.

Written by – Code With Random/Anki 

Code by – Dm For Credit

Leave a Reply