Skip to content

Commit 251e010

Browse files
akshat-sachanakshat-sachan
committed
🎉 interests
1 parent 1bf7d0d commit 251e010

File tree

3 files changed

+313
-35
lines changed

3 files changed

+313
-35
lines changed

‎FrontEnd/index.html

Lines changed: 107 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,71 @@
55
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
66
<title>Event Management - Signup</title>
77
<meta name='viewport' content='width=device-width, initial-scale=1'>
8-
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
8+
<link rel='stylesheet' type='text/css' media='screen' href='./css/style.css'>
99
</head>
1010
<body>
11-
<div class="form-container">
12-
<h2>Sign Up</h2>
13-
<form id="signup-form">
14-
<div class="form-row">
15-
<input type="text" name="firstName" class="input-text" required>
16-
<label class="label">First Name</label>
17-
</div>
18-
<div class="form-row">
19-
<input type="text" name="lastName" class="input-text" required>
20-
<label class="label">Last Name</label>
21-
</div>
22-
<div class="form-row">
23-
<input type="text" name="email" class="input-text" required>
24-
<label class="label">Email</label>
25-
</div>
26-
<div class="form-row">
27-
<input type="text" name="city" class="input-text" required>
28-
<label class="label">City</label>
29-
</div>
30-
<div class="form-row">
31-
<input type="password" name="password" class="input-text" required>
32-
<label class="label">Password</label>
33-
</div>
34-
<div class="form-row">
35-
<label class="label">Interests</label>
36-
<select name="interests" class="input-text" multiple required>
37-
<!-- Interests will be populated here -->
38-
</select>
39-
</div>
40-
<div class="form-row">
41-
<input type="submit" value="Sign Up">
11+
<div id="whole"> EventM - Enjoy the Events in your City
12+
<img src="images/logo.png" alt="Event Management Logo" style="display: block; margin: 0 auto; max-width: 90%; max-height: 80%;" />
13+
</div>
14+
15+
<div class="form-v8">
16+
<div class="form-v8-content">
17+
<h2>Create an Account or Sign In</h2>
18+
<div class="tab">
19+
<button class="tablinks" onclick="openCity(event, 'sign-up')" id="defaultOpen">Sign Up</button>
20+
<button class="tablinks" onclick="openCity(event, 'sign-in')">Sign In</button>
4221
</div>
43-
</form>
22+
<form id="register-form" class="form-detail" action="#" method="post">
23+
<div class="tabcontent" id="sign-up">
24+
<div class="form-row">
25+
<input type="text" name="firstName" class="input-text" required>
26+
<label class="label">First Name</label>
27+
</div>
28+
<div class="form-row">
29+
<input type="text" name="lastName" class="input-text" required>
30+
<label class="label">Last Name</label>
31+
</div>
32+
<div class="form-row">
33+
<input type="text" name="email" class="input-text" required>
34+
<label class="label">Email</label>
35+
</div>
36+
<div class="form-row">
37+
<input type="text" name="city" class="input-text" required>
38+
<label class="label">City</label>
39+
</div>
40+
<div class="form-row">
41+
<input type="password" name="password" class="input-text" required>
42+
<label class="label">Password</label>
43+
</div>
44+
<div class="form-row">
45+
<label class="label">Interests</label>
46+
<select name="interests" class="input-text" multiple required>
47+
<!-- Interests will be populated here -->
48+
</select>
49+
</div>
50+
<div class="form-row-last">
51+
<input type="submit" name="register" class="register" value="Register">
52+
</div>
53+
</div>
54+
</form>
55+
<form id="login-form" class="form-detail" action="#" method="post">
56+
<div class="tabcontent" id="sign-in">
57+
<div class="form-row">
58+
<input type="text" name="your_email_1" id="email2" class="input-text" required>
59+
<label class="label">E-Mail</label>
60+
<span class="border"></span>
61+
</div>
62+
<div class="form-row">
63+
<input type="password" name="password_1" id="password2" class="input-text" required>
64+
<label class="label">Password</label>
65+
<span class="border"></span>
66+
</div>
67+
<div class="form-row-last">
68+
<input type="submit" name="login" class="register" id="login" value="Sign In">
69+
</div>
70+
</div>
71+
</form>
72+
</div>
4473
</div>
4574

4675
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@@ -62,8 +91,8 @@ <h2>Sign Up</h2>
6291
console.error(error);
6392
});
6493

65-
// Handle form submission
66-
document.getElementById('signup-form').addEventListener('submit', function (event) {
94+
// Handle form submission for Sign Up
95+
document.getElementById('register-form').addEventListener('submit', function (event) {
6796
event.preventDefault();
6897
const form = event.target;
6998
const formData = new FormData(form);
@@ -87,6 +116,31 @@ <h2>Sign Up</h2>
87116
// Handle the response, e.g., show a success message or redirect to the dashboard
88117
console.log('User registered successfully!');
89118
// Redirect to dashboard.html
119+
window.location.href = 'event.html';
120+
})
121+
.catch(error => {
122+
// Handle the error, e.g., display an error message
123+
console.error(error);
124+
});
125+
});
126+
127+
// Handle form submission for Sign In
128+
document.getElementById('login-form').addEventListener('submit', function (event) {
129+
event.preventDefault();
130+
const form = event.target;
131+
const formData = new FormData(form);
132+
133+
// Create the payload object
134+
const payload = {
135+
email: formData.get('your_email_1'),
136+
password: formData.get('password_1')
137+
};
138+
139+
axios.post('http://localhost:8000/api/login', payload)
140+
.then(response => {
141+
// Handle the response, e.g., show a success message or redirect to the dashboard
142+
console.log('User logged in successfully!');
143+
// Redirect to dashboard.html
90144
window.location.href = 'dashboard.html';
91145
})
92146
.catch(error => {
@@ -95,5 +149,23 @@ <h2>Sign Up</h2>
95149
});
96150
});
97151
</script>
152+
<script>
153+
function openCity(evt, cityName) {
154+
var i, tabcontent, tablinks;
155+
tabcontent = document.getElementsByClassName("tabcontent");
156+
for (i = 0; i < tabcontent.length; i++) {
157+
tabcontent[i].style.display = "none";
158+
}
159+
tablinks = document.getElementsByClassName("tablinks");
160+
for (i = 0; i < tablinks.length; i++) {
161+
tablinks[i].className = tablinks[i].className.replace(" active", "");
162+
}
163+
document.getElementById(cityName).style.display = "block";
164+
evt.currentTarget.className += " active";
165+
}
166+
167+
document.getElementById("defaultOpen").click();
168+
</script>
169+
<script src="./js/index.js"></script>
98170
</body>
99171
</html>

‎FrontEnd/login.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Event Management</title>
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8+
9+
<link rel="stylesheet" type="text/css" href="css/sourcesanspro-font.css">
10+
11+
<link rel="stylesheet" href="css/style.css"/>
12+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js" integrity="sha512-L4lHq2JI/GoKsERT8KYa72iCwfSrKYWEyaBxzJeeITM9Lub5vlTj8tufqYk056exhjo2QDEipJrg6zen/DDtoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
14+
15+
<style>
16+
17+
</style>
18+
19+
</head>
20+
<body>
21+
<div id="whole"> EventM - Enjoy the Events in your City
22+
<img src="images/logo.png" alt="Event Management Logo" style="display: block; margin: 0 auto; max-width: 90%; max-height: 80%;" />
23+
</div>
24+
25+
26+
27+
28+
29+
<div class="form-v8">
30+
<div class="form-v8-content">
31+
<h2>Create an Account or Sign In</h2>
32+
<div class="tab">
33+
<button class="tablinks" onclick="openCity(event, 'sign-up')" id="defaultOpen">Sign Up</button>
34+
<button class="tablinks" onclick="openCity(event, 'sign-in')">Sign In</button>
35+
</div>
36+
<form id="register-form" class="form-detail" action="#" method="post">
37+
<div class="tabcontent" id="sign-up">
38+
<div class="form-row">
39+
<input type="text" name="full_name" id="fname1" class="input-text" required>
40+
<label class="label">First name</label>
41+
<span class="border"></span>
42+
</div>
43+
<div class="form-row">
44+
<input type="text" name="full_name" id="lname1" class="input-text" required>
45+
<label class="label">Last name</label>
46+
<span class="border"></span>
47+
</div>
48+
<div class="form-row">
49+
<input type="text" name="your_email" id="email1" class="input-text" required>
50+
<label class="label">E-Mail</label>
51+
<span class="border"></span>
52+
</div>
53+
<div class="form-row">
54+
<input type="text" name="city" id="city" class="input-text" required>
55+
<label class="label">City</label>
56+
<span class="border"></span>
57+
</div>
58+
<div class="form-row">
59+
<input type="password" name="password" id="password1" class="input-text" required>
60+
<label class="label">Password</label>
61+
<span class="border"></span>
62+
</div>
63+
<div class="form-row-last">
64+
<input type="submit" name="register" class="register" value="Register">
65+
</div>
66+
</div>
67+
</form>
68+
<form id="login-form" class="form-detail" action="#" method="post">
69+
<div class="tabcontent" id="sign-in">
70+
<div class="form-row">
71+
<input type="text" name="your_email_1" id="email2" class="input-text" required>
72+
<label class="label">E-Mail</label>
73+
<span class="border"></span>
74+
</div>
75+
<div class="form-row">
76+
<input type="password" name="password_1" id="password2" class="input-text" required>
77+
<label class="label">Password</label>
78+
<span class="border"></span>
79+
</div>
80+
<div class="form-row-last">
81+
<input type="submit" name="login" class="register" id="login" value="Sign In">
82+
</div>
83+
</div>
84+
</form>
85+
</div>
86+
</div>
87+
<script>
88+
function openCity(evt, cityName) {
89+
var i, tabcontent, tablinks;
90+
tabcontent = document.getElementsByClassName("tabcontent");
91+
for (i = 0; i < tabcontent.length; i++) {
92+
tabcontent[i].style.display = "none";
93+
}
94+
tablinks = document.getElementsByClassName("tablinks");
95+
for (i = 0; i < tablinks.length; i++) {
96+
tablinks[i].className = tablinks[i].className.replace(" active", "");
97+
}
98+
document.getElementById(cityName).style.display = "block";
99+
evt.currentTarget.className += " active";
100+
}
101+
102+
document.getElementById("defaultOpen").click();
103+
</script>
104+
<script src="./js/index.js"></script>
105+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
106+
</body>
107+
</html>

‎FrontEnd/signup.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>Event Management - Signup</title>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel='stylesheet' type='text/css' media='screen' href='./css/style.css'>
9+
</head>
10+
<body>
11+
<div class="form-container">
12+
<h2>Sign Up</h2>
13+
<form id="signup-form">
14+
<div class="form-row">
15+
<input type="text" name="firstName" class="input-text" required>
16+
<label class="label">First Name</label>
17+
</div>
18+
<div class="form-row">
19+
<input type="text" name="lastName" class="input-text" required>
20+
<label class="label">Last Name</label>
21+
</div>
22+
<div class="form-row">
23+
<input type="text" name="email" class="input-text" required>
24+
<label class="label">Email</label>
25+
</div>
26+
<div class="form-row">
27+
<input type="text" name="city" class="input-text" required>
28+
<label class="label">City</label>
29+
</div>
30+
<div class="form-row">
31+
<input type="password" name="password" class="input-text" required>
32+
<label class="label">Password</label>
33+
</div>
34+
<div class="form-row">
35+
<label class="label">Interests</label>
36+
<select name="interests" class="input-text" multiple required>
37+
<!-- Interests will be populated here -->
38+
</select>
39+
</div>
40+
<div class="form-row">
41+
<input type="submit" value="Sign Up">
42+
</div>
43+
</form>
44+
</div>
45+
46+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
47+
<script>
48+
// Fetch interests and populate the dropdown
49+
axios.get('http://localhost:8000/api/interest')
50+
.then(response => {
51+
const interestsSelect = document.querySelector('select[name="interests"]');
52+
const interests = response.data;
53+
54+
interests.forEach(interest => {
55+
const option = document.createElement('option');
56+
option.value = interest.interestName; // Get only the interest name
57+
option.textContent = interest.interestName; // Display only the interest name
58+
interestsSelect.appendChild(option);
59+
});
60+
})
61+
.catch(error => {
62+
console.error(error);
63+
});
64+
65+
// Handle form submission
66+
document.getElementById('signup-form').addEventListener('submit', function (event) {
67+
event.preventDefault();
68+
const form = event.target;
69+
const formData = new FormData(form);
70+
71+
// Get all selected interest options
72+
const selectedOptions = form.elements['interests'].selectedOptions;
73+
const selectedInterests = Array.from(selectedOptions).map(option => option.value);
74+
75+
// Create the payload object
76+
const payload = {
77+
firstName: formData.get('firstName'),
78+
lastName: formData.get('lastName'),
79+
email: formData.get('email'),
80+
city: formData.get('city'),
81+
password: formData.get('password'),
82+
interests: selectedInterests
83+
};
84+
85+
axios.post('http://localhost:8000/api/user', payload)
86+
.then(response => {
87+
// Handle the response, e.g., show a success message or redirect to the dashboard
88+
console.log('User registered successfully!');
89+
// Redirect to dashboard.html
90+
window.location.href = 'event.html';
91+
})
92+
.catch(error => {
93+
// Handle the error, e.g., display an error message
94+
console.error(error);
95+
});
96+
});
97+
</script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)