Skip to content

Commit 13462d3

Browse files
harishkumarAVharishkumarAV
authored
Add files via upload
1 parent 09e7d8a commit 13462d3

File tree

4 files changed

+407
-0
lines changed

4 files changed

+407
-0
lines changed

‎Day3/Login/Login.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body, html {
2+
margin: 0;
3+
padding: 0;
4+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
5+
background-color: #9aa6de;
6+
}
7+
8+
.container {
9+
display:flex;
10+
align-items: center;
11+
height: 100vh;
12+
padding-right:100px;
13+
justify-content: center;
14+
animation: fadeInAnimation 2s ease-in-out;
15+
16+
}
17+
18+
.login-form {
19+
20+
background-color: #c8c8c8d2;
21+
border-radius: 8px;
22+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23+
padding: 20px;
24+
max-width: 400px;
25+
width: 90%;
26+
text-align: center;
27+
animation: fadeInAnimation 2s ease-in-out;
28+
29+
}
30+
@keyframes fadeInAnimation {
31+
from {
32+
opacity: 0;
33+
transform: translateY(10px);
34+
}
35+
to {
36+
opacity: 1;
37+
transform: translateY(0);
38+
}
39+
}
40+
41+
.login-form h1 {
42+
margin-bottom: 20px;
43+
}
44+
45+
.login-form input[type="text"],
46+
.login-form input[type="password"] {
47+
width: 90%;
48+
padding: 10px;
49+
margin: 10px 0;
50+
border: 1px solid #ffffff;
51+
border-radius: 4px;
52+
}
53+
54+
.login-form button {
55+
animation: fadeInAnimation 4s ease-in-out;
56+
57+
background-color: #888888;
58+
color: #fff;
59+
border: none;
60+
border-radius: 4px;
61+
padding: 10px 20px;
62+
cursor: pointer;
63+
}
64+
65+
.login-form button:hover {
66+
background-color: #4b40e9;
67+
}
68+
69+
@media (max-width: 768px) {
70+
.login-form {
71+
max-width: 90%;
72+
}
73+
}
74+
75+
.error-message {
76+
color: #ff0000;
77+
font-size: 14px;
78+
margin-top: 5px;
79+
}
80+
81+
input.error {
82+
border-color: #ff0000;
83+
}
84+

‎Day3/Login/Login.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { useState } from 'react';
2+
import './Login.css';
3+
import { Link } from 'react-router-dom';
4+
5+
function Login() {
6+
const [username, setUsername] = useState('');
7+
const [password, setPassword] = useState('');
8+
const [showUsernameError, setShowUsernameError] = useState(false);
9+
const [showPasswordError, setShowPasswordError] = useState(false);
10+
const handleLogin = () => {
11+
setShowUsernameError(false);
12+
setShowPasswordError(false);
13+
14+
if (username === '') {
15+
setShowUsernameError(true);
16+
return;
17+
}
18+
19+
if (password === '') {
20+
setShowPasswordError(true);
21+
return;
22+
}
23+
24+
alert('Login successful!');
25+
};
26+
27+
return (
28+
<div className="container">
29+
<div className="login-form">
30+
<h2>Login</h2>
31+
<form>
32+
<div className={`form-group ${showUsernameError ? 'error' : ''}`}>
33+
<input
34+
type="text"
35+
id="username"
36+
placeholder="Username"
37+
value={username}
38+
onChange={(e) => setUsername(e.target.value)}
39+
/>
40+
{showUsernameError && <div className="error-message">Username not found</div>}
41+
</div>
42+
<div className={`form-group ${showPasswordError ? 'error' : ''}`}>
43+
<input
44+
type="password"
45+
id="password"
46+
placeholder="Password"
47+
value={password}
48+
onChange={(e) => setPassword(e.target.value)}
49+
/>
50+
{showPasswordError && <div className="error-message">Password not found</div>}
51+
</div>
52+
<button type="button" id="login-button" onClick={handleLogin}>
53+
Login
54+
</button>
55+
<p>Don't have an account? <Link to="/SignUp"> <button id="signup-button">Sign Up</button></Link></p>
56+
</form>
57+
</div>
58+
</div>
59+
);
60+
}
61+
62+
export default Login;

‎Day3/SignUp/SignUp.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
2+
.SignUp {
3+
max-width: 600px;
4+
margin: 0 auto;
5+
padding: 30px;
6+
height: 85vh;
7+
border-radius: 8px;
8+
margin-top: 1%;
9+
background-color: #e0e0e0;
10+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
11+
font-family: Arial, sans-serif;
12+
animation: fadeInAnimation 2s ease-in-out;
13+
14+
}
15+
16+
.SignUp h2 {
17+
text-align: center;
18+
margin-bottom: 20px;
19+
}
20+
21+
.SignUp form label {
22+
display: block;
23+
margin-bottom: 10px;
24+
font-weight: bold;
25+
}
26+
27+
.SignUp input[type="text"],
28+
.SignUp input[type="date"],
29+
.SignUp select,
30+
.SignUp input[type="number"] {
31+
width: 100%;
32+
padding: 10px;
33+
margin-bottom: 20px;
34+
border: 1px solid #ccc;
35+
border-radius: 5px;
36+
}
37+
38+
.SignUp select {
39+
height: 40px;
40+
}
41+
42+
.SignUp input[type="radio"] {
43+
margin-right: 5px;
44+
}
45+
46+
.SignUp button[type="submit"] {
47+
background-color: #007BFF;
48+
color: #fff;
49+
padding: 10px 20px;
50+
border: none;
51+
border-radius: 5px;
52+
cursor: pointer;
53+
}
54+
55+
.SignUp button[type="submit"]:hover {
56+
background-color: #0056b3;
57+
}
58+
.SignUp {
59+
max-width: 600px;
60+
margin: 0 auto;
61+
padding: 30px;
62+
height: 120vh;
63+
border-radius: 8px;
64+
margin-top: 1%;
65+
background-color: #e0e0e0;
66+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
67+
font-family: Arial, sans-serif;
68+
animation: fadeInAnimation 2s ease-in-out;
69+
}
70+
71+
.SignUp h2 {
72+
text-align: center;
73+
margin-bottom: 20px;
74+
}
75+
76+
.SignUp form label {
77+
display: block;
78+
margin-bottom: 10px;
79+
font-weight: bold;
80+
}
81+
82+
.SignUp input[type="text"],
83+
.SignUp input[type="date"],
84+
.SignUp select,
85+
.SignUp input[type="number"],
86+
.SignUp input[type="email"],
87+
.SignUp input[type="password"],
88+
.SignUp input[type="tel"] {
89+
width: 100%;
90+
padding: 10px;
91+
margin-bottom: 20px;
92+
border: 1px solid #ccc;
93+
border-radius: 5px;
94+
}
95+
96+
.SignUp select {
97+
height: 40px;
98+
}
99+
100+
.SignUp input[type="radio"] {
101+
margin-right: 5px;
102+
}
103+
104+
.SignUp button[type="submit"] {
105+
background-color: #007BFF;
106+
color: #fff;
107+
padding: 10px 20px;
108+
border: none;
109+
border-radius: 5px;
110+
cursor: pointer;
111+
}
112+
113+
.SignUp button[type="submit"]:hover {
114+
background-color: #0056b3;
115+
}
116+

0 commit comments

Comments
 (0)