Skip to content

Commit 4905c7f

Browse files
Sbiswas001Sbiswas001
authored
Merge pull request #39 from AyushMonga/show_and-_hide_password
func added: created hide and show password app
2 parents 5b02b09 + 6c5feb9 commit 4905c7f

File tree

4 files changed

+138
-0
lines changed

4 files changed

+138
-0
lines changed

‎root/password-visibility-toggle/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Password Visibility Toggle
2+
3+
This project is a simple web application that allows users to toggle the visibility of their password input. It provides a user-friendly interface with a password input field and a button to show or hide the password.
4+
5+
## Features
6+
7+
- Input field for entering a password.
8+
- Button to toggle the visibility of the password.
9+
- Responsive design for a good user experience.
10+
11+
## File Structure
12+
13+
```
14+
password-visibility-toggle
15+
├── src
16+
│ ├── index.html # Main HTML document
17+
│ ├── styles
18+
│ │ └── style.css # CSS styles for the application
19+
│ └── scripts
20+
│ └── main.js # JavaScript functionality for the application
21+
└── README.md # Documentation for the project
22+
```
23+
24+
## Getting Started
25+
26+
To get started with the Password Visibility Toggle application, follow these steps:
27+
28+
1. Clone the repository to your local machine.
29+
2. Open the `index.html` file in your web browser.
30+
3. Enter a password in the input field.
31+
4. Click the "Show/Hide" button to toggle the visibility of the password.
32+
33+
## Technologies Used
34+
35+
- HTML
36+
- CSS
37+
- JavaScript
38+
39+
## License
40+
41+
This project is licensed under the MIT License.

‎root/password-visibility-toggle/src/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Password Visibility Toggle</title>
7+
<link rel="stylesheet" href="styles/style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Password Visibility Toggle</h1>
12+
<div class="input-group">
13+
<label for="password">Password:</label>
14+
<input type="password" id="password" placeholder="Enter your password">
15+
<button id="toggle-btn">Show</button>
16+
</div>
17+
</div>
18+
<script src="scripts/main.js"></script>
19+
</body>
20+
</html>

‎root/password-visibility-toggle/src/scripts/main.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
function togglePasswordVisibility() {
2+
const passwordInput = document.getElementById('password');
3+
const toggleButton = document.getElementById('toggle-btn');
4+
5+
if (passwordInput.type === 'password') {
6+
passwordInput.type = 'text';
7+
toggleButton.textContent = 'Hide Password';
8+
} else {
9+
passwordInput.type = 'password';
10+
toggleButton.textContent = 'Show Password';
11+
}
12+
}
13+
14+
document.getElementById('toggle-btn').addEventListener('click', togglePasswordVisibility);

‎root/password-visibility-toggle/src/styles/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
body {
2+
margin: 0;
3+
min-height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9+
}
10+
11+
.container {
12+
background: rgba(255, 255, 255, 0.9);
13+
padding: 2rem 3rem;
14+
border-radius: 10px;
15+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
16+
}
17+
18+
h1 {
19+
color: #2c3e50;
20+
text-align: center;
21+
margin-bottom: 2rem;
22+
}
23+
24+
.input-group {
25+
display: flex;
26+
flex-direction: column;
27+
gap: 0.5rem;
28+
}
29+
30+
label {
31+
color: #34495e;
32+
font-weight: bold;
33+
}
34+
35+
input[type="password"],
36+
input[type="text"] {
37+
padding: 0.8rem;
38+
border: 2px solid #bdc3c7;
39+
border-radius: 5px;
40+
font-size: 1rem;
41+
transition: border-color 0.3s ease;
42+
}
43+
44+
input[type="password"]:focus,
45+
input[type="text"]:focus {
46+
outline: none;
47+
border-color: #4ecdc4;
48+
}
49+
50+
#toggle-btn {
51+
background-color: #4ecdc4;
52+
color: white;
53+
border: none;
54+
padding: 0.8rem 1.5rem;
55+
border-radius: 5px;
56+
cursor: pointer;
57+
font-weight: bold;
58+
transition: background-color 0.3s ease;
59+
}
60+
61+
#toggle-btn:hover {
62+
background-color: #45b7af;
63+
}

0 commit comments

Comments
 (0)