Skip to content

Commit

Permalink
Merge pull request nishant0708#5 from TanishqMehrunkarIIPSDAVV/Tanishq
Browse files Browse the repository at this point in the history 
Tanishq
  • Loading branch information
@nishant0708
nishant0708 authored Sep 5, 2024
2 parents 6dbd0b3 + 1835a4a commit 4b6280f
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 159 deletions.
207 changes: 96 additions & 111 deletions src/Login/Login.css
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,103 @@
body ::placeholder
{
body ::placeholder {
color: white;
}
body {
height: 100vh;
margin: 0;
}
.password-eye-container
{
position: relative;
}
.display-flex
{
display: flex;
justify-content: space-between;
}
.display-flex div
{
width: 225px;
}
.display-flex div:nth-child(even)
{
margin-right: 13px;
}
.eyes-login
{
position: absolute;
right: 7px;
top:12px;
}
.eyes-login:hover
{
cursor: pointer;
}
.eyes-login:nth-child(2)
{
display: none;
}
height: 100vh;
margin: 0;
}
.password-eye-container {
position: relative;
}
.display-flex {
display: flex;
justify-content: space-between;
}
.display-flex div {
width: 225px;
}
.display-flex div:nth-child(even) {
margin-right: 13px;
}
.eyes-login {
position: absolute;
right: 10px;
top: 12px;
}
.eyes-login:hover {
cursor: pointer;
}
.login-container {
width: 100%;
max-width: 500px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #282828;
box-shadow: 0 0 10px 0 white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.login-container img {
width: 100px;
height: 100px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}

.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #fffcfc;
}

.login-container form {
display: flex;
flex-direction: column;
}

.login-container label {
margin-bottom: 8px;
color: #fffcfc;
}

.login-container input {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
width: 95%;
background-color: #6e6e6e;
color: white;
}

.login-container button {
padding: 10px;
border: none;
border-radius: 4px;
background-color: #4caf50;
color: white;
font-size: 16px;
cursor: pointer;
}

.login-container button:hover {
background-color: #45a049;
}

@media (max-width: 720px) {
.login-container {
width: 100%;
max-width: 500px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #282828;
box-shadow: 0 0 10px 0 white;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

.login-container img {
width: 100px;
height: 100px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}

.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #fffcfc;
}

.login-container form {
display: flex;
flex-direction: column;
width: 275px;
}

.login-container label {
margin-bottom: 8px;
color: #fffcfc;
.display-flex div {
width: 120px;
}

.login-container input {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
width: 95%;
background-color: #6e6e6e;
color: white;
.display-flex div:nth-child(even) {
margin-right: 9px;
}

.login-container button {
padding: 10px;
border: none;
border-radius: 4px;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
}

.login-container button:hover {
background-color: #45a049;
}

@media(max-width: 720px)
{
.login-container
{
width: 275px;
}
.display-flex div
{
width: 120px;
}
.display-flex div:nth-child(even)
{
margin-right: 9px;
}
}
}
99 changes: 51 additions & 48 deletions src/Login/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,11 @@ function Login() {
const [name, setName] = useState("");
const [password, setPassword] = useState("");
const [rollno, setRollNo] = useState("");
const [enrollno,setEnrollNo] = useState("");
const [subcode,setSubcode] = useState("");
const [subname,setSubname] = useState("");
const [date,setDate] = useState("");
const [d,setDisplay] = useState("none");

const toggled=()=>
{
d === "block" ? setDisplay("none") : setDisplay("block");
}
const [enrollno, setEnrollNo] = useState("");
const [subcode, setSubcode] = useState("");
const [subname, setSubname] = useState("");
const [date, setDate] = useState("");
const [d, setDisplay] = useState(false);

const handleSubmit = (e) => {
e.preventDefault();
Expand All @@ -39,83 +34,91 @@ function Login() {
<div>
<label>Name:</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter the Name:"
required
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter the Name:"
required
/>
</div>
<div>
<label>
Password:
<div className="password-eye-container">
<input
id="password-eye"
type={d === "block" ? "text" : "password"}
type={d ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter the Password:"
required
/>
<FaEye className="eyes-login" onClick={() => toggled()} style={{display: d}}/>
<FaEyeSlash className="eyes-login" onClick={() => toggled()} style={{display: (d === "block" ? "none" : "block")}}/>
{d ? (
<FaEye
className="eyes-login"
onClick={() => setDisplay(false)}
/>
) : (
<FaEyeSlash
className="eyes-login"
onClick={() => setDisplay(true)}
/>
)}
</div>
</label>
</div>
<div className="display-flex">
<div>
<label>Roll No. :</label>
<input
type="text"
value={rollno}
onChange={(e) => setRollNo(e.target.value)}
placeholder="Enter the Roll No:"
required
<input
type="text"
value={rollno}
onChange={(e) => setRollNo(e.target.value)}
placeholder="Enter the Roll No:"
required
/>
</div>
<div>
<label>Enrollment No. :</label>
<input
type="text"
value={enrollno}
onChange={(e) => setEnrollNo(e.target.value)}
placeholder="Enter the Enrollment No:"
required
<input
type="text"
value={enrollno}
onChange={(e) => setEnrollNo(e.target.value)}
placeholder="Enter the Enrollment No:"
required
/>
</div>
</div>
</div>
<div className="display-flex">
<div>
<label>Subject Code:</label>
<input
type="text"
value={subcode}
onChange={(e) => setSubcode(e.target.value)}
placeholder="Enter the Subject Code:"
required
<input
type="text"
value={subcode}
onChange={(e) => setSubcode(e.target.value)}
placeholder="Enter the Subject Code:"
required
/>
</div>
<div>
<label>Subject:</label>
<input
type="text"
value={subname}
onChange={(e) => setSubname(e.target.value)}
placeholder="Enter the Subject:"
required
<input
type="text"
value={subname}
onChange={(e) => setSubname(e.target.value)}
placeholder="Enter the Subject:"
required
/>
</div>
</div>
<div>
<label>Date:</label>
<input
<label>Date:</label>
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
style={{colorScheme: "dark"}}
style={{ colorScheme: "dark" }}
required
/>
/>
</div>
<button type="submit">Login</button>
</form>
Expand Down

0 comments on commit 4b6280f

Please sign in to comment.