Skip to content

Commit f56897f

Browse files
solygambassolygambas
committed
feat: day 87
1 parent ccceb95 commit f56897f

File tree

3 files changed

+175
-47
lines changed

3 files changed

+175
-47
lines changed

‎087-sliding signin signup form/index.html

Lines changed: 105 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -17,47 +17,124 @@
1717
</head>
1818
<body>
1919
<div class="container" id="container">
20-
<div class="form-container sign-up-container">
20+
<!-- Improve Accessibility with ARIA -->
21+
<div
22+
class="form-container sign-up-container"
23+
id="sign-up-container"
24+
aria-hidden="false"
25+
>
2126
<form>
22-
<h1>Sign Up</h1>
23-
<div class="social-container">
24-
<a href="#" class="social"><i class="fab fa-instagram"></i></a>
25-
<a href="#" class="social"><i class="fab fa-google"></i></a>
26-
<a href="#" class="social"><i class="fab fa-tiktok"></i></a>
27+
<!-- Refactor CSS with BEM -->
28+
<h1 class="form-container__title">Sign Up</h1>
29+
<div class="form-container__social-container">
30+
<a href="#" class="form-container__social"
31+
><i class="fab fa-instagram"></i
32+
></a>
33+
<a href="#" class="form-container__social"
34+
><i class="fab fa-google"></i
35+
></a>
36+
<a href="#" class="form-container__social"
37+
><i class="fab fa-tiktok"></i
38+
></a>
2739
</div>
28-
<span>or use your email for registration</span>
29-
<input type="text" placeholder="Name" />
30-
<input type="email" placeholder="Email" />
31-
<input type="password" placeholder="Password" />
32-
<button onclick="return false;">Sign Up</button>
40+
<span class="form-container__text"
41+
>or use your email for registration</span
42+
>
43+
<!-- Add Form Validation -->
44+
<input
45+
type="text"
46+
placeholder="Name"
47+
required
48+
class="form-container__input"
49+
/>
50+
<input
51+
type="email"
52+
placeholder="Email"
53+
required
54+
class="form-container__input"
55+
/>
56+
<!-- Implement Password Visibility Toggle -->
57+
<div class="form-container__input-group">
58+
<input
59+
type="password"
60+
placeholder="Password"
61+
required
62+
class="form-container__input"
63+
/>
64+
<span class="form-container__toggle-password">
65+
<i class="far fa-eye"></i>
66+
</span>
67+
</div>
68+
<button class="form-container__button">Sign Up</button>
3369
</form>
3470
</div>
35-
<div class="form-container sign-in-container">
71+
<div
72+
class="form-container sign-in-container"
73+
id="sign-in-container"
74+
aria-hidden="true"
75+
>
3676
<form>
37-
<h1>Sign In</h1>
38-
<div class="social-container">
39-
<a href="#" class="social"><i class="fab fa-instagram"></i></a>
40-
<a href="#" class="social"><i class="fab fa-google"></i></a>
41-
<a href="#" class="social"><i class="fab fa-tiktok"></i></a>
77+
<h1 class="form-container__title">Sign In</h1>
78+
<div class="form-container__social-container">
79+
<a href="#" class="form-container__social"
80+
><i class="fab fa-instagram"></i
81+
></a>
82+
<a href="#" class="form-container__social"
83+
><i class="fab fa-google"></i
84+
></a>
85+
<a href="#" class="form-container__social"
86+
><i class="fab fa-tiktok"></i
87+
></a>
88+
</div>
89+
<span class="form-container__text">or use your account</span>
90+
<input
91+
type="email"
92+
placeholder="Email"
93+
required
94+
class="form-container__input"
95+
/>
96+
<div class="form-container__input-group">
97+
<input
98+
type="password"
99+
placeholder="Password"
100+
required
101+
class="form-container__input"
102+
/>
103+
<span class="form-container__toggle-password">
104+
<i class="far fa-eye"></i>
105+
</span>
42106
</div>
43-
<span>or use your account</span>
44-
<input type="email" placeholder="Email" />
45-
<input type="password" placeholder="Password" />
46-
<a href="#">Forgot your password?</a>
47-
<button onclick="return false;">Sign In</button>
107+
<a href="#" class="form-container__link">Forgot your password?</a>
108+
<button class="form-container__button">Sign In</button>
48109
</form>
49110
</div>
50111
<div class="overlay-container">
51112
<div class="overlay">
52113
<div class="overlay-panel overlay-left">
53-
<h1>Welcome Back!</h1>
54-
<p>Please login with your personal info</p>
55-
<button class="ghost" id="signIn">Sign In</button>
114+
<h1 class="overlay-panel__title">Welcome Back!</h1>
115+
<p class="overlay-panel__text">
116+
Please login with your personal info
117+
</p>
118+
<button
119+
class="ghost overlay-panel__button"
120+
id="signIn"
121+
aria-controls="sign-in-container"
122+
>
123+
Sign In
124+
</button>
56125
</div>
57126
<div class="overlay-panel overlay-right">
58-
<h1>Hello, Friend!</h1>
59-
<p>Enter your personal details and start your journey with us</p>
60-
<button class="ghost" id="signUp">Sign Up</button>
127+
<h1 class="overlay-panel__title">Hello, Friend!</h1>
128+
<p class="overlay-panel__text">
129+
Enter your personal details and start your journey with us
130+
</p>
131+
<button
132+
class="ghost overlay-panel__button"
133+
id="signUp"
134+
aria-controls="sign-up-container"
135+
>
136+
Sign Up
137+
</button>
61138
</div>
62139
</div>
63140
</div>

‎087-sliding signin signup form/script.js

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
11
const signUpButton = document.getElementById("signUp");
22
const signInButton = document.getElementById("signIn");
33
const container = document.getElementById("container");
4+
const signUpContainer = document.getElementById("sign-up-container");
5+
const signInContainer = document.getElementById("sign-in-container");
6+
const togglePasswordIcons = document.querySelectorAll(
7+
".form-container__toggle-password i"
8+
);
49

5-
signUpButton.addEventListener("click", () => {
6-
container.classList.add("right-panel-active");
7-
});
10+
function togglePanel(isSignUp) {
11+
container.classList.toggle("right-panel-active", isSignUp);
12+
// Improve Accessibility with ARIA
13+
signUpContainer.setAttribute("aria-hidden", (!isSignUp).toString());
14+
signInContainer.setAttribute("aria-hidden", isSignUp.toString());
15+
}
16+
17+
// Implement Password Visibility Toggle
18+
function togglePasswordVisibility(icon) {
19+
const input = icon.parentElement.previousElementSibling;
20+
input.type = input.type === "password" ? "text" : "password";
21+
icon.classList.toggle("fa-eye");
22+
icon.classList.toggle("fa-eye-slash");
23+
}
24+
25+
signUpButton.addEventListener("click", () => togglePanel(true));
26+
signInButton.addEventListener("click", () => togglePanel(false));
827

9-
signInButton.addEventListener("click", () => {
10-
container.classList.remove("right-panel-active");
28+
togglePasswordIcons.forEach((icon) => {
29+
icon.addEventListener("click", () => togglePasswordVisibility(icon));
1130
});

‎087-sliding signin signup form/style.css

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,27 @@ body {
2525
margin: 1rem 0;
2626
}
2727

28-
h1 {
28+
/* Refactor CSS with BEM */
29+
30+
.form-container__title,
31+
.overlay-panel__title {
2932
font-weight: bold;
3033
margin: 0;
3134
}
3235

33-
p {
36+
.overlay-panel__text {
3437
font-size: 14px;
3538
font-weight: 100;
3639
line-height: 20px;
3740
letter-spacing: 0.5px;
3841
margin: 20px 0 30px;
3942
}
4043

41-
.social-container {
44+
.form-container__social-container {
4245
margin: 20px 0;
4346
}
4447

45-
.social-container a {
48+
.form-container__social {
4649
border: 1px solid #dddddd;
4750
border-radius: 50%;
4851
display: inline-flex;
@@ -51,20 +54,24 @@ p {
5154
margin: 0 5px;
5255
height: 40px;
5356
width: 40px;
57+
color: #333;
58+
font-size: 14px;
59+
text-decoration: none;
5460
}
5561

56-
span {
62+
.form-container__text {
5763
font-size: 12px;
5864
}
5965

60-
a {
66+
.form-container__link {
6167
color: #333;
6268
font-size: 14px;
6369
text-decoration: none;
6470
margin: 15px 0;
6571
}
6672

67-
button {
73+
.form-container__button,
74+
.overlay-panel__button {
6875
cursor: pointer;
6976
border-radius: 20px;
7077
border: 1px solid var(--main-color);
@@ -78,29 +85,32 @@ button {
7885
transition: transform 80ms ease-out;
7986
}
8087

81-
button:hover {
88+
.form-container__button:hover,
89+
.overlay-panel__button:hover {
8290
background: var(--secondary-color);
8391
}
8492

85-
button:active {
93+
.form-container__button:active,
94+
.overlay-panel__button:active {
8695
transform: scale(0.95);
8796
}
8897

89-
button:focus {
98+
.form-container__button:focus,
99+
.overlay-panel__button:focus {
90100
outline: none;
91101
}
92102

93-
button.ghost {
103+
.overlay-panel__button.ghost {
94104
background-color: transparent;
95105
border-color: #fff;
96106
}
97107

98-
button.ghost:hover {
108+
.overlay-panel__button.ghost:hover {
99109
background: #fff;
100110
color: var(--secondary-color);
101111
}
102112

103-
form {
113+
.form-container form {
104114
background-color: #fff;
105115
display: flex;
106116
align-items: center;
@@ -111,7 +121,7 @@ form {
111121
text-align: center;
112122
}
113123

114-
input {
124+
.form-container__input {
115125
background-color: #eee;
116126
border: none;
117127
padding: 12px 15px;
@@ -120,6 +130,27 @@ input {
120130
font-family: inherit;
121131
}
122132

133+
/* Implement Password Visibility Toggle */
134+
.form-container__input-group {
135+
position: relative;
136+
width: 100%;
137+
}
138+
139+
.form-container__toggle-password {
140+
position: absolute;
141+
right: 10px;
142+
top: 50%;
143+
transform: translateY(-50%);
144+
cursor: pointer;
145+
color: #776871;
146+
font-size: 18px;
147+
margin-left: -30px;
148+
}
149+
150+
.form-container__toggle-password:hover {
151+
color: #333;
152+
}
153+
123154
.container {
124155
background-color: #fff;
125156
border-radius: 10px;
@@ -136,6 +167,7 @@ input {
136167
top: 0;
137168
width: 100%;
138169
transition: all 0.6s ease-in-out;
170+
height: 100%;
139171
}
140172

141173
.sign-in-container {

0 commit comments

Comments
 (0)