Loginform/index.html at main · Cebucoder/Loginform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Login Page</title>
</head>
<body>


<div class="container">

<div class="content">
	<h1 class="headtag">Login</h1>
	<input type="text" name="" placeholder="Username.." id="Username">
	<input type="password" name="" placeholder="Password.." id="Password">


	<!-- adding error and success promt -->
	<div class="success" id="success">You successfully Login!</div>
	<div class="error" id="error">Incorrect username or password?</div>

	<button onclick="submit()">Login</button>

	<a href="">Forgot Password?</a>
</div>

</div>


</body>

<script type="text/javascript">

	// now lets add the function
	// first lets add id first

function submit(){
	let username = document.getElementById("Username").value;
	let password = document.getElementById("Password").value;

	// promt error and success

	let success = document.getElementById("success");
	let error = document.getElementById("error");


	let defaultuser = "cebucoder";
	let defaultpass = "cebucoder101";

	if ((username == defaultuser) && (password == defaultpass)) {
		// alert("correct");
		success.classList.add("show-success");
		error.classList.remove("show-error");


		// for testing
	}else{
		error.classList.add("show-error");
		success.classList.remove("show-success");
	}

}

// to remove the other one we need to add remove script
// when success show we remove the error and same with error
// lets hide the passowrd into dot


</script>


</html>