- Welcome to CampusConnect -
--
- your go-to destination for staying in the loop with all the exciting events, announcements, and opportunities buzzing around campus. -
-
-
-
-
-
-
+
+
+
+
+
+
-
- Post Information
-
-
- 
-
-
-
-
-
+ Campus Connect
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/frontend/script.js b/frontend/script.js
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/imgs/board.png b/imgs/board.png
similarity index 100%
rename from frontend/imgs/board.png
rename to imgs/board.png
diff --git a/imgs/logo-symbol-light.png b/imgs/logo-symbol-light.png
new file mode 100644
index 0000000..f117dc6
Binary files /dev/null and b/imgs/logo-symbol-light.png differ
diff --git a/frontend/imgs/logo.png b/imgs/logo.png
similarity index 100%
rename from frontend/imgs/logo.png
rename to imgs/logo.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ddedf43
--- /dev/null
+++ b/index.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Campus Connect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c169c89
--- /dev/null
+++ b/script.js
@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function () {
+ console.log("hi")
+ const postListElement = document.getElementsByClassName('notices');
+ const postForm = document.querySelector('.post-btn');
+ const apiEndpoint = 'http://localhost:4200/api/post'; // Replace with your actual backend endpoint
+
+ // Function to fetch and render posts
+ function fetchAndRenderPosts() {
+ fetch(apiEndpoint, {
+ method: 'GET',
+ })
+ .then(response => response.json())
+ .then(data => {
+ // Clear the existing list
+ postListElement.innerHTML = '';
+
+ // Render the fetched data
+ data.forEach(post => {
+ const listItem = document.createElement('li');
+
+ // Create and append the h3 element for post content
+ const postText = document.createElement('h3');
+ postText.textContent = post.postContent;
+ listItem.appendChild(postText);
+
+ // Create and append the h5 element for post tags
+ const postTag = document.createElement('h5');
+ postTag.textContent = post.postTags || 'No tags'; // Use post.postTags if it exists, otherwise set it to 'No tags'
+ listItem.appendChild(postTag);
+
+ // Append the entire li to the postListElement
+ postListElement.appendChild(listItem);
+ });
+ })
+ .catch(error => console.error('Error fetching data:', error));
+ }
+
+ // Fetch and render posts on page load
+ fetchAndRenderPosts();
+
+ // Add an event listener for the form submission
+ postForm.addEventListener('submit', function (event) {
+ event.preventDefault(); // Prevent the default form submission
+
+ // Fetch and render posts after submitting the form
+ fetchAndRenderPosts();
+ });
+});
\ No newline at end of file
diff --git a/frontend/style.css b/style.css
similarity index 56%
rename from frontend/style.css
rename to style.css
index 5f822ac..4dfbc72 100644
--- a/frontend/style.css
+++ b/style.css
@@ -3,8 +3,13 @@
margin: 0;
padding: 0;
border-style: border-box;
+}
+
+body {
font-size: 14px;
background-color: #7FD6C2;
+ max-width: 100%;
+ font-family: 'Poppins', sans-serif;
}
/* Navigation bar */
@@ -12,12 +17,14 @@ nav {
display: flex;
align-items: center;
justify-content: space-between;
- margin: 10px 10px auto 21px;
+ margin: 0 10px auto 21px;
+ height: 45px;
}
/* search-bar - Nav */
.search-inp, .search-btn {
border-style: none;
+ border-color: #7FD6C2;
}
.search-inp {
@@ -32,6 +39,11 @@ nav {
font-size: 14px;
}
+.search-inp:hover {
+ border-style: solid;
+ border-bottom-color: #333;
+}
+
/* login-post-button - Nav */
.login-post-btn {
display: flex;
@@ -57,8 +69,9 @@ nav {
.login-btn:hover, .post-btn:hover {
- transform: scale(0.9);
+ transform: scale(0.95);
cursor: pointer;
+ transition: all 0.4s ease;
}
@@ -69,12 +82,12 @@ nav {
height: 56vh;
align-items: center;
justify-content: center;
+ transition: all 0.2s ease-in;
}
.intro .text {
margin-right: 75px;
width: 650px;
- font-family: 'Poppins', sans-serif;
text-align: center;
}
@@ -93,17 +106,30 @@ nav {
display: flex;
flex-direction: column;
align-items: center;
- width: 100vw;
- height: 150vh;
+ width: 98.9vw;
+ height: 100vh;
background-color: #D1EDE7;
margin-top: 15px;
+ transition: all 0.4s ease-in;
}
-.notices {
- padding: 20px;
- background-color: #f8f8f8;
+/* heading - post form */
+.notices li{
+ text-decoration:none;
+ width: 78.9vw;
+ background-color: white;
+}
+
+/* post content (text) - post form */
+.notices h3{
+ background-color: white;
}
+/* tags - post Form */
+.notices h5{
+ background-color: white;
+ margin-bottom: 15px;
+}
/* Post Forms - Notices Section */
.postForm {
@@ -124,22 +150,87 @@ nav {
font-size: 15px;
}
-/* heading - post form */
-#notice1 li{
- text-decoration:none;
- width: 80vw;
- background-color: white;
+/* Footer Section */
+footer {
+ background-color: #333;
+ color:whitesmoke;
}
-/* post content (text) - post form */
-#notice1 h3{
- background-color: white;
+.icons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
-/* tags - post Form */
-#notice1 h5{
- background-color: white;
- margin-bottom: 15px;
+.icons p{
+ display: flex;
+ justify-content: center;
+ width: 307px;
+}
+
+.social-icon{
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ width: 200px;
+ height: 40px;
+}
+
+.social-icon a i{
+ color: whitesmoke;
+ font-size: 14px;
+}
+
+.social-icon a i:hover{
+ scale: 0.9;
+ transition: all 0.4s ease;
+ color:#7FD6C2;
+}
+
+footer .container {
+ display: flex;
+ align-items: center;
+ height: 170px;
+ justify-content: space-evenly;
+}
+
+footer .container .com-name {
+ width: 180px;
+}
+
+#title {
+ line-height: 35px;
+}
+
+.com-name #title{
+ font-size: 19px;
+}
+
+.lists #title{
+ font-size: 19px;
+}
+
+.lists ul li{
+ list-style: none;
+ line-height: 25px;
+}
+
+
+.copyright {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 40px;
+}
+
+.copyright a{
+ font-weight: 700;
+}
+
+.copyright a:hover {
+ color: #7FD6C2;
+ scale: 0.95;
+ transition: all 0.4s ease;
}
/* default elements style */
@@ -149,4 +240,14 @@ input {
button {
border-style: none;
+}
+
+a {
+ text-decoration: none;
+ color: whitesmoke;
+}
+
+hr {
+ /* color: grey; */
+ background-color: grey;
}
\ No newline at end of file
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/imgs/logo.jpg b/frontend/imgs/logo.jpg
deleted file mode 100644
index 187df5d..0000000
Binary files a/frontend/imgs/logo.jpg and /dev/null differ
diff --git a/frontend/index.html b/frontend/index.html
deleted file mode 100644
index 18ada1f..0000000
--- a/frontend/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
+
+ Post Information
+
+
+
+
+
+
+
+
-
-
- -
- 
-
-
-
-
-
+
+
+ + Welcome to CampusConnect +
++
+ your go-to destination for staying in the loop with all the exciting events, announcements, and opportunities buzzing around campus. +
+
+
+
+
+
+
+