Hey guys, recently, I’ve made project namley Show and Hide Password in JavaScript. It’s very helpful project, hope you’ve seen this type of features in the largest websites / web applications. So, I’m going to teach with you how you can do that.
In web development, it is common for users to create accounts with a username and password. However, there are times when users may want to check the password they are entering to ensure that they have typed it correctly. For this reason, many web developers implement a feature that allows users to show and hide passwords.
In this article, we will explore how to create a show and hide password in JavaScript. We will start by explaining what the show and hide password feature is and why it is important. Then, we will dive into the technical details of how to implement this feature using JavaScript.
What is the Show and Hide Password Feature?
The show and hide password feature is a user interface element that allows users to toggle between displaying their password in plain text or masking it with asterisks. This feature is typically implemented as an icon or button next to the password field.
The purpose of the show and hide password feature is to provide users with the ability to verify that they have entered their password correctly. Additionally, it can help prevent mistakes when entering a password, such as when a user accidentally adds a space or capitalizes a letter where it should not be.
The show and hide password feature can also improve the user experience by allowing users to easily double-check their password without having to re-enter it. This feature is particularly useful for long and complex passwords that may be difficult to enter accurately.
Show and Hide Password in JavaScript
First of all, we need to design the application, I’m goning to share with you the HTML and CSS3 codes, that are used to deisgn the page. Inside the page have a simple input field and also have eye icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Show and Hide Password in JavaScript</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
</head>
<body>
<div class="wrapper">
<div class="form_container">
<form action="#">
<div class="icons">
<i class="fa-regular fa-eye"></i>
</div>
<input type="password" placeholder="Password" class="pass" />
</form>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Inside the HTML document have a basic html tags that are used to display the input field also font awesome incons which used to display the hide the password.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #239b56;
}
.form_container input {
border: none;
padding: 1.2rem 1rem;
width: 500px;
outline: none;
border-radius: 4px;
font-size: 1.2rem;
}
.form_container .icons {
position: absolute;
}
.form_container .icons i {
position: relative;
left: 440px;
top: 18px;
font-size: 2rem;
cursor: pointer;
}
this is CSS file you must be use to design the whole page. Once you used above mentioned codes such as HTML and CSS, then you will able to use JavaScript.
Implementing the Show and Hide Password Feature in JavaScript
Implementing the show and hide password feature in JavaScript is relatively straight forward. There are two main steps involved: first, adding an event listener to the show/hide password button, and second, toggling the password field between plain text and masked text.
const btn = document.querySelector(".fa-eye");
const passwordEl = document.querySelector(".pass");
btn.addEventListener("click", () => {
if (passwordEl.type === "password") {
passwordEl.type = "text";
btn.classList.replace("fa-eye", "fa-eye-slash");
console.log(btn);
} else {
passwordEl.type = "password";
btn.classList.replace("fa-eye-slash", "fa-eye");
console.log(btn);
}
});
That’s for the show and hide password in JavaScript, you need to follow on above mentioned codes. hope you will understand everything as you want
Show Password Eye Icon HTML and JavaScript
I’ve made the tutorial Show Password Eye Icon HTML and JavaScript, you can watch the complet tutorial, then hope you will understand better than the above mentioned codes.
You May Also Like:
- How to Make Responsive Navbar in HTML CSS
- Responsive Login and Registration Form in HTML and CSS
- How to Create a Coming Soon Website in HTML CSS and JavaScript
- How to Make a Portfolio Website Using HTML and CSS
- How to Make Password Generator in JavaScript
Conclusion
this tutorial all about show and hide password in JavaScript, I’ve shared the source code and also video tutorial, hope you’ve learned many new things from the tutorial. If you face any problem you can leave comment, I will be happy to give you a response as soon as possible. Thanks for visiting and watching the tutorial.
