diff --git a/index.html b/index.html new file mode 100644 index 00000000..df0ea534 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + Forum + + + + +
+
+ + + +
+
+
+
+

Add a new post

+ +
+ +
+ +
+ +
+ + + + +
+
+ + +
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..9db2579f --- /dev/null +++ b/main.js @@ -0,0 +1,185 @@ +let button = document.getElementById('postSubmit'); + +// Post submit button event listener +button.addEventListener('click', function () { + let usersName = document.getElementById('users-name').value; + let usersPost = document.getElementById('users-post').value; + + // Ensures both fields are filled out + if (!usersName || !usersPost) { + alert("Please fill out both the name and the post fields."); + return; + } + + // Wrapper div for grouping all post-related elements + let postWrapper = document.createElement('div'); + postWrapper.classList.add('post-wrapper'); + postWrapper.style.marginBottom = '20px'; // Optional spacing between posts + + // Post formatting (Name & Post Text) + // Create the new blockquote element + let newPostDivBlockQuote = document.createElement('blockquote'); + + // Creates the

element for the post text + let postP = document.createElement('p'); + postP.textContent = usersPost; + + // Creates the element for the user's name + let small = document.createElement('small'); + small.textContent = `Posted By: ${usersName}`; + + // Create the Delete button for the post + let deletePostButton = document.createElement('button'); + deletePostButton.textContent = 'Delete Post'; + deletePostButton.classList.add('btn', 'btn-danger', 'btn-xs'); + deletePostButton.style.marginTop = '10px'; + + // Add functionality to delete the entire post + deletePostButton.addEventListener('click', function () { + postWrapper.remove(); // Remove the entire wrapper (all related elements) + }); + + // Appends the

and elements to the blockquote + newPostDivBlockQuote.appendChild(postP); + newPostDivBlockQuote.appendChild(small); + + // Create the comment thread

element + let commentsThread = document.createElement('div'); + commentsThread.classList.add('comments-thread'); + + // Initially, comments thread is hidden + commentsThread.style.display = 'none'; + + // Creates for the commenter's name + let commenterNameInput = document.createElement('input'); + commenterNameInput.type = 'text'; + commenterNameInput.placeholder = 'Your name...'; + commenterNameInput.classList.add('form-control', 'commenter-name-input'); + commenterNameInput.style.marginBottom = '10px'; + + // Creates element field to the comment thread + let commentInput = document.createElement('input'); + commentInput.type = 'text'; + commentInput.placeholder = 'Your comment here...'; + commentInput.classList.add('form-control', 'comment-input'); + commentInput.style.marginBottom = '10px'; + + // Creates 'Add Comment' button within the comment thread + let addCommentButton = document.createElement('button'); + addCommentButton.textContent = 'Add Comment'; + addCommentButton.classList.add('btn', 'btn-success', 'add-comment-btn'); + addCommentButton.style.marginBottom = '10px'; + + let commentsList = document.createElement('ul'); + commentsList.classList.add('comments-list'); + commentsList.style.listStyleType = 'none'; + commentsList.style.padding = '0'; + + // Create a title for the comments thread + let commentTitle = document.createElement('h4'); + commentTitle.textContent = 'Comments Thread'; + commentTitle.style.marginTop = '10px'; + commentTitle.style.marginBottom = '10px'; + commentTitle.style.display = 'none'; // Initially hidden + + addCommentButton.addEventListener('click', function () { + let commentText = commentInput.value.trim(); + let commenterName = commenterNameInput.value.trim(); + + if (commentText && commenterName) { + // Create the blockquote element + let commentBlockquote = document.createElement('blockquote'); + // Adds right-aligned styling + commentBlockquote.classList.add('blockquote-reverse'); + + // Creates the

for the comment text + let commentP = document.createElement('p'); + commentP.textContent = `${commentText}`; + + // Create the