-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
101 lines (84 loc) · 2.83 KB
/
main.js
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
const form = document.getElementById("form");
const toggle = document.getElementById("toggle");
const login = document.getElementById("login");
const signup = document.getElementById("signup");
const password2 = document.getElementById("password2");
const password = document.getElementById("password");
const title = document.getElementById("title");
const email = document.getElementById("email");
const error = document.getElementsByClassName("error");
const link = document.getElementById("link");
var x = 0;
link.addEventListener("click", (r) => {
if(x==0){
r.preventDefault();
signup.className = 'signup selected';
x = 1 - x;
login.className = 'login';
password2.style.display ='block'
title.innerHTML = "SignUp Form"
signup.style.transition = "all 1s ease"
}
});
signup.addEventListener("click", (e) => {
if(x == 0){
signup.className = 'signup selected';
x = 1 - x;
login.className = 'login';
password2.style.display ='block'
title.innerHTML = "SignUp Form"
signup.style.transition = "all 1s ease"
}
});
login.addEventListener("click", (a) => {
if(x == 1){
login.className = 'login selected';
x = 1 - x;
signup.className = 'signup';
password2.style.display ='none';
title.innerHTML = 'Login Form';
error[0].innerHTML = '';
error[1].innerHTML = '';
error[2].innerHTML = '';
email.style.border = '1px solid rgb(180, 180, 180)';
password.style.border = '1px solid rgb(180, 180, 180)';
password2.style.border = '1px solid rgb(180, 180, 180)';
}
});
form.addEventListener("submit", (f) => {
f.preventDefault();
if(x == 1){
checkInputs();
}
if(x == 0){
}
});
function checkInputs(){
const emailValues = email.value.trim();
const passwordValues = password.value.trim();
const password2Values = password2.value.trim();
if(emailValues == ''){
error[0].innerHTML = 'Email Cannot be empty';
email.style.border = '2px solid red';
}else{
error[0].innerHTML = ''
email.style.border = '2px solid green';
}
if(passwordValues == ''){
error[1].innerHTML = 'Password Cannot be empty';
password.style.border = '2px solid red';
}else{
error[1].innerHTML = ''
password.style.border = '2px solid green';
}
if(password2Values == ''){
error[2].innerHTML = 'Password Cannot be empty';
password.style.border = '2px solid red';
}else if (passwordValues != password2Values) {
error[2].innerHTML = 'Password is not same';
password2.style.border = '2px solid red';
} else {
error[2].innerHTML = ''
password2.style.border = '2px solid green';
}
}