From 7931864df2410b1264c252ddca2f8d2bb5869b44 Mon Sep 17 00:00:00 2001 From: Benjamin Workman Date: Mon, 13 Apr 2026 07:16:21 -0400 Subject: [PATCH 1/3] First Commit with Fully Working App --- index.html | 53 ++++++++++++++++++++++ main.js | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 19 ++++++++ 3 files changed, 202 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..46a76119 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + + + Reddit Forum + + +
+
+
+
+

ReReddit

+
+ + + +
+ +
+ +
+ + + + +
+ +
+ +
+ +
+ + + + +
+
+
+
+ + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..6b4b5c05 --- /dev/null +++ b/main.js @@ -0,0 +1,130 @@ +let leavePost = function () { + const name = document.getElementById("your-name").value; + const message = document.getElementById("message").value; + + const postDiv = document.querySelector(".post-master"); + let newPostDiv = document.createElement("div"); + newPostDiv.className = "post"; + + let removeLink = document.createElement("button"); + let commentsLink = document.createElement("button"); + removeLink.textContent = "remove"; + commentsLink.textContent = "comments"; + + removeLink.className = "btn btn-link remove-post"; + commentsLink.className = "btn btn-link comments"; + removeLink.style.marginRight = "10px"; + commentsLink.style.marginRight = "10px"; + + const newPostP = document.createElement("span"); + const newPostTextNode = document.createTextNode( + `${message} - Posted By: ${name}`, + ); + + newPostP.appendChild(newPostTextNode); + + let newPostHR = document.createElement("hr"); + + if (name.length > 0 && message.length > 0) { + newPostDiv.append(newPostHR); + newPostDiv.append(removeLink); + newPostDiv.append(commentsLink); + newPostDiv.append(newPostP); + + postDiv.append(newPostDiv); + + //Create Ordered List attached to this post + let newPostDiv2 = document.createElement("div"); + let commentList = document.createElement("ul"); + + newPostDiv2.className = "comment-list"; + commentList.className = "ordered-list"; + newPostDiv2.append(commentList); + newPostDiv.append(newPostDiv2); + + newPostDiv2.innerHTML += ` +
+ +
+ +
+ +
+ +
+ + + +
+`; + } +}; + +document.querySelector("#submit").addEventListener("click", function () { + leavePost(); + + document.getElementById("your-name").value = ""; + document.getElementById("message").value = ""; +}); + +document.querySelector(".post-master").addEventListener("click", function (e) { + if (e.target.classList.contains("remove-post")) { + e.target.closest(".post").remove(); + } +}); + +//Toggle Comments on and Off +document.querySelector(".post-master").addEventListener("click", function (e) { + if (e.target.classList.contains("comments")) { + const post = e.target.closest(".post"); + + const commentList = post.querySelector(".comment-list"); + + commentList.classList.toggle("show"); + } +}); + +//Leave New Comment on Post +document.querySelector(".post-master").addEventListener("click", function (e) { + if (e.target.classList.contains("submit-comment")) { + const post = e.target.closest(".post"); + + const commentName = post.querySelector("#comment-name").value; + const commentText = post.querySelector("#comment-text").value; + + const postUl = post.querySelector(".ordered-list"); + let newPostLi = document.createElement("li"); + newPostLi.className = "post"; + + let removeLink = document.createElement("button"); + removeLink.textContent = "remove"; + + removeLink.className = "btn btn-link remove-post"; + removeLink.style.marginRight = "10px"; + + const newPostP = document.createElement("span"); + newPostP.textContent = `${commentText} - Posted By: ${commentName}`; + + let newPostHR = document.createElement("hr"); + + if (commentName.length > 0 && commentText.length > 0) { + newPostLi.append(newPostHR); + newPostLi.append(removeLink); + newPostLi.append(newPostP); + + postUl.append(newPostLi); + + //Prevent Reassignment Resulting in Error + if (postUl.querySelectorAll("li").length > 0) { + postUl.classList.add("posts-plus"); + } + + post.querySelector("#comment-name").value = ""; + post.querySelector("#comment-text").value = ""; + } + } +}); diff --git a/style.css b/style.css new file mode 100644 index 00000000..2ec19230 --- /dev/null +++ b/style.css @@ -0,0 +1,19 @@ +.post hr { + margin-top: 10px; + margin-bottom: 10px; + border-top: 1px solid #ccc; +} + +ul { + padding-left: 0px; + margin: 0px; + list-style: none; +} + +.comment-list { + display: none; +} + +.comment-list.show { + display: block !important; +} From 173a983a6a5f0417fef34103d9cbb98afdbc98b3 Mon Sep 17 00:00:00 2001 From: Benjamin Workman Date: Wed, 15 Apr 2026 22:06:06 -0400 Subject: [PATCH 2/3] Second Commit --- index.html | 68 +++++++++++++------------ main.js | 146 ++++++++++++++++++++++++++++++++++++++++++----------- style.css | 34 +++++++++++++ 3 files changed, 188 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 46a76119..3ce702e6 100644 --- a/index.html +++ b/index.html @@ -3,51 +3,57 @@ + rel="stylesheet" + /> - + Reddit Forum -
-
-
-
-

ReReddit

-
+
+
+
+
+

ReReddit

+
+
+
+ +
+
+
+
+
+ +
-
- -
- - - - - +
+ +
-
- -
+ +
-
- +
+
+
- - - - -
-
+ diff --git a/main.js b/main.js index 6b4b5c05..5b00cd1b 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,18 @@ +let count = 0; +let postList = []; + let leavePost = function () { const name = document.getElementById("your-name").value; const message = document.getElementById("message").value; const postDiv = document.querySelector(".post-master"); let newPostDiv = document.createElement("div"); - newPostDiv.className = "post"; + + //Identifier for Each Post & Array Tracker + count += 1; + newPostDiv.className = "main-post"; + newPostDiv.dataset.index = count; + postList.push(count); let removeLink = document.createElement("button"); let commentsLink = document.createElement("button"); @@ -17,6 +25,7 @@ let leavePost = function () { commentsLink.style.marginRight = "10px"; const newPostP = document.createElement("span"); + newPostP.className = "span-class"; const newPostTextNode = document.createTextNode( `${message} - Posted By: ${name}`, ); @@ -25,6 +34,7 @@ let leavePost = function () { let newPostHR = document.createElement("hr"); + //Check if the boxes have text if (name.length > 0 && message.length > 0) { newPostDiv.append(newPostHR); newPostDiv.append(removeLink); @@ -43,66 +53,103 @@ let leavePost = function () { newPostDiv.append(newPostDiv2); newPostDiv2.innerHTML += ` +
-
-
+ `; + } else { + alert("Enter your Name & a Post!"); } }; document.querySelector("#submit").addEventListener("click", function () { leavePost(); + //Reset document.getElementById("your-name").value = ""; document.getElementById("message").value = ""; }); -document.querySelector(".post-master").addEventListener("click", function (e) { - if (e.target.classList.contains("remove-post")) { - e.target.closest(".post").remove(); - } +//Add show class to post-list view +document.querySelector(".back-button").addEventListener("click", function () { + document.querySelector(".single-post-view").classList.remove("show"); + document.querySelector(".main-list-view").classList.add("show"); }); -//Toggle Comments on and Off +function openSinglePostView(index) { + const mainListView = document.querySelector(".main-list-view"); + const singlePostView = document.querySelector(".single-post-view"); + const singlePostContainer = document.querySelector(".single-post-container"); + + const originalPost = document.querySelector( + `.main-post[data-index="${index}"]`, + ); + + const clonedPost = originalPost.cloneNode(true); + + const commentList = clonedPost.querySelector(".comment-list"); + if (commentList) { + commentList.classList.add("show"); + } + + //Remove form + const form = clonedPost.querySelector(".form-group"); + if (form) { + form.remove(); + form.remove(); + } + + singlePostContainer.innerHTML = ""; + singlePostContainer.appendChild(clonedPost); + + singlePostView.classList.add("show"); + mainListView.classList.remove("show"); +} + document.querySelector(".post-master").addEventListener("click", function (e) { - if (e.target.classList.contains("comments")) { - const post = e.target.closest(".post"); + const selectedPost = e.target.closest(".main-post"); + const removePost = e.target.closest(".remove-post"); + const commentBtn = e.target.closest(".comments"); + const submitComment = e.target.closest(".submit-comment"); + const formControl = e.target.closest(".form-control"); + + if (removePost) { + removePost.closest(".main-post").remove(); + return; + } + if (commentBtn) { + const post = commentBtn.closest(".main-post"); const commentList = post.querySelector(".comment-list"); - commentList.classList.toggle("show"); + return; } -}); -//Leave New Comment on Post -document.querySelector(".post-master").addEventListener("click", function (e) { - if (e.target.classList.contains("submit-comment")) { - const post = e.target.closest(".post"); + if (submitComment) { + const post = submitComment.closest(".main-post"); - const commentName = post.querySelector("#comment-name").value; - const commentText = post.querySelector("#comment-text").value; + const commentName = post.querySelector(".comment-name").value; + const commentText = post.querySelector(".comment-text").value; const postUl = post.querySelector(".ordered-list"); let newPostLi = document.createElement("li"); - newPostLi.className = "post"; let removeLink = document.createElement("button"); removeLink.textContent = "remove"; - removeLink.className = "btn btn-link remove-post"; removeLink.style.marginRight = "10px"; @@ -115,16 +162,57 @@ document.querySelector(".post-master").addEventListener("click", function (e) { newPostLi.append(newPostHR); newPostLi.append(removeLink); newPostLi.append(newPostP); - postUl.append(newPostLi); - //Prevent Reassignment Resulting in Error - if (postUl.querySelectorAll("li").length > 0) { - postUl.classList.add("posts-plus"); + post.querySelector(".comment-name").value = ""; + post.querySelector(".comment-text").value = ""; + } else { + alert("Enter your Name & a Comment!"); + } + + return; + } + + const span = e.target.closest(".span-class"); + + //Post Editor + if (span) { + const textArea = document.createElement("textarea"); + textArea.placeholder = "Edit Post Text"; + textArea.className = "form-control"; + + const nameInput = document.createElement("input"); + nameInput.type = "text"; + nameInput.placeholder = "Edit Post Name"; + nameInput.className = "form-control"; + + span.replaceWith(textArea); + textArea.after(nameInput); + + const submitEdit = function () { + if (textArea.value.length > 0 && nameInput.value.length > 0) { + const newText = `${textArea.value} - Posted By: ${nameInput.value}`; + span.textContent = newText; + textArea.replaceWith(span); + nameInput.remove(); + } else { + alert("Enter a name and text!"); } + }; + + [textArea, nameInput].forEach(function (i) { + i.addEventListener("keydown", function (e) { + if (e.key === "Enter") { + e.preventDefault(); + submitEdit(); + } + }); + }); + + return; + } - post.querySelector("#comment-name").value = ""; - post.querySelector("#comment-text").value = ""; - } + if (selectedPost && !formControl) { + openSinglePostView(selectedPost.dataset.index); } }); diff --git a/style.css b/style.css index 2ec19230..1db2f93e 100644 --- a/style.css +++ b/style.css @@ -17,3 +17,37 @@ ul { .comment-list.show { display: block !important; } + +.main-list-view, +.single-post-view { + display: none; +} + +.main-list-view.show, +.single-post-view.show { + display: block !important; +} + +.post, +.ordered-list, +.comment-list form, +.comment-list .form-group, +.comment-list textarea, +.comment-list input { + width: 100%; + display: block; + box-sizing: border-box; +} + +li { + float: none; +} + +.submit-comment { + margin-bottom: 30px; +} + +.span-class:hover { + color: red; + cursor: pointer; +} From 456dd723e9d461707cd1eb64abf173d57160cb9d Mon Sep 17 00:00:00 2001 From: Benjamin Workman Date: Thu, 16 Apr 2026 22:09:32 -0400 Subject: [PATCH 3/3] Third commit- All Functionality --- main.js | 42 ++++++++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/main.js b/main.js index 5b00cd1b..f6a24c7f 100644 --- a/main.js +++ b/main.js @@ -54,6 +54,7 @@ let leavePost = function () { newPostDiv2.innerHTML += ` +
@@ -69,6 +70,7 @@ let leavePost = function () { +
`; } else { @@ -90,29 +92,28 @@ document.querySelector(".back-button").addEventListener("click", function () { document.querySelector(".main-list-view").classList.add("show"); }); -function openSinglePostView(index) { +function openSinglePostView(originalPost) { const mainListView = document.querySelector(".main-list-view"); const singlePostView = document.querySelector(".single-post-view"); const singlePostContainer = document.querySelector(".single-post-container"); - const originalPost = document.querySelector( - `.main-post[data-index="${index}"]`, - ); - const clonedPost = originalPost.cloneNode(true); - const commentList = clonedPost.querySelector(".comment-list"); - if (commentList) { - commentList.classList.add("show"); - } + const commentText = clonedPost.querySelector(".comment-text"); + const forms = clonedPost.querySelector(".forms"); + const removeLink = clonedPost.querySelectorAll(".remove-post"); + const commentsLink = clonedPost.querySelector(".comments"); - //Remove form - const form = clonedPost.querySelector(".form-group"); - if (form) { - form.remove(); - form.remove(); + if (commentText) { + commentText.remove(); + forms.remove(); + commentsLink.remove(); } + removeLink.forEach(function (link) { + link.remove(); + }); + singlePostContainer.innerHTML = ""; singlePostContainer.appendChild(clonedPost); @@ -128,7 +129,15 @@ document.querySelector(".post-master").addEventListener("click", function (e) { const formControl = e.target.closest(".form-control"); if (removePost) { - removePost.closest(".main-post").remove(); + const commentItem = removePost.closest("li"); + const mainPost = removePost.closest(".main-post"); + + if (commentItem) { + commentItem.remove(); + } else if (mainPost) { + mainPost.remove(); + } + return; } @@ -147,6 +156,7 @@ document.querySelector(".post-master").addEventListener("click", function (e) { const postUl = post.querySelector(".ordered-list"); let newPostLi = document.createElement("li"); + newPostLi.classList.add("li-post"); let removeLink = document.createElement("button"); removeLink.textContent = "remove"; @@ -213,6 +223,6 @@ document.querySelector(".post-master").addEventListener("click", function (e) { } if (selectedPost && !formControl) { - openSinglePostView(selectedPost.dataset.index); + openSinglePostView(selectedPost); } });