From 4b62711fc9085dc3435dbd4dbd8db832832279d9 Mon Sep 17 00:00:00 2001 From: Yarles Date: Sun, 4 Aug 2024 18:41:19 -0500 Subject: [PATCH 1/2] final changes --- index.html | 61 +++++++++++++++++------------ main.js | 112 ++++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 65 +++++++++++++++++++++++++++++++ 3 files changed, 212 insertions(+), 26 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 14c8748..3ae1f29 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,54 @@ Forum - + + + + +
-
- -
-

Forum

+
+
+
+

Add a New Post

+
+
+ + +
+
+ + +
+
+ + + + +
+ View Posts +
+
-
-
+ +
-
-

Add a new post

- -
- -
- -
- -
- - -
+
+ Back to Form +
- + + + + + diff --git a/main.js b/main.js index 851493a..c62c64d 100644 --- a/main.js +++ b/main.js @@ -1 +1,111 @@ -// your code here \ No newline at end of file +console.clear(); + +const nameInput = document.getElementById("name"); +const postInput = document.getElementById("message"); +const submitButton = document.getElementById("submit"); +const viewPostsButton = document.getElementById("viewPosts"); +const backToFormButton = document.getElementById("backToForm"); +let posts = document.getElementById("posts"); +let addPostCard = document.getElementById("postCard"); + +function createElement(tag, innerText, className) { + let newElement = document.createElement(tag.toString()); + newElement.innerText = innerText; + if (className) { + newElement.classList.add(className); + } + return newElement; +} + +function addPost(e) { + e.preventDefault(); // Prevent default form submission behavior + let name = nameInput.value; + let text = postInput.value; + + if (name !== "" && text !== "") { + let postContainer = createElement("div", null, "post-container"); + let postHeader = createElement("div", null, "post-header"); + let postBody = createElement("div", null, "post-body"); + + let nameElement = createElement("h5", name, null); + let textElement = createElement("p", text, null); + let removeButton = createElement("a", " Remove ", "btn-link"); + let editButton = createElement("a", " Edit ", "btn-link"); + let viewComments = createElement("a", " View Replies ", "btn-link"); + let replyContainer = createElement('div', null, 'reply-container'); + let replyInput = createElement('input', null, 'reply-input'); + let submitReplyButton = createElement('a', " Reply ", "btn-link"); + + let replyCount = 0; // Initialize reply count + + function updateReplyCount() { + viewComments.innerText = `View (${replyCount}) Replies`; + if (replyCount === 0) { + viewComments.innerText = "Replies"; + } + } + + // Remove button + removeButton.addEventListener("click", () => { + postContainer.remove(); + }); + + // Edit button + editButton.addEventListener('click', () => { + let editedComment = prompt('Edit comment:'); + textElement.innerText = editedComment; + }); + + // View comments button + viewComments.addEventListener('click', () => { + replyContainer.classList.toggle('hide'); + }); + + // Submit reply button + submitReplyButton.addEventListener('click', () => { + if (replyInput.value !== '') { + let reply = createElement('div', replyInput.value, 'reply'); + replyContainer.appendChild(reply); + replyInput.value = ''; + replyCount++; + updateReplyCount(); + } + }); + + postHeader.appendChild(nameElement); + postHeader.appendChild(removeButton); + postHeader.appendChild(editButton); + postHeader.appendChild(viewComments); + + postBody.appendChild(textElement); + postBody.appendChild(replyContainer); + postBody.appendChild(replyInput); + postBody.appendChild(submitReplyButton); + + postContainer.appendChild(postHeader); + postContainer.appendChild(postBody); + + posts.appendChild(postContainer); + + // Clear inputs + nameInput.value = ""; + postInput.value = ""; + } +} + +submitButton.addEventListener("click", addPost); + +// Hide/show functionality for 'viewPosts' and 'backToForm' buttons +viewPostsButton.addEventListener('click', () => { + addPostCard.classList.add('hide'); + posts.classList.remove('hide'); + backToFormButton.classList.remove('hide'); + viewPostsButton.classList.add('hide'); +}); + +backToFormButton.addEventListener('click', () => { + addPostCard.classList.remove('hide'); + posts.classList.add('hide'); + backToFormButton.classList.add('hide'); + viewPostsButton.classList.remove('hide'); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..483df13 --- /dev/null +++ b/styles.css @@ -0,0 +1,65 @@ +.card-content { + padding: 20px; +} + +.post-container { + margin-top: 20px; + padding: 15px; + border-radius: 8px; + background-color: #f9f9f9; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.post-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ddd; + padding-bottom: 10px; +} + +.post-body { + margin-top: 10px; +} + +.reply-container { + margin-top: 20px; + padding: 10px; + border-top: 1px solid #ddd; + background-color: #f0f0f0; +} + +.reply-input { + margin-top: 10px; +} + +.reply { + margin-top: 10px; + padding: 8px; + border-radius: 4px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.btn-floating { + margin: 10px; +} + +.center { + display: flex; + justify-content: center; +} + +.hide { + display: none; +} + +.btn-link { + background-color: transparent; + color: #0277bd; + font-size: 14px; + font-weight: bold; + border: none; + text-decoration: underline; + cursor: pointer; +} From ec2f47fda4d3a69259ced88a20da1da2829ee225 Mon Sep 17 00:00:00 2001 From: Yarles Date: Sun, 4 Aug 2024 18:49:24 -0500 Subject: [PATCH 2/2] Ready for Eval --- main.js | 1 + styles.css | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/main.js b/main.js index c62c64d..6560c60 100644 --- a/main.js +++ b/main.js @@ -15,6 +15,7 @@ function createElement(tag, innerText, className) { newElement.classList.add(className); } return newElement; + ; } function addPost(e) { diff --git a/styles.css b/styles.css index 483df13..405beef 100644 --- a/styles.css +++ b/styles.css @@ -63,3 +63,13 @@ text-decoration: underline; cursor: pointer; } +.red-orange { + color: orangered; + font-size: 10px; + font-weight: 700; +} +.purple { + color: blueviolet; + font-size: 10px; + font-weight: 700; +}