Let’s create a Hide/Show Password feature using HTML, CSS, and JavaScript. This simple and useful project lets users toggle the visibility of their password input, making forms more user-friendly.
We’ll use:
- HTML to create the password input field and toggle button.
- CSS to style the form and add a clean look.
- JavaScript to switch between showing and hiding the password when the button is clicked.
Whether you’re building a login form or a sign-up page, this feature is a great way to improve usability. Let’s get started and add this helpful function to your web projects! 🔐👁️
HTML :
This HTML creates a simple password input layout. It includes a text field for entering a password and a button to show or hide it. It links to a CSS file (style.css) for styling and a JavaScript file (script.js) to handle the show/hide functionality. The structure is clean and centered on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show/Hide Password</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="password-container">
<input type="password" id="password" placeholder="Enter password">
<button id="togglePassword" class="show-password">Show password</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS :
This CSS styles a password input section. It removes default spacing, centers everything on a dark background, and styles the password box with padding and rounded corners. The input field has a dark theme with white text, and the button is styled in blue, changing to red when hiding the password. There’s also a hover effect for the button to darken its color slightly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #252432;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.password-container {
display: flex;
gap: 10px;
align-items: center;
background: #1e1e2f;
padding: 10px;
border-radius: 8px;
}
input[type="password"],
input[type="text"] {
padding: 8px;
border: 1px solid #444;
border-radius: 4px;
background: #2c2c3c;
color: white;
outline: none;
}
button {
padding: 8px 12px;
border: none;
width: 120px;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056cc;
}
button.hide-password {
background-color: #dc3545; /* red */
}
JavaScript:
This code allows users to show or hide their password. When the button (togglePasswordButton) is clicked, it checks if the password input is hidden (type === "password"). If it is, the code changes the type to "text" to show the password and updates the button’s text and class. If the password is already visible, it hides it again and updates the button accordingly.
const togglePasswordButton = document.getElementById("togglePassword");
const passwordInput = document.getElementById("password");
togglePasswordButton.addEventListener("click", function () {
if (passwordInput.type === "password") {
passwordInput.type = "text";
togglePasswordButton.textContent = "Hide password";
togglePasswordButton.classList.remove("show-password");
togglePasswordButton.classList.add("hide-password");
} else {
passwordInput.type = "password";
togglePasswordButton.textContent = "Show password";
togglePasswordButton.classList.remove("hide-password");
togglePasswordButton.classList.add("show-password");
}
});
In conclusion, the Hide/Show Password feature using JavaScript is a quick and easy way to enhance your web forms. It improves the user experience by allowing them to view or hide their input, making password entry more convenient and error-free.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
