Merge pull request #194 from GavinCopley/main

Period 1 Brown
nighthawkcoders · Nov 12, 2024 · 5eb4ba0 · 5eb4ba0
2 parents b603477 + cdddcd6
commit 5eb4ba0
Show file tree

Hide file tree

Showing 3 changed files with 429 additions and 5 deletions.
diff --git a/navigation/shared_interests/football.md b/navigation/shared_interests/football.md
@@ -173,7 +173,6 @@ menu: nav/shared_interests.html
     <div class="posts-wrapper" id="postsWrapper">
         <!-- Posts will be dynamically loaded here -->
     </div>
-
     <!-- Chatroom Section on the Right -->
     <div class="chatroom-container">
         <header class="chatroom-header">

diff --git a/navigation/shared_interests/limitconnect.md b/navigation/shared_interests/limitconnect.md
@@ -63,4 +63,159 @@ menu: nav/shared_interests.html
            <p>Make connections</p>
            <button onclick="location.href='{{site.baseurl}}/navigation/shared_interests/overall'">Connect</button>
        </div>
-</div>
+</div>
+<style>
+    .post-form-container {
+        border: 2px solid pink;
+        border-radius: 8px;
+        background-color: skyblue;
+        padding: 15px;
+        margin-top: 20px;
+    }
+    #roleSelect {
+        width: 100%;
+        padding: 10px;
+        border: 2px solid pink;
+        border-radius: 5px;
+        margin-bottom: 10px;
+    }
+    #postInput {
+        width: 100%;
+        height: 100px;
+        padding: 10px;
+        border: 2px solid pink;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        resize: none;
+    }
+</style>
+<!-- Post Submission Form -->
+<div class="post-form-container">
+    <h3>Add a New Post</h3>
+    <form id="postForm">
+        <select id="roleSelect" required>
+            <option value="" disabled selected>Select your role</option>
+            <option value="Student">Student</option>
+            <option value="Admin">Admin</option>
+        </select>
+        <textarea id="postInput" placeholder="What's on your mind?" required></textarea>
+        <button type="submit">Post</button>
+    </form>
+</div>
+
+<script>
+    function getReactions() {
+        const reactions = localStorage.getItem('reactions');
+        return reactions ? JSON.parse(reactions) : {};
+    }
+
+    function saveReactions(reactions) {
+        localStorage.setItem('reactions', JSON.stringify(reactions));
+    }
+
+    function getPosts() {
+        const posts = localStorage.getItem('posts');
+        return posts ? JSON.parse(posts) : [];
+    }
+
+    function savePosts(posts) {
+        localStorage.setItem('posts', JSON.stringify(posts));
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const reactions = getReactions();
+        const posts = getPosts();
+
+        // Load posts from localStorage
+        posts.forEach(post => {
+            createPostElement(post.username, post.content, post.id);
+        });
+
+        document.querySelectorAll('.post').forEach(postElement => {
+            const postId = postElement.getAttribute('data-post-id');
+            const postReactions = reactions[postId] || { thumbsUp: 0, heart: 0, fire: 0 };
+
+            postElement.querySelector('.thumbsUp-count').textContent = postReactions.thumbsUp;
+            postElement.querySelector('.heart-count').textContent = postReactions.heart;
+            postElement.querySelector('.fire-count').textContent = postReactions.fire;
+        });
+    });
+
+    function addReaction(postId, reactionType) {
+        const reactions = getReactions();
+
+        if (!reactions[postId]) {
+            reactions[postId] = { thumbsUp: 0, heart: 0, fire: 0 };
+        }
+
+        reactions[postId][reactionType]++;
+        saveReactions(reactions);
+
+        const postElement = document.querySelector(`[data-post-id="${postId}"]`);
+        const countElement = postElement.querySelector(`.${reactionType}-count`);
+        countElement.textContent = reactions[postId][reactionType];
+    }
+
+    function createPostElement(username, content, postId) {
+        // Create a new post element
+        const newPost = document.createElement('div');
+        newPost.className = 'post';
+        newPost.setAttribute('data-post-id', postId);
+        newPost.innerHTML = `
+            <div class="post-header">
+                <div class="post-icon"></div>
+                <span class="post-username">${username}</span>
+            </div>
+            <p>${content}</p>
+            <div class="reaction-icons">
+                <span class="emoji" onclick="addReaction('${postId}', 'thumbsUp')">👍 <span class="thumbsUp-count">0</span></span>
+                <span class="emoji" onclick="addReaction('${postId}', 'heart')">❤️ <span class="heart-count">0</span></span>
+                <span class="emoji" onclick="addReaction('${postId}', 'fire')">🔥 <span class="fire-count">0</span></span>
+            </div>
+        `;
+
+        // Append the new post to the posts wrapper
+        document.getElementById('postsWrapper').prepend(newPost); // Add to the top
+    }
+
+    // Handle post submission
+    document.getElementById('postForm').addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent page refresh
+
+        const roleSelect = document.getElementById('roleSelect');
+        const postInput = document.getElementById('postInput');
+        const selectedRole = roleSelect.value; // Get selected role
+        const newPostContent = postInput.value;
+
+        // Create a unique ID based on timestamp
+        const newPostId = Date.now();
+
+        // Save the new post to localStorage
+        const posts = getPosts();
+        posts.push({ id: newPostId, username: selectedRole, content: newPostContent });
+        savePosts(posts);
+
+        // Create and display the new post
+        createPostElement(selectedRole, newPostContent, newPostId);
+
+        // Clear the input
+        // Clear the input fields
+        postInput.value = '';
+        roleSelect.selectedIndex = 0; // Reset to default
+    });
+
+    // Handle message submission
+    document.getElementById('messageForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+        const messageInput = document.getElementById('messageInput');
+        const messageContent = messageInput.value;
+
+        // Create a new message element
+        const newMessage = document.createElement('div');
+        newMessage.textContent = messageContent;
+        document.getElementById('chatArea').appendChild(newMessage);
+
+        // Clear the input field
+        messageInput.value = '';
+    });
+</script>