├── index.js
├── index.html
└── styles.css
/index.js:
--------------------------------------------------------------------------------
1 | document.getElementById('toggle-password').addEventListener('click', function () {
2 | const passwordField = document.getElementById('password');
3 | const toggleButton = document.getElementById('toggle-password');
4 |
5 | if (passwordField.type === 'password') {
6 | passwordField.type = 'text';
7 | toggleButton.textContent = 'Hide';
8 | } else {
9 | passwordField.type = 'password';
10 | toggleButton.textContent = 'Show';
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Password Visibility Toggle
8 |
9 |
10 |
11 |
12 |
13 |
Password Visibility Toggle
14 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | font-family: Arial, sans-serif;
7 | margin: 0;
8 | padding: 0;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | background-color: #f5f5f5;
14 | }
15 |
16 | .container {
17 | background-color: white;
18 | padding: 2rem;
19 | border-radius: 8px;
20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
21 | text-align: center;
22 | }
23 |
24 | h1 {
25 | margin-bottom: 1rem;
26 | }
27 |
28 | form {
29 | display: flex;
30 | flex-direction: column;
31 | align-items: center;
32 | }
33 |
34 | label {
35 | margin-bottom: 0.5rem;
36 | }
37 |
38 | input {
39 | padding: 0.5rem;
40 | margin-bottom: 1rem;
41 | border: 1px solid #ccc;
42 | border-radius: 4px;
43 | width: 100%;
44 | max-width: 300px;
45 | }
46 |
47 | button {
48 | padding: 0.5rem 1rem;
49 | background-color: #4CAF50;
50 | color: white;
51 | border: none;
52 | border-radius: 4px;
53 | cursor: pointer;
54 | }
55 |
56 | button:hover {
57 | background-color: #45a049;
58 | }
--------------------------------------------------------------------------------