diff --git a/main.js b/main.js
index 0eda4f23..0c4a94a9 100644
--- a/main.js
+++ b/main.js
@@ -1,21 +1,37 @@
//Event listener for clicking on submit button
document.getElementById('submit').addEventListener('click', function () {
- var name = document.getElementById('name').value;
- var text = document.getElementById('message').value;
+ const name = document.getElementById('name').value;
+ const text = document.getElementById('message').value;
- var postsDiv = document.querySelector('.posts');
+ const postsDiv = document.querySelector('.posts');
- var newPostDiv = document.createElement('div');
+ //Create wrapper for individual post
+ const newPostDiv = document.createElement('div');
- var newPostP = document.createElement('p');
- var newPostNode = document.createTextNode(`${text} - Posted By: ${name}`);
+ //Create
and text node for post
+ const newPostP = document.createElement('p');
+ const newPostNode = document.createTextNode(`${text} - Posted By: ${name}`);
newPostP.appendChild(newPostNode);
- var newPostHR = document.createElement('hr');
+ //Create remove button
+ const removeButton = document.createElement('button');
+ removeButton.textContent = 'Remove Post';
+ //Create comments button
+ const commentButton = document.createElement('button');
+ commentButton.textContent = 'See Comments';
+
+ //Create
+ const newPostHR = document.createElement('hr');
+
+ //Append the remove link, post, and hr to the post div
+ newPostDiv.append(removeButton);
+ newPostDiv.append(commentButton);
newPostDiv.append(newPostP);
newPostDiv.append(newPostHR);
+ //Append the post to postDiv
postsDiv.append(newPostDiv);
+
})
\ No newline at end of file
From 7511aa19af913bcd18e5a2eb03fbbaee52c70595 Mon Sep 17 00:00:00 2001
From: Shiva Bodhireddy <{ID}+{username}@users.noreply.github.com>
Date: Fri, 28 Mar 2025 11:20:23 -0700
Subject: [PATCH 4/4] Added post, comment and remove functionality
---
main.js | 143 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 file changed, 118 insertions(+), 25 deletions(-)
diff --git a/main.js b/main.js
index 0c4a94a9..855fd9ff 100644
--- a/main.js
+++ b/main.js
@@ -1,37 +1,130 @@
-//Event listener for clicking on submit button
+// Handle new post submission
document.getElementById('submit').addEventListener('click', function () {
- const name = document.getElementById('name').value;
- const text = document.getElementById('message').value;
+ // Get and trim input values
+ const name = document.getElementById('name').value.trim();
+ const text = document.getElementById('message').value.trim();
+
+ // Clear inputs
+ document.getElementById('name').value = '';
+ document.getElementById('message').value = '';
+
+ // Validate input
+ if (!name || !text) {
+ alert("Please fill out both fields!");
+ return;
+ }
+
+ // Create post
const postsDiv = document.querySelector('.posts');
- //Create wrapper for individual post
- const newPostDiv = document.createElement('div');
+ // Post container
+ const postPanel = document.createElement('div');
+ postPanel.className = 'panel panel-default';
+
+ const postBody = document.createElement('div');
+ postBody.className = 'panel-body';
+
+ // Post content
+ const postText = document.createElement('p');
+ postText.textContent = `${text} - Posted By: ${name}`;
+ postText.style.marginTop = '10px';
+ postText.style.marginBottom = '15px';
+
+ // Action buttons
+ const removeButton = document.createElement('button');
+ removeButton.textContent = 'Remove Post';
+ removeButton.className = 'btn btn-danger btn-xs';
+
+ const commentButton = document.createElement('button');
+ commentButton.textContent = 'Comments';
+ commentButton.className = 'btn btn-default btn-xs';
+
+ //Create comment section
+
+ const commentsDiv = document.createElement('div');
+ commentsDiv.style.display = 'none';
+
+ const commentsList = document.createElement('div');
+ commentsList.style.marginTop = '10px';
+
+ const commentInput = document.createElement('input');
+ commentInput.className = 'form-control';
+ commentInput.placeholder = 'Comment';
+
+ const nameInput = document.createElement('input');
+ nameInput.className = 'form-control';
+ nameInput.placeholder = 'Your Name';
+
+ const postCommentButton = document.createElement('button');
+ postCommentButton.textContent = 'Post';
+ postCommentButton.className = 'btn btn-primary btn-sm';
+
+ // Assemble comment section
+ commentsDiv.appendChild(commentsList);
+ commentsDiv.appendChild(commentInput);
+ commentsDiv.appendChild(nameInput);
+ commentsDiv.appendChild(postCommentButton);
+
+ // Assemble post
+ postBody.appendChild(removeButton);
+ postBody.appendChild(commentButton);
+ postBody.appendChild(postText);
+ postBody.appendChild(commentsDiv);
+
+ postPanel.appendChild(postBody);
+ postsDiv.appendChild(postPanel);
+
+ // Buttons
+
+ // Remove entire post
+ removeButton.addEventListener('click', function () {
+ postPanel.remove();
+ });
+
+ // Toggle comment section
+ commentButton.addEventListener('click', function () {
+ commentsDiv.style.display = (commentsDiv.style.display === 'none') ? 'block' : 'none';
+ });
- //Create
and text node for post
- const newPostP = document.createElement('p');
- const newPostNode = document.createTextNode(`${text} - Posted By: ${name}`);
- newPostP.appendChild(newPostNode);
+ // Handle comment submission
+ postCommentButton.addEventListener('click', function () {
+ const commentText = commentInput.value.trim();
+ const commenterName = nameInput.value.trim();
- //Create remove button
- const removeButton = document.createElement('button');
- removeButton.textContent = 'Remove Post';
+ // Validate comment input
+ if (!commentText || !commenterName) {
+ alert("Please fill out both fields!");
+ return;
+ }
- //Create comments button
- const commentButton = document.createElement('button');
- commentButton.textContent = 'See Comments';
+ // Add well for first comment
+ if (commentsList.children.length === 0) {
+ commentsList.className = 'well well-sm';
+ }
- //Create
- const newPostHR = document.createElement('hr');
+ // Create comment element
+ const comment = document.createElement('p');
+ comment.textContent = `${commentText} - Posted By: ${commenterName}`;
- //Append the remove link, post, and hr to the post div
- newPostDiv.append(removeButton);
- newPostDiv.append(commentButton);
- newPostDiv.append(newPostP);
- newPostDiv.append(newPostHR);
+ // Create remove link for comment
+ const removeLink = document.createElement('a');
+ removeLink.href = '#';
+ removeLink.textContent = ' x';
+ removeLink.style.marginLeft = '10px';
+ removeLink.style.color = 'red';
+ removeLink.style.cursor = 'pointer';
- //Append the post to postDiv
- postsDiv.append(newPostDiv);
+ removeLink.addEventListener('click', function (e) {
+ e.preventDefault();
+ comment.remove();
+ });
+ comment.appendChild(removeLink);
+ commentsList.appendChild(comment);
-})
\ No newline at end of file
+ // Clear comment inputs
+ commentInput.value = '';
+ nameInput.value = '';
+ });
+});
\ No newline at end of file