Skip to content

Commit fb00587

Browse files
Pankaj-StrPankaj-Str
authored
update login with js
1 parent 60265cf commit fb00587

5 files changed

Lines changed: 188 additions & 0 deletions

File tree

‎Example/Login System/css/style.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
body {font-family: Arial, Helvetica, sans-serif;}
3+
form {border: 3px solid #f1f1f1;}
4+
5+
input[type=text], input[type=password] {
6+
width: 100%;
7+
padding: 12px 20px;
8+
margin: 8px 0;
9+
display: inline-block;
10+
border: 1px solid #ccc;
11+
box-sizing: border-box;
12+
}
13+
14+
button {
15+
background-color: #f90c04;
16+
color: white;
17+
padding: 14px 20px;
18+
margin: 8px 0;
19+
border: none;
20+
cursor: pointer;
21+
width: 100%;
22+
}
23+
24+
button:hover {
25+
opacity: 0.8;
26+
}
27+
28+
.cancelbtn {
29+
width: auto;
30+
padding: 10px 18px;
31+
background-color: #f44336;
32+
}
33+
34+
.imgcontainer {
35+
text-align: center;
36+
margin: 24px 0 12px 0;
37+
}
38+
39+
img.avatar {
40+
width: 40%;
41+
border-radius: 50%;
42+
}
43+
44+
.container {
45+
padding: 16px;
46+
}
47+
48+
span.psw {
49+
float: right;
50+
padding-top: 16px;
51+
}
52+
53+
/* Change styles for span and cancel button on extra small screens */
54+
@media screen and (max-width: 300px) {
55+
span.psw {
56+
display: block;
57+
float: none;
58+
}
59+
.cancelbtn {
60+
width: 100%;
61+
}
62+
}

‎Example/Login System/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
6+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
7+
<link rel="stylesheet" href="css/style.css">
8+
<script src="js/login.js"></script>
9+
</head>
10+
<body>
11+
12+
<div class="container">
13+
<div class="row justify-content-md-center">
14+
<div class="col-sm-6">
15+
<form>
16+
<div class="imgcontainer">
17+
<!-- <img src="#" alt="Avatar" class="avatar"> -->
18+
<h1>! Login ! </h1>
19+
</div>
20+
21+
<div class="container">
22+
<label for="uname"><b>Username</b></label>
23+
<input type="text" placeholder="Enter Username" name="uname" id="username" required>
24+
25+
<label for="psw"><b>Password</b></label>
26+
<input type="text" placeholder="Enter Password" name="psw" id="password" required>
27+
28+
<button type="submit" onclick="logincode()">Login</button>
29+
<label>
30+
<input type="checkbox" checked="checked" name="remember"> Remember me
31+
</label>
32+
</div>
33+
34+
35+
</form>
36+
</div>
37+
</div>
38+
</div>
39+
40+
</body>
41+
</html>

‎Example/Login System/js/login.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function logincode(){
2+
3+
u_name = document.getElementById("username").value;
4+
u_pwd = document.getElementById("password").value;
5+
6+
if(u_name == "admin@p4n.in" && u_pwd == "admin"){
7+
8+
window.open("welcome.html")
9+
10+
}else
11+
{
12+
13+
alert("Check Password And Login Again...")
14+
}
15+
16+
17+
}

‎Example/Login System/welcome.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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+
<title>Document</title>
7+
</head>
8+
<body>
9+
<h1>Welcome to home page .....</h1>
10+
</body>
11+
</html>

‎Example/UserInput/user_input.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
<title>Document</title>
7+
<style>
8+
td{
9+
padding: 10px;
10+
}
11+
table{
12+
margin: auto;
13+
}
14+
</style>
15+
<script>
16+
let Name = prompt("Enter Your Name")
17+
//console.log("Welcome to "+Name)
18+
let age = prompt("Enter Your age")
19+
let height = prompt("Enter Your Height")
20+
21+
// document.write("your name is : "+Name+"<hr>")
22+
// document.write("your Age is : "+age+"<hr>")
23+
// document.write("your Height is : "+height+"<hr>")
24+
25+
</script>
26+
</head>
27+
<body>
28+
<table border="1">
29+
<tr>
30+
<td>Name </td>
31+
<td>
32+
<script>
33+
document.write(Name)
34+
</script>
35+
</td>
36+
</tr>
37+
<tr>
38+
<td>Age </td>
39+
<td>
40+
<script>
41+
document.write(age)
42+
</script>
43+
</td>
44+
</tr>
45+
<tr>
46+
<td>Height </td>
47+
<td>
48+
<script>
49+
document.write(height)
50+
</script>
51+
</td>
52+
</tr>
53+
54+
55+
</table>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)