Skip to content

Commit 304bda7

Browse files
SMD-1SMD-1
committed
Make show hide password
1 parent 8d90e14 commit 304bda7

File tree

3 files changed

+95
-0
lines changed

3 files changed

+95
-0
lines changed

‎ShowHidePassword/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
<link
7+
rel="stylesheet"
8+
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
9+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
10+
crossorigin="anonymous"
11+
/>
12+
<title>Show Hide Password</title>
13+
<link rel="stylesheet" href="./style.css" />
14+
</head>
15+
<body>
16+
<div class="inputBox">
17+
<input id="password" type="password" placeholder="Enter your password" />
18+
<div id="toggle">
19+
<i
20+
id="icon"
21+
class="fas fa-eye-slash fa-2x"
22+
onclick="showHide();"
23+
style="padding: 5px"
24+
></i>
25+
</div>
26+
</div>
27+
28+
<script src="./script.js"></script>
29+
</body>
30+
</html>

‎ShowHidePassword/script.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const password = document.getElementById("password");
2+
const toggle = document.getElementById("toggle");
3+
const icon = document.getElementById("icon");
4+
function showHide() {
5+
if (password.type === "password") {
6+
password.setAttribute("type", "text");
7+
toggle.classList.remove("hide");
8+
icon.classList.remove("fa-eye-slash");
9+
icon.classList.add("fa-eye");
10+
} else {
11+
password.setAttribute("type", "password");
12+
toggle.classList.add("hide");
13+
icon.classList.add("fa-eye-slash");
14+
}
15+
}

‎ShowHidePassword/style.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
body {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 100vh;
10+
background: #f8f8f8;
11+
}
12+
.inputBox {
13+
position: relative;
14+
width: 400px;
15+
height: 60px;
16+
}
17+
.inputBox input {
18+
position: absolute;
19+
top: 0;
20+
left: 0;
21+
width: 100%;
22+
height: 100%;
23+
font-size: 25px;
24+
padding: 15px;
25+
outline: none;
26+
border: none;
27+
border-radius: 8px;
28+
background: transparent;
29+
box-sizing: border-box;
30+
box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
31+
inset 4px 4px 10px rgba(0, 0, 0, 0.05),
32+
inset -4px -4px 10px rgba(255, 255, 255, 1),
33+
4px 4px 10px rgba(0, 0, 0, 0.05);
34+
}
35+
.inputBox input::placeholder {
36+
color: rgb(146, 140, 140);
37+
}
38+
#toggle {
39+
position: absolute;
40+
top: 10px;
41+
right: 10px;
42+
width: 45px;
43+
height: 30px;
44+
background-size: cover;
45+
padding: 5px;
46+
cursor: pointer;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
}

0 commit comments

Comments
 (0)