From 4ed7a7c2b207c790fae8735e471899501dfa0099 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Mon, 29 Jul 2024 17:14:35 -0400 Subject: [PATCH 01/13] initial commit --- index.html | 1 + main.js | 0 style.css | 1 + 3 files changed, 2 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..8b137891 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ + diff --git a/main.js b/main.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/style.css @@ -0,0 +1 @@ + From ca8ac941b76458e22e50dce269f0666571500c4f Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Mon, 29 Jul 2024 17:15:08 -0400 Subject: [PATCH 02/13] create html boilerplate, link css and js files --- index.html | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8b137891..10517612 100644 --- a/index.html +++ b/index.html @@ -1 +1,19 @@ - + + + + + + + + ReReddit + + +

Hello world!

+ + + From 1c6fd6687d82e098c11efe688255d301faf2920b Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 12:14:07 -0400 Subject: [PATCH 03/13] create basic forum page with inputs for posts and name --- index.html | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 10517612..77aa1ceb 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,32 @@ ReReddit -

Hello world!

+
+
+ +
+

ReReddit

+
+
+
+ +
+
+ +
+
+ +
+ + +
+ +
+
From 99214d367891ffb9a40f352a76c074456b9062de Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 12:14:42 -0400 Subject: [PATCH 04/13] display user posts when submit button is clicked --- main.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/main.js b/main.js index e69de29b..4b4e5ef4 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,15 @@ +const userName = document.getElementById("name"); +const userPost = document.getElementById("post"); +const submit = document.getElementById("submit"); +const posts = document.getElementsByClassName("posts")[0]; + +submit.addEventListener("click", onSubmit); + +function onSubmit() { + let post = document.createElement("p"); + post.textContent = `${userPost.value} - Posted By: ${userName.value}`; + post.classList.add("border-bottom"); + posts.appendChild(post); + userName.value = ""; + userPost.value = ""; +} From 7111e20ac268a8dc95b4a9b1fa9e3e1eb30f84d2 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 12:15:06 -0400 Subject: [PATCH 05/13] add bottom border to posts --- style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 8b137891..2c6d31ca 100644 --- a/style.css +++ b/style.css @@ -1 +1,4 @@ - +.border-bottom { + border-bottom: 1px solid #eeecec; + padding-bottom: 1em; +} From cd9b1af867646ced9b8c46f535a305b9109c048d Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 22:23:31 -0400 Subject: [PATCH 06/13] add required validation to inputs --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 77aa1ceb..00827400 100644 --- a/index.html +++ b/index.html @@ -26,12 +26,12 @@

ReReddit

+ placeholder="Post Text" required>
+ placeholder="Your Name" required>
From 193b665d258690810f77fbafb306855dd15fc6ab Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 22:24:23 -0400 Subject: [PATCH 07/13] display comments on post --- main.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 67 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index 4b4e5ef4..1b670103 100644 --- a/main.js +++ b/main.js @@ -6,10 +6,71 @@ const posts = document.getElementsByClassName("posts")[0]; submit.addEventListener("click", onSubmit); function onSubmit() { - let post = document.createElement("p"); - post.textContent = `${userPost.value} - Posted By: ${userName.value}`; - post.classList.add("border-bottom"); - posts.appendChild(post); - userName.value = ""; - userPost.value = ""; + if (userName.value === "" || userPost.value === "") { + alert("Please fill out both fields before submitting"); + } else { + const post = document.createElement("div"); + const postText = document.createElement("p"); + const comments = document.createElement("div"); + + postText.textContent = `${userPost.value} - Posted By: ${userName.value}`; + post.classList.add("border-bottom"); + posts.appendChild(post); + post.appendChild(postText); + post.appendChild(comments); + userName.value = ""; + userPost.value = ""; + + // const displayComments = document.createElement("a"); + // displayComments.textContent = "comments"; + // post.appendChild(displayComments); + // displayComments.addEventListener("click", function () { + // if (commentsForm.classList.contains("hide")) { + // commentsForm.classList.remove("hide"); + // } else { + // commentsForm.classList.add("hide"); + // } + // }); + + // const removePost = document.createElement("a"); + // removePost.textContent = "remove"; + // post.appendChild(removePost); + // removePost.addEventListener("click", function () { + // post.remove(); + // }); + + // TODO: add collapsible comment form to each post + const commentsForm = document.createElement("form"); + const commentTextContainer = document.createElement("div"); + const commentNameContainer = document.createElement("div"); + const commentText = document.createElement("input"); + const commentName = document.createElement("input"); + const commentSubmit = document.createElement("button"); + + commentText.type = "text"; + commentName.type = "text"; + commentText.setAttribute("placeholder", "Comment Text"); + commentName.setAttribute("placeholder", "Your Name"); + commentTextContainer.classList.add("form-group"); + commentNameContainer.classList.add("form-group"); + commentSubmit.textContent = "Submit Comment"; + commentText.classList.add("form-control"); + commentName.classList.add("form-control"); + commentSubmit.classList.add("btn"); + commentSubmit.classList.add("btn-primary"); + + commentSubmit.addEventListener("click", function (event) { + event.preventDefault(); + const comment = document.createElement("p"); + comment.textContent = `${commentText.value} - Posted By: ${commentName.value}`; + comments.appendChild(comment); + }); + + post.appendChild(commentsForm); + commentsForm.appendChild(commentTextContainer); + commentsForm.appendChild(commentNameContainer); + commentTextContainer.appendChild(commentText); + commentNameContainer.appendChild(commentName); + commentsForm.appendChild(commentSubmit); + } } From 4e3689a33e26302a1c12e1bf1b96547324581e43 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 22:26:07 -0400 Subject: [PATCH 08/13] toggle comment form visibilty when 'comments' is clicked --- main.js | 20 ++++++++++---------- style.css | 4 ++++ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/main.js b/main.js index 1b670103..6e9167ef 100644 --- a/main.js +++ b/main.js @@ -12,25 +12,25 @@ function onSubmit() { const post = document.createElement("div"); const postText = document.createElement("p"); const comments = document.createElement("div"); + const displayComments = document.createElement("a"); + displayComments.textContent = "comments"; postText.textContent = `${userPost.value} - Posted By: ${userName.value}`; post.classList.add("border-bottom"); posts.appendChild(post); + post.appendChild(displayComments); post.appendChild(postText); post.appendChild(comments); userName.value = ""; userPost.value = ""; - // const displayComments = document.createElement("a"); - // displayComments.textContent = "comments"; - // post.appendChild(displayComments); - // displayComments.addEventListener("click", function () { - // if (commentsForm.classList.contains("hide")) { - // commentsForm.classList.remove("hide"); - // } else { - // commentsForm.classList.add("hide"); - // } - // }); + displayComments.addEventListener("click", function () { + if (commentsForm.classList.contains("hide")) { + commentsForm.classList.remove("hide"); + } else { + commentsForm.classList.add("hide"); + } + }); // const removePost = document.createElement("a"); // removePost.textContent = "remove"; diff --git a/style.css b/style.css index 2c6d31ca..bd71f9b7 100644 --- a/style.css +++ b/style.css @@ -2,3 +2,7 @@ border-bottom: 1px solid #eeecec; padding-bottom: 1em; } + +.hide { + display: none; +} From 5e2a986b7e5f187fdb63735cf17d6af218a5543f Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 22:28:32 -0400 Subject: [PATCH 09/13] remove post when 'remove' is clicked --- main.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/main.js b/main.js index 6e9167ef..4ceac0df 100644 --- a/main.js +++ b/main.js @@ -13,12 +13,15 @@ function onSubmit() { const postText = document.createElement("p"); const comments = document.createElement("div"); const displayComments = document.createElement("a"); + const removePost = document.createElement("a"); displayComments.textContent = "comments"; + removePost.textContent = "remove"; postText.textContent = `${userPost.value} - Posted By: ${userName.value}`; post.classList.add("border-bottom"); posts.appendChild(post); post.appendChild(displayComments); + post.appendChild(removePost); post.appendChild(postText); post.appendChild(comments); userName.value = ""; @@ -32,14 +35,10 @@ function onSubmit() { } }); - // const removePost = document.createElement("a"); - // removePost.textContent = "remove"; - // post.appendChild(removePost); - // removePost.addEventListener("click", function () { - // post.remove(); - // }); + removePost.addEventListener("click", function () { + post.remove(); + }); - // TODO: add collapsible comment form to each post const commentsForm = document.createElement("form"); const commentTextContainer = document.createElement("div"); const commentNameContainer = document.createElement("div"); From a5ec1914612bd4638013b6e98c979c3a50e65b2a Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Tue, 30 Jul 2024 22:33:10 -0400 Subject: [PATCH 10/13] toggle comments visibilty when 'comments' is clicked --- main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 4ceac0df..eba3fa12 100644 --- a/main.js +++ b/main.js @@ -28,9 +28,11 @@ function onSubmit() { userPost.value = ""; displayComments.addEventListener("click", function () { - if (commentsForm.classList.contains("hide")) { + if (comments.classList.contains("hide")) { + comments.classList.remove("hide"); commentsForm.classList.remove("hide"); } else { + comments.classList.add("hide"); commentsForm.classList.add("hide"); } }); From d427382c6d6c80d9f236504ca7c1707d4fe4c7cf Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Wed, 31 Jul 2024 11:02:30 -0400 Subject: [PATCH 11/13] make 'remove' link inline with posts and comments --- main.js | 11 +++++++++-- style.css | 4 ++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index eba3fa12..700c25f3 100644 --- a/main.js +++ b/main.js @@ -10,7 +10,7 @@ function onSubmit() { alert("Please fill out both fields before submitting"); } else { const post = document.createElement("div"); - const postText = document.createElement("p"); + const postText = document.createElement("span"); const comments = document.createElement("div"); const displayComments = document.createElement("a"); const removePost = document.createElement("a"); @@ -20,8 +20,11 @@ function onSubmit() { postText.textContent = `${userPost.value} - Posted By: ${userName.value}`; post.classList.add("border-bottom"); posts.appendChild(post); + post.appendChild(postText); post.appendChild(displayComments); + post.append(" "); post.appendChild(removePost); + post.append(" "); post.appendChild(postText); post.appendChild(comments); userName.value = ""; @@ -62,8 +65,12 @@ function onSubmit() { commentSubmit.addEventListener("click", function (event) { event.preventDefault(); - const comment = document.createElement("p"); + const comment = document.createElement("span"); + const removeComment = document.createElement("a"); comment.textContent = `${commentText.value} - Posted By: ${commentName.value}`; + removeComment.textContent = "remove"; + comments.appendChild(removeComment); + comments.append(" "); comments.appendChild(comment); }); diff --git a/style.css b/style.css index bd71f9b7..6a64e5be 100644 --- a/style.css +++ b/style.css @@ -6,3 +6,7 @@ .hide { display: none; } + +.inline { + display: inline; +} From bcf9b9e6d2728fe4cd7e577cb0701de1b68e4048 Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Wed, 31 Jul 2024 11:08:57 -0400 Subject: [PATCH 12/13] create link break and clear input after comment is posted --- main.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/main.js b/main.js index 700c25f3..6bee0137 100644 --- a/main.js +++ b/main.js @@ -67,11 +67,16 @@ function onSubmit() { event.preventDefault(); const comment = document.createElement("span"); const removeComment = document.createElement("a"); + const lineBreak = document.createElement("br"); comment.textContent = `${commentText.value} - Posted By: ${commentName.value}`; removeComment.textContent = "remove"; comments.appendChild(removeComment); comments.append(" "); comments.appendChild(comment); + comments.appendChild(lineBreak); + + commentName.value = ""; + commentText.value = ""; }); post.appendChild(commentsForm); From b097978e9a1ac2c8f0ffd3e9940f71e899ebd86f Mon Sep 17 00:00:00 2001 From: acl13 <128934431+acl13@users.noreply.github.com> Date: Wed, 31 Jul 2024 11:16:42 -0400 Subject: [PATCH 13/13] remove comment when 'remove' is clicked --- main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 6bee0137..4ffbe35f 100644 --- a/main.js +++ b/main.js @@ -71,12 +71,17 @@ function onSubmit() { comment.textContent = `${commentText.value} - Posted By: ${commentName.value}`; removeComment.textContent = "remove"; comments.appendChild(removeComment); - comments.append(" "); + removeComment.append(" "); comments.appendChild(comment); - comments.appendChild(lineBreak); + comment.appendChild(lineBreak); commentName.value = ""; commentText.value = ""; + + removeComment.addEventListener("click", function () { + comment.remove(); + removeComment.remove(); + }); }); post.appendChild(commentsForm);