From 93258b97ccfaa3dd1d638c0bb286bb0e522f06cf Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Tue, 4 Feb 2025 09:40:47 -0500 Subject: [PATCH 01/16] initial commit, add index.html add style.css --- index.html | 10 ++++++++++ style.css | 0 2 files changed, 10 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..4186fcb6 --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + + + + Chreddit + + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From e188231eb2fae8ca43d65e76de644d66b3f86896 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Tue, 4 Feb 2025 09:43:34 -0500 Subject: [PATCH 02/16] add bootstrap --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/index.html b/index.html index 4186fcb6..89a4cb82 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,17 @@ + + Chreddit From 30a4c39f281a998a478e965fdb7805c56b5cd158 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Tue, 4 Feb 2025 09:52:21 -0500 Subject: [PATCH 03/16] add main.js --- index.html | 1 + main.js | 0 2 files changed, 1 insertion(+) create mode 100644 main.js diff --git a/index.html b/index.html index 89a4cb82..b059103b 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@ integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" > + Chreddit diff --git a/main.js b/main.js new file mode 100644 index 00000000..e69de29b From 32938993ed72e95b228e388d0a0138a281a5ff0c Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Tue, 4 Feb 2025 09:53:52 -0500 Subject: [PATCH 04/16] setup intial HTML structure --- index.html | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b059103b..c4687505 100644 --- a/index.html +++ b/index.html @@ -18,5 +18,25 @@ Chreddit - + +

Chreddit

+
+
+ + + +
+ From 799b82726555a3f8a49b8bea60fcfb9e842c000a Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Tue, 4 Feb 2025 10:23:17 -0500 Subject: [PATCH 05/16] implement add post functionality --- index.html | 2 +- main.js | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index c4687505..ac59b9b5 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" > - + Chreddit diff --git a/main.js b/main.js index e69de29b..572520a5 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,22 @@ +const posts = []; + +const submitBtn = document.getElementsByClassName("submitPostbtn")[0]; +const postContainer = document.getElementsByClassName("posts")[0]; + +const renderPosts = () => { + let postsElements = ""; + posts.forEach( + (post) => + (postsElements += `

${post.message} - posted by: ${post.name}

`) + ); + postContainer.innerHTML = postsElements; +}; + +submitBtn.addEventListener("click", function (e) { + e.preventDefault(); + const postInputName = document.getElementsByClassName("post-name")[0].value; + const postInputMessage = + document.getElementsByClassName("post-message")[0].value; + posts.push({ name: postInputName, message: postInputMessage, comments: [] }); + renderPosts(); +}); From 9b2f9217336bbf2286bafdb75fdfef7b469b69d5 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Tue, 4 Feb 2025 12:25:07 -0500 Subject: [PATCH 06/16] refactor renderPosts, implement removePost functionality --- main.js | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/main.js b/main.js index 572520a5..02c34e0b 100644 --- a/main.js +++ b/main.js @@ -1,15 +1,27 @@ const posts = []; const submitBtn = document.getElementsByClassName("submitPostbtn")[0]; -const postContainer = document.getElementsByClassName("posts")[0]; +const postsContainer = document.getElementsByClassName("posts")[0]; const renderPosts = () => { - let postsElements = ""; - posts.forEach( - (post) => - (postsElements += `

${post.message} - posted by: ${post.name}

`) - ); - postContainer.innerHTML = postsElements; + postsContainer.replaceChildren(); + posts.forEach((post) => { + const postDiv = document.createElement("div"); + const postP = document.createElement("p"); + const removePostbtn = document.createElement("button"); + + postP.textContent = `${post.message} - posted by: ${post.name}`; + removePostbtn.textContent = "Delete Post"; + + removePostbtn.addEventListener("click", function (e) { + postsContainer.removeChild(e.target.parentNode); + posts.splice(posts.indexOf(post), 1); + }); + + postDiv.appendChild(postP); + postDiv.appendChild(removePostbtn); + postsContainer.appendChild(postDiv); + }); }; submitBtn.addEventListener("click", function (e) { From cfdd597a8305b11832d775daa902edbcf19c0ccb Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Wed, 5 Feb 2025 09:14:57 -0500 Subject: [PATCH 07/16] implement clear inputs on post submit --- main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/main.js b/main.js index 02c34e0b..b47178c1 100644 --- a/main.js +++ b/main.js @@ -30,5 +30,7 @@ submitBtn.addEventListener("click", function (e) { const postInputMessage = document.getElementsByClassName("post-message")[0].value; posts.push({ name: postInputName, message: postInputMessage, comments: [] }); + document.getElementsByClassName("post-name")[0].value = ""; + document.getElementsByClassName("post-message")[0].value = ""; renderPosts(); }); From cbd1951e9f68136915d55dd60751278ef857026d Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Wed, 5 Feb 2025 22:38:24 -0500 Subject: [PATCH 08/16] implement comments functionality, add temporary styling --- main.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 8 ++++++ 2 files changed, 83 insertions(+) diff --git a/main.js b/main.js index b47178c1..46b97951 100644 --- a/main.js +++ b/main.js @@ -9,21 +9,96 @@ const renderPosts = () => { const postDiv = document.createElement("div"); const postP = document.createElement("p"); const removePostbtn = document.createElement("button"); + const showCommentsbtn = document.createElement("button"); + const commentsContainer = renderCommentsContainer(post); postP.textContent = `${post.message} - posted by: ${post.name}`; removePostbtn.textContent = "Delete Post"; + showCommentsbtn.textContent = "Show Comments"; + postDiv.setAttribute("class", "post"); removePostbtn.addEventListener("click", function (e) { postsContainer.removeChild(e.target.parentNode); posts.splice(posts.indexOf(post), 1); }); + showCommentsbtn.addEventListener("click", function () { + if (commentsContainer.className === "comments-container") { + console.log("comments should hide"); + commentsContainer.className = "comments-container d-none"; + } else { + console.log("comments should display"); + commentsContainer.className = "comments-container"; + } + }); + postDiv.appendChild(postP); postDiv.appendChild(removePostbtn); + postDiv.appendChild(showCommentsbtn); + postDiv.appendChild(commentsContainer); postsContainer.appendChild(postDiv); }); }; +const renderCommentsContainer = (post) => { + const commentsContainer = document.createElement("div"); + const commentsDiv = document.createElement("div"); + const commentsForm = document.createElement("form"); + const commentNameInput = document.createElement("input"); + const commentMessageInput = document.createElement("input"); + const commentSubmitbtn = document.createElement("button"); + + commentSubmitbtn.textContent = "Submit Comment"; + commentsContainer.setAttribute("class", "comments-container"); + commentNameInput.setAttribute("placeholder", "Comment Name"); + commentNameInput.setAttribute("class", "comment-name"); + commentMessageInput.setAttribute("placeholder", "Comment Message"); + commentMessageInput.setAttribute("class", "comment-message"); + + commentSubmitbtn.addEventListener("click", function (e) { + e.preventDefault(); + const commentName = + e.target.parentNode.getElementsByClassName("comment-name")[0].value; + const commentMesage = + e.target.parentNode.getElementsByClassName("comment-message")[0].value; + post.comments.push({ name: commentName, message: commentMesage }); + renderCommentList(post.comments, commentsDiv); + e.target.parentNode.getElementsByClassName("comment-name")[0].value = ""; + e.target.parentNode.getElementsByClassName("comment-message")[0].value = ""; + }); + + commentsForm.appendChild(commentNameInput); + commentsForm.appendChild(commentMessageInput); + commentsForm.appendChild(commentSubmitbtn); + + renderCommentList(post.comments, commentsDiv); + + commentsContainer.appendChild(commentsDiv); + commentsContainer.appendChild(commentsForm); + return commentsContainer; +}; + +const renderCommentList = (comments, commentsDiv) => { + commentsDiv.replaceChildren(); + comments.forEach((comment) => { + const commentDiv = document.createElement("div"); + const commentP = document.createElement("p"); + const deleteCommentbtn = document.createElement("button"); + + commentP.textContent = `${comment.name} commented: ${comment.message}`; + deleteCommentbtn.textContent = "Remove Comment"; + + deleteCommentbtn.addEventListener("click", function (e) { + commentsDiv.removeChild(e.target.parentNode); + comments.splice(comments.indexOf(comment), 1); + }); + + commentDiv.appendChild(commentP); + commentDiv.appendChild(deleteCommentbtn); + commentsDiv.appendChild(commentDiv); + }); +}; + submitBtn.addEventListener("click", function (e) { e.preventDefault(); const postInputName = document.getElementsByClassName("post-name")[0].value; diff --git a/style.css b/style.css index e69de29b..72fc20da 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,8 @@ +/* borders are temporary for debugging before fully styling */ +.post { + border: 2px solid red; +} + +.comments-container { + border: 2px solid blue; +} From 5d9763e55275850580b19feeb67f1ad24d466d0e Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Thu, 6 Feb 2025 20:43:38 -0500 Subject: [PATCH 09/16] add button initial styling --- index.html | 4 +++- main.js | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ac59b9b5..b5dcac20 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,9 @@

Chreddit

id="" placeholder="Message" /> - + diff --git a/main.js b/main.js index 46b97951..e52028e6 100644 --- a/main.js +++ b/main.js @@ -16,6 +16,8 @@ const renderPosts = () => { removePostbtn.textContent = "Delete Post"; showCommentsbtn.textContent = "Show Comments"; postDiv.setAttribute("class", "post"); + removePostbtn.classList.add("btn", "btn-danger"); + showCommentsbtn.classList.add("btn", "btn-outline-info"); removePostbtn.addEventListener("click", function (e) { postsContainer.removeChild(e.target.parentNode); @@ -54,6 +56,7 @@ const renderCommentsContainer = (post) => { commentNameInput.setAttribute("class", "comment-name"); commentMessageInput.setAttribute("placeholder", "Comment Message"); commentMessageInput.setAttribute("class", "comment-message"); + commentSubmitbtn.classList.add("btn", "btn-outline-primary"); commentSubmitbtn.addEventListener("click", function (e) { e.preventDefault(); @@ -87,6 +90,7 @@ const renderCommentList = (comments, commentsDiv) => { commentP.textContent = `${comment.name} commented: ${comment.message}`; deleteCommentbtn.textContent = "Remove Comment"; + deleteCommentbtn.classList.add("btn", "btn-outline-danger"); deleteCommentbtn.addEventListener("click", function (e) { commentsDiv.removeChild(e.target.parentNode); From 3f3e1bdf5fc7bc88890893ff3c9dd2b45656d573 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Fri, 7 Feb 2025 20:03:05 -0500 Subject: [PATCH 10/16] style form and posts sections --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b5dcac20..6a3922d9 100644 --- a/index.html +++ b/index.html @@ -20,17 +20,17 @@

Chreddit

-
-
+
+ Date: Fri, 7 Feb 2025 20:27:13 -0500 Subject: [PATCH 11/16] style post section --- index.html | 2 +- main.js | 31 ++++++++++++++++++++----------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 6a3922d9..b1bd50be 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

Chreddit

-
+
{ postsContainer.replaceChildren(); posts.forEach((post) => { - const postDiv = document.createElement("div"); + const postCardDiv = document.createElement("div"); + const cardHeaderDiv = document.createElement("div"); + const cardBodyDiv = document.createElement("div"); const postP = document.createElement("p"); const removePostbtn = document.createElement("button"); const showCommentsbtn = document.createElement("button"); const commentsContainer = renderCommentsContainer(post); - postP.textContent = `${post.message} - posted by: ${post.name}`; + postCardDiv.classList.add("post", "card", "mb-4"); + cardHeaderDiv.classList.add("card-header"); + cardBodyDiv.classList.add("card-body"); + postP.classList.add("card-text"); + removePostbtn.classList.add("btn", "btn-danger", "mx-3"); + showCommentsbtn.classList.add("btn", "btn-outline-info"); + + cardHeaderDiv.textContent = `${post.name} posted...`; + postP.textContent = post.message; removePostbtn.textContent = "Delete Post"; showCommentsbtn.textContent = "Show Comments"; - postDiv.setAttribute("class", "post"); - removePostbtn.classList.add("btn", "btn-danger"); - showCommentsbtn.classList.add("btn", "btn-outline-info"); removePostbtn.addEventListener("click", function (e) { - postsContainer.removeChild(e.target.parentNode); + postsContainer.removeChild(e.target.parentNode.parentNode); posts.splice(posts.indexOf(post), 1); }); @@ -34,11 +41,13 @@ const renderPosts = () => { } }); - postDiv.appendChild(postP); - postDiv.appendChild(removePostbtn); - postDiv.appendChild(showCommentsbtn); - postDiv.appendChild(commentsContainer); - postsContainer.appendChild(postDiv); + postCardDiv.appendChild(cardHeaderDiv); + postCardDiv.appendChild(cardBodyDiv); + cardBodyDiv.append(postP); + cardHeaderDiv.appendChild(removePostbtn); + cardBodyDiv.appendChild(showCommentsbtn); + postCardDiv.appendChild(commentsContainer); + postsContainer.appendChild(postCardDiv); }); }; From c22fd5b8a3f2b0d568501d2b68b316430fdad002 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Fri, 7 Feb 2025 20:55:11 -0500 Subject: [PATCH 12/16] style comments form --- main.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index 9c461139..97ef9fd8 100644 --- a/main.js +++ b/main.js @@ -59,14 +59,15 @@ const renderCommentsContainer = (post) => { const commentMessageInput = document.createElement("input"); const commentSubmitbtn = document.createElement("button"); - commentSubmitbtn.textContent = "Submit Comment"; - commentsContainer.setAttribute("class", "comments-container"); + commentsContainer.classList.add("comments-container"); + commentNameInput.classList.add("comment-name", "form-control", "mb-1"); + commentMessageInput.classList.add("comment-message", "form-control", "mb-1"); commentNameInput.setAttribute("placeholder", "Comment Name"); - commentNameInput.setAttribute("class", "comment-name"); commentMessageInput.setAttribute("placeholder", "Comment Message"); - commentMessageInput.setAttribute("class", "comment-message"); commentSubmitbtn.classList.add("btn", "btn-outline-primary"); + commentSubmitbtn.textContent = "Submit Comment"; + commentSubmitbtn.addEventListener("click", function (e) { e.preventDefault(); const commentName = From 0915bd4580ad1bb515589121cbdd8cba4f912ac1 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Sat, 8 Feb 2025 12:48:10 -0500 Subject: [PATCH 13/16] style comment list --- main.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/main.js b/main.js index 97ef9fd8..4d0838d7 100644 --- a/main.js +++ b/main.js @@ -54,12 +54,15 @@ const renderPosts = () => { const renderCommentsContainer = (post) => { const commentsContainer = document.createElement("div"); const commentsDiv = document.createElement("div"); + const commentUl = document.createElement("ul"); const commentsForm = document.createElement("form"); const commentNameInput = document.createElement("input"); const commentMessageInput = document.createElement("input"); const commentSubmitbtn = document.createElement("button"); commentsContainer.classList.add("comments-container"); + commentsDiv.classList.add("card", "mb-4"); + commentUl.classList.add("list-group", "list-group-flush"); commentNameInput.classList.add("comment-name", "form-control", "mb-1"); commentMessageInput.classList.add("comment-message", "form-control", "mb-1"); commentNameInput.setAttribute("placeholder", "Comment Name"); @@ -75,7 +78,7 @@ const renderCommentsContainer = (post) => { const commentMesage = e.target.parentNode.getElementsByClassName("comment-message")[0].value; post.comments.push({ name: commentName, message: commentMesage }); - renderCommentList(post.comments, commentsDiv); + renderCommentList(post.comments, commentUl); e.target.parentNode.getElementsByClassName("comment-name")[0].value = ""; e.target.parentNode.getElementsByClassName("comment-message")[0].value = ""; }); @@ -83,33 +86,34 @@ const renderCommentsContainer = (post) => { commentsForm.appendChild(commentNameInput); commentsForm.appendChild(commentMessageInput); commentsForm.appendChild(commentSubmitbtn); + commentsDiv.appendChild(commentUl); - renderCommentList(post.comments, commentsDiv); + renderCommentList(post.comments, commentUl); commentsContainer.appendChild(commentsDiv); commentsContainer.appendChild(commentsForm); return commentsContainer; }; -const renderCommentList = (comments, commentsDiv) => { - commentsDiv.replaceChildren(); +const renderCommentList = (comments, commentUl) => { + commentUl.replaceChildren(); comments.forEach((comment) => { - const commentDiv = document.createElement("div"); - const commentP = document.createElement("p"); + const commentLi = document.createElement("li"); const deleteCommentbtn = document.createElement("button"); - commentP.textContent = `${comment.name} commented: ${comment.message}`; + commentLi.classList.add("list-group-item"); + deleteCommentbtn.classList.add("btn", "btn-outline-danger", "mx-2"); + + commentLi.innerHTML = `${comment.name} commented: ${comment.message}`; deleteCommentbtn.textContent = "Remove Comment"; - deleteCommentbtn.classList.add("btn", "btn-outline-danger"); deleteCommentbtn.addEventListener("click", function (e) { - commentsDiv.removeChild(e.target.parentNode); + commentUl.removeChild(e.target.parentNode); comments.splice(comments.indexOf(comment), 1); }); - commentDiv.appendChild(commentP); - commentDiv.appendChild(deleteCommentbtn); - commentsDiv.appendChild(commentDiv); + commentLi.appendChild(deleteCommentbtn); + commentUl.appendChild(commentLi); }); }; From 59ea077cfaeaceabd0533f8eb1f9245c226e6ab3 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Sat, 8 Feb 2025 20:28:51 -0500 Subject: [PATCH 14/16] finalize styling --- index.html | 2 +- main.js | 17 ++++++++++++++--- style.css | 16 ++++++++++++---- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index b1bd50be..99fadc8e 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

Chreddit

id="" placeholder="Message" /> - diff --git a/main.js b/main.js index 4d0838d7..8abbbffa 100644 --- a/main.js +++ b/main.js @@ -19,7 +19,7 @@ const renderPosts = () => { cardBodyDiv.classList.add("card-body"); postP.classList.add("card-text"); removePostbtn.classList.add("btn", "btn-danger", "mx-3"); - showCommentsbtn.classList.add("btn", "btn-outline-info"); + showCommentsbtn.classList.add("btn", "btn-info", "btn-sm"); cardHeaderDiv.textContent = `${post.name} posted...`; postP.textContent = post.message; @@ -60,9 +60,15 @@ const renderCommentsContainer = (post) => { const commentMessageInput = document.createElement("input"); const commentSubmitbtn = document.createElement("button"); - commentsContainer.classList.add("comments-container"); + commentsContainer.classList.add( + "comments-container", + "ms-3", + "p-2", + "rounded" + ); commentsDiv.classList.add("card", "mb-4"); commentUl.classList.add("list-group", "list-group-flush"); + commentsForm.classList.add("rounded", "p-2"); commentNameInput.classList.add("comment-name", "form-control", "mb-1"); commentMessageInput.classList.add("comment-message", "form-control", "mb-1"); commentNameInput.setAttribute("placeholder", "Comment Name"); @@ -102,7 +108,12 @@ const renderCommentList = (comments, commentUl) => { const deleteCommentbtn = document.createElement("button"); commentLi.classList.add("list-group-item"); - deleteCommentbtn.classList.add("btn", "btn-outline-danger", "mx-2"); + deleteCommentbtn.classList.add( + "btn", + "btn-outline-danger", + "mx-2", + "btn-sm" + ); commentLi.innerHTML = `${comment.name} commented: ${comment.message}`; deleteCommentbtn.textContent = "Remove Comment"; diff --git a/style.css b/style.css index 72fc20da..1879a40f 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,16 @@ -/* borders are temporary for debugging before fully styling */ .post { - border: 2px solid red; + background-color: #78d5d7; } -.comments-container { - border: 2px solid blue; +.comments-container, +.comments-container li { + background-color: #bed8d4; +} + +.comments-container form { + background-color: #f9faf7; +} + +body { + background-color: #f9faf7; } From 3c5a52ec5d1cab1f6a9f3e3a80265d09d7395533 Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Sat, 8 Feb 2025 20:35:15 -0500 Subject: [PATCH 15/16] fixed bug in showCommentsbtn --- main.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index 8abbbffa..275e6efd 100644 --- a/main.js +++ b/main.js @@ -32,12 +32,10 @@ const renderPosts = () => { }); showCommentsbtn.addEventListener("click", function () { - if (commentsContainer.className === "comments-container") { - console.log("comments should hide"); - commentsContainer.className = "comments-container d-none"; + if (commentsContainer.classList.contains("d-none")) { + commentsContainer.classList.remove("d-none"); } else { - console.log("comments should display"); - commentsContainer.className = "comments-container"; + commentsContainer.classList.add("d-none"); } }); From b07b7aa52f26760f388a70a7dfd1594aa340882d Mon Sep 17 00:00:00 2001 From: Christopher d'Arcy Date: Mon, 10 Feb 2025 07:15:33 -0500 Subject: [PATCH 16/16] add comments for documentation --- main.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/main.js b/main.js index 275e6efd..d2103010 100644 --- a/main.js +++ b/main.js @@ -3,9 +3,14 @@ const posts = []; const submitBtn = document.getElementsByClassName("submitPostbtn")[0]; const postsContainer = document.getElementsByClassName("posts")[0]; +//builds posts and renders html accordingly const renderPosts = () => { + // Clear all existing posts from the container postsContainer.replaceChildren(); + + // Iterate through each post and create its UI elements posts.forEach((post) => { + // Create DOM elements for the post card structure const postCardDiv = document.createElement("div"); const cardHeaderDiv = document.createElement("div"); const cardBodyDiv = document.createElement("div"); @@ -14,6 +19,7 @@ const renderPosts = () => { const showCommentsbtn = document.createElement("button"); const commentsContainer = renderCommentsContainer(post); + // Add Bootstrap classes for styling postCardDiv.classList.add("post", "card", "mb-4"); cardHeaderDiv.classList.add("card-header"); cardBodyDiv.classList.add("card-body"); @@ -21,16 +27,19 @@ const renderPosts = () => { removePostbtn.classList.add("btn", "btn-danger", "mx-3"); showCommentsbtn.classList.add("btn", "btn-info", "btn-sm"); + // Set the content for each element cardHeaderDiv.textContent = `${post.name} posted...`; postP.textContent = post.message; removePostbtn.textContent = "Delete Post"; showCommentsbtn.textContent = "Show Comments"; + // Add click handler for post deletion removePostbtn.addEventListener("click", function (e) { postsContainer.removeChild(e.target.parentNode.parentNode); posts.splice(posts.indexOf(post), 1); }); + // Add click handler to toggle comments visibility showCommentsbtn.addEventListener("click", function () { if (commentsContainer.classList.contains("d-none")) { commentsContainer.classList.remove("d-none"); @@ -39,6 +48,7 @@ const renderPosts = () => { } }); + // create tree stucture to organize html correctly postCardDiv.appendChild(cardHeaderDiv); postCardDiv.appendChild(cardBodyDiv); cardBodyDiv.append(postP); @@ -49,7 +59,10 @@ const renderPosts = () => { }); }; +//takes in a single post object and renders comments container div html element. +//returns the comments container const renderCommentsContainer = (post) => { + //create dom elements for structure const commentsContainer = document.createElement("div"); const commentsDiv = document.createElement("div"); const commentUl = document.createElement("ul"); @@ -58,6 +71,7 @@ const renderCommentsContainer = (post) => { const commentMessageInput = document.createElement("input"); const commentSubmitbtn = document.createElement("button"); + //add boostrap classes for styling commentsContainer.classList.add( "comments-container", "ms-3", @@ -73,8 +87,10 @@ const renderCommentsContainer = (post) => { commentMessageInput.setAttribute("placeholder", "Comment Message"); commentSubmitbtn.classList.add("btn", "btn-outline-primary"); + //add text content commentSubmitbtn.textContent = "Submit Comment"; + //add submit event listener to comment submit button commentSubmitbtn.addEventListener("click", function (e) { e.preventDefault(); const commentName = @@ -99,12 +115,16 @@ const renderCommentsContainer = (post) => { return commentsContainer; }; +// renders list of comments, takes in array of comment objects as first argument, comment UL html element as second argument. const renderCommentList = (comments, commentUl) => { + // Clear all existing comments from the comment list commentUl.replaceChildren(); + // Iterate through each comment and create its UI elements comments.forEach((comment) => { const commentLi = document.createElement("li"); const deleteCommentbtn = document.createElement("button"); + // add bootstrap classes for styling commentLi.classList.add("list-group-item"); deleteCommentbtn.classList.add( "btn", @@ -113,19 +133,23 @@ const renderCommentList = (comments, commentUl) => { "btn-sm" ); + //set the content for elements commentLi.innerHTML = `${comment.name} commented: ${comment.message}`; deleteCommentbtn.textContent = "Remove Comment"; + //add detete comment event listener to delete button deleteCommentbtn.addEventListener("click", function (e) { commentUl.removeChild(e.target.parentNode); comments.splice(comments.indexOf(comment), 1); }); + // create tree stucture to organize html correctly commentLi.appendChild(deleteCommentbtn); commentUl.appendChild(commentLi); }); }; +//add submit event listener to post submit button submitBtn.addEventListener("click", function (e) { e.preventDefault(); const postInputName = document.getElementsByClassName("post-name")[0].value;