Skip to content

Commit 4e188fc

Browse files
kundu-baivabkundu-baivab
committed
Added login and signup page. Improved UI.
1 parent 7b05683 commit 4e188fc

6 files changed

Lines changed: 261 additions & 2 deletions

File tree

‎Projects/Expense Tracker/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>Expense Tracker</title>
99
</head>
1010
<body>
11-
<h2>Expense Tracker</h2>
11+
<h2>EXPENSE TRACKER</h2>
1212

1313
<div class="container">
1414
<h4>Your Balance</h4>

‎Projects/Expense Tracker/script.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,4 +110,5 @@ function init() {
110110

111111
init();
112112

113-
form.addEventListener('submit', addTransaction);
113+
form.addEventListener('submit', addTransaction);
114+

‎Projects/Expense Tracker/signup.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login Box</title>
8+
<link rel="stylesheet" href="stylelogin.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="wrapper">
13+
<div class="form-box login">
14+
<h2>Login</h2>
15+
<form action="index.html">
16+
<div class="input-box">
17+
<span class="icon"><ion-icon name="mail"></ion-icon></span>
18+
<input autocomplete="off" autofocus type="email" id="email1" required>
19+
<label>Email</label>
20+
</div>
21+
<div class="input-box">
22+
<span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
23+
<input autocomplete="off" autofocus type="password" id="password1" required>
24+
<label>Password</label>
25+
</div>
26+
<div class="remember-forgot">
27+
<label><input type="checkbox">Remember me</label>
28+
<a href="#">Forgot Password?</a>
29+
</div>
30+
<button type="submit" class="btn">Login</button>
31+
<div class="login-register">
32+
<p>Don't have an account? <a href="#" class="register-link">Register</a></p>
33+
</div>
34+
</form>
35+
</div>
36+
37+
<div class="form-box register">
38+
<h2>Registration</h2>
39+
<form action="#" onsubmit="register()">
40+
<div class="input-box">
41+
<span class="icon"><ion-icon name="person"></ion-icon></span>
42+
<input autocomplete="off" autofocus type="text" id="username" required>
43+
<label>Username</label>
44+
</div>
45+
<div class="input-box">
46+
<span class="icon"><ion-icon name="mail"></ion-icon></span>
47+
<input autocomplete="off" autofocus type="email" id="email" required>
48+
<label>Email</label>
49+
</div>
50+
<div class="input-box">
51+
<span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
52+
<input autocomplete="off" autofocus type="password" id="password" required>
53+
<label>Password</label>
54+
</div>
55+
<div class="remember-forgot">
56+
<label><input type="checkbox">I agree to the terms and conditions</label>
57+
</div>
58+
<button type="submit" class="btn">Register</button>
59+
<div class="login-register">
60+
<p>Already have an account? <a href="#" class="login-link">Login</a></p>
61+
</div>
62+
</form>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<script src="signup_script.js"></script>
68+
</body>
69+
</html>

‎Projects/Expense Tracker/signup_script.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const wrapper=document.querySelector('.wrapper');
2+
const loginLink=document.querySelector('.login-link');
3+
const registerLink=document.querySelector('.register-link');
4+
5+
registerLink.addEventListener('click',()=>{
6+
wrapper.classList.add('active');
7+
});
8+
9+
loginLink.addEventListener('click',()=>{
10+
wrapper.classList.remove('active');
11+
});
12+
13+
function register(){
14+
alert("You have registered succesfully.");
15+
wrapper.classList.remove('active');
16+
}

‎Projects/Expense Tracker/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,15 @@ body {
2323
.container {
2424
margin: 10px auto;
2525
width: 350px;
26+
border: 2px solid white;
27+
border-radius: 10px;
28+
padding: 5px 5px;
2629
}
2730

2831
h1 {
2932
letter-spacing: 1px;
3033
margin: 0;
34+
text-align: center;
3135
}
3236

3337
h3 {
@@ -39,6 +43,7 @@ h3 {
3943
h4 {
4044
margin: 0;
4145
text-transform: uppercase;
46+
text-align: center;
4247
}
4348

4449
.inc-exp-container {

‎Projects/Expense Tracker/stylelogin.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background-color: #3986c1;
13+
}
14+
15+
.wrapper {
16+
position: relative;
17+
width: 400px;
18+
height: 440px;
19+
background: transparent;
20+
border: 2px solid rgba(255, 255, 255, .5);
21+
border-radius: 20px;
22+
backdrop-filter: blur(20px);
23+
box-shadow: 0 0 30px rgba(0, 0, 0, .5);
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
overflow: hidden;
28+
}
29+
30+
.wrapper.active {
31+
height: 520px;
32+
}
33+
34+
.wrapper .form-box {
35+
width: 100%;
36+
padding: 40px;
37+
}
38+
39+
.wrapper .form-box.login {
40+
transition: transform .18s ease;
41+
transform: translateX(0);
42+
}
43+
44+
.wrapper.active .form-box.login {
45+
transition: none;
46+
transform: translateX(-400px);
47+
}
48+
49+
.wrapper .form-box.register {
50+
position: absolute;
51+
transition: none;
52+
transform: translateX(400px);
53+
}
54+
55+
.wrapper.active .form-box.register {
56+
transition: transform .18s ease;
57+
transform: translateX(0);
58+
}
59+
60+
61+
.form-box h2 {
62+
font-size: 2em;
63+
color: #162938;
64+
text-align: center;
65+
}
66+
67+
.input-box {
68+
position: relative;
69+
width: 100%;
70+
height: 50px;
71+
border-bottom: 2px solid #162938;
72+
margin: 30px 0;
73+
}
74+
75+
.input-box label {
76+
position: absolute;
77+
top: 50%;
78+
left: 5px;
79+
transform: translateY(-50%);
80+
font-size: 1em;
81+
color: #162938;
82+
font-weight: 500;
83+
pointer-events: none;
84+
transition: .5s;
85+
}
86+
87+
.input-box input:focus~label,
88+
.input-box input:valid~label {
89+
top: -5px;
90+
}
91+
92+
.input-box input {
93+
width: 100%;
94+
height: 100%;
95+
background: transparent;
96+
border: none;
97+
outline: none;
98+
font-size: 1em;
99+
color: #162938;
100+
font-weight: 600;
101+
padding: 0 35px 0 5px;
102+
}
103+
104+
.input-box .icon {
105+
position: absolute;
106+
right: 8px;
107+
font-size: 1.2em;
108+
color: #162938;
109+
line-height: 57px;
110+
}
111+
112+
.remember-forgot {
113+
font-size: .9em;
114+
color: #162938;
115+
font-weight: 500;
116+
margin: -15px 0 15px;
117+
display: flex;
118+
justify-content: space-between;
119+
}
120+
121+
.remember-forgot label input {
122+
accent-color: #162938;
123+
margin-right: 3px;
124+
}
125+
126+
.remember-forgot a {
127+
color: #162938;
128+
text-decoration: none;
129+
}
130+
131+
.remember-forgot a:hover {
132+
text-decoration: underline;
133+
}
134+
135+
.btn {
136+
width: 100%;
137+
height: 45px;
138+
background: #162938;
139+
border: none;
140+
outline: none;
141+
border-radius: 6px;
142+
cursor: pointer;
143+
font-size: 1em;
144+
color: white;
145+
font-weight: 500;
146+
}
147+
148+
.btn:hover {
149+
color: white;
150+
}
151+
152+
.login-register {
153+
font-size: .9em;
154+
color: #162938;
155+
text-align: center;
156+
font-weight: 500;
157+
margin: 25px 0 10px;
158+
}
159+
160+
.login-register p a {
161+
color: #162938;
162+
text-decoration: none;
163+
font-weight: 600;
164+
}
165+
166+
.login-register p a:hover {
167+
text-decoration: underline;
168+
}

0 commit comments

Comments
 (0)