From 3d1783033cdc8c9a31e70a077611bb26819461f1 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Mon, 18 Nov 2024 22:17:57 -0500 Subject: [PATCH 01/15] Working on adding the comment box --- index.html | 44 ++++++++++++++++++ main.js | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 11 +++++ 3 files changed, 189 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..6317566d --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + ReReddit + + + + +
+
+ +
+

ReReddit

+
+ +
+
+ +
+

Add a new post

+ +
+ +
+ +
+ +
+ + +
+ +
+
+ + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..e8175e31 --- /dev/null +++ b/main.js @@ -0,0 +1,134 @@ +const postButton = document.getElementById("submit-post"); + +let divID = 1; + +const postsFrag = document.createDocumentFragment(); + +const allPosts = []; +// const allPosts = Array.from(document.getElementsByClassName("post")).map( +// (div) => ({ +// element: div, +// votes: parseInt(div.getAttribute("data-votes"), 10), +// }) +// ); + +const addPost = () => { + const postObject = { + person: document.getElementById("name").value, + message: document.getElementById("message").value, + ID: divID.toString(), + votes: 0, + comments: [], + }; + // parseInt(newPost.getAttribute("data-votes"), 10) + + const postedBy = `Posted By: ${postObject.person}`; + const message = document.getElementById("message").value; + const postsDiv = document.getElementsByClassName("posts")[0]; + const postTime = Date.now(); + + const postOwner = document.createElement("p", postedBy); + postOwner.style.fontWeight = "500"; + postOwner.innerHTML = postedBy; + + const postMessage = document.createElement("p"); + postMessage.innerHTML = message; + + const remove = document.createElement("button"); + remove.innerHTML = "remove"; + remove.style.marginRight = "5px"; + remove.className = "btn btn-link"; + remove.style.fontWeight = "bold"; + + const hr = document.createElement("hr"); + + const commentButton = document.createElement("button"); + commentButton.innerHTML = "comment"; + commentButton.style.marginRight = "5px"; + commentButton.className = "btn btn-link"; + commentButton.style.fontWeight = "bold"; + commentButton.style.display = "inline-block"; + + const newPost = document.createElement("div"); + newPost.style.margin = "20px"; + newPost.setAttribute("class", "post"); + newPost.setAttribute("data-votes", postObject.votes); + newPost.setAttribute("data-divID", divID); + + newPost.appendChild(postMessage); + newPost.appendChild(postOwner); + newPost.appendChild(remove); + newPost.appendChild(commentButton); + newPost.appendChild(hr); + + remove.addEventListener("click", function () { + postsDiv.removeChild(newPost); + }); + + const addCommentField = () => { + const commentForm = document.createElement("form"); + commentForm.style = "margin-top:30px"; + commentForm.onsubmit = "event.preventDefault()"; + + const commentHeader = document.createElement("h3"); + commentHeader.innerHTML = "Add a Comment"; + + const commentMessageDiv = document.createElement("div"); + commentMessageDiv.className = "form-group"; + + const commentMessageArea = document.createElement("textarea"); + commentMessageArea.id = "comment-message"; + commentMessageArea.type = "text"; + commentMessageArea.class = "form-control"; + commentMessageArea.placeholder = "Your comment"; + + commentMessageDiv.appendChild(commentMessageArea); + + const commenterDiv = document.createElement("div"); + commenterDiv.className = "form-group"; + const commenterInput = document.createElement("input"); + commenterInput.id = "comment-name"; + commenterInput.type = "text"; + commenterInput.class = "form-control"; + commenterInput.placeholder = "Your Name"; + commenterDiv.appendChild(commenterInput); + + const commentSubmitButton = document.createElement("button"); + commentSubmitButton.id = "submit-comment"; + commentSubmitButton.class = "btn btn-primary"; + commentSubmitButton.innerHTML = "Submit Comment"; + + commentSubmitButton.addEventListener("click", () => {}); + + commentForm.appendChild(commentHeader); + commentForm.appendChild(commentMessageDiv); + commentForm.appendChild(commenterDiv); + commentForm.appendChild(commentSubmitButton); + + newPost.appendChild(commentForm); + + // ; + // { + // /*
+ // // + // //
+ }; + + commentButton.addEventListener("click", addCommentField); + + postsDiv.appendChild(newPost); + + allPosts.push(postObject); + + divID += 1; +}; + +postButton.addEventListener("click", addPost); diff --git a/style.css b/style.css new file mode 100644 index 00000000..246ee180 --- /dev/null +++ b/style.css @@ -0,0 +1,11 @@ +.text-button { + background-color: transparent; + border-width: 0; + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: bold; + color: blue; + line-height: inherit; + padding: 0; +} From aa62ee46f0cf0efce7fc7f3673adfa4a7e35d344 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Tue, 19 Nov 2024 00:14:26 -0500 Subject: [PATCH 02/15] Still working on adding comments --- index.html | 2 +- main.js | 102 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 69 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 6317566d..60c9186b 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

ReReddit

-
+

Add a new post

diff --git a/main.js b/main.js index e8175e31..ea7a786a 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,20 @@ const postButton = document.getElementById("submit-post"); +const postForm = document.getElementById("post-form"); +const allPosts = []; +const populatePosts = () => { + for (let i = 0; i < allPosts.length; i++) { + //for each post I want to create the appropriate divs, etc. with the information i have from the post object in the array + // 1. remove button, comments button, postPerson, Post Message with "Posted By:- " prefix + } +}; let divID = 1; -const postsFrag = document.createDocumentFragment(); +// const postsFrag = document.createDocumentFragment(); + +// const postPerson = document.getElementById("name").value; +// const postMessage = document.getElementById("message").value; -const allPosts = []; // const allPosts = Array.from(document.getElementsByClassName("post")).map( // (div) => ({ // element: div, @@ -17,55 +27,63 @@ const addPost = () => { person: document.getElementById("name").value, message: document.getElementById("message").value, ID: divID.toString(), - votes: 0, + // votes: 0, comments: [], }; // parseInt(newPost.getAttribute("data-votes"), 10) - const postedBy = `Posted By: ${postObject.person}`; - const message = document.getElementById("message").value; + // const postedBy = ` - Posted By: ${postObject.person}`; + // const message = document.getElementById("message").value; const postsDiv = document.getElementsByClassName("posts")[0]; const postTime = Date.now(); - const postOwner = document.createElement("p", postedBy); + const postOwner = document.createElement("span", postedBy); postOwner.style.fontWeight = "500"; - postOwner.innerHTML = postedBy; + postOwner.innerHTML = ` - Posted By: ${postObject.person}`; - const postMessage = document.createElement("p"); - postMessage.innerHTML = message; + const postMessage = document.createElement("span"); + postMessage.innerHTML = postObject.message; const remove = document.createElement("button"); remove.innerHTML = "remove"; - remove.style.marginRight = "5px"; + // remove.style.margin = "5px"; remove.className = "btn btn-link"; remove.style.fontWeight = "bold"; - const hr = document.createElement("hr"); + // const hr = document.createElement("hr"); - const commentButton = document.createElement("button"); - commentButton.innerHTML = "comment"; - commentButton.style.marginRight = "5px"; - commentButton.className = "btn btn-link"; - commentButton.style.fontWeight = "bold"; - commentButton.style.display = "inline-block"; + const commentsButton = document.createElement("button"); + commentsButton.innerHTML = "comments"; + // commentsButton.style.marginRight = "5px"; + commentsButton.className = "btn btn-link"; + commentsButton.style.fontWeight = "bold"; + commentsButton.style.display = "inline-block"; + + const commentsDiv = document.createElement("div"); + const commentsUl = document.createElement("ul"); const newPost = document.createElement("div"); - newPost.style.margin = "20px"; + // newPost.style.margin = "20px"; newPost.setAttribute("class", "post"); newPost.setAttribute("data-votes", postObject.votes); newPost.setAttribute("data-divID", divID); + newPost.appendChild(remove); + newPost.appendChild(commentsButton); newPost.appendChild(postMessage); newPost.appendChild(postOwner); - newPost.appendChild(remove); - newPost.appendChild(commentButton); - newPost.appendChild(hr); + + // newPost.appendChild(hr); remove.addEventListener("click", function () { postsDiv.removeChild(newPost); }); - const addCommentField = () => { + const toggleComments = () => { + postForm.style.display = "none"; + }; + + const addCommentForm = () => { const commentForm = document.createElement("form"); commentForm.style = "margin-top:30px"; commentForm.onsubmit = "event.preventDefault()"; @@ -86,25 +104,35 @@ const addPost = () => { const commenterDiv = document.createElement("div"); commenterDiv.className = "form-group"; - const commenterInput = document.createElement("input"); - commenterInput.id = "comment-name"; - commenterInput.type = "text"; - commenterInput.class = "form-control"; - commenterInput.placeholder = "Your Name"; - commenterDiv.appendChild(commenterInput); + + const commenterInputField = document.createElement("input"); + commenterInputField.id = "comment-name"; + commenterInputField.type = "text"; + commenterInputField.class = "form-control"; + commenterInputField.placeholder = "Your Name"; + commenterDiv.appendChild(commenterInputField); + + const commentLi = document.createElement("li"); + commentLi.innerHTML = `${commentMessageArea.value}, `; + commentsUl.appendChild(commentLi); const commentSubmitButton = document.createElement("button"); commentSubmitButton.id = "submit-comment"; commentSubmitButton.class = "btn btn-primary"; commentSubmitButton.innerHTML = "Submit Comment"; - commentSubmitButton.addEventListener("click", () => {}); + commentSubmitButton.addEventListener("click", () => { + alert("hi"); + // need to add the value of the comment message and the commentor to the post, and also need to toggle the comment form away and restore the add post form + postForm.style.display = "block"; + }); commentForm.appendChild(commentHeader); commentForm.appendChild(commentMessageDiv); commentForm.appendChild(commenterDiv); commentForm.appendChild(commentSubmitButton); + toggleComments(); newPost.appendChild(commentForm); //
}; - commentButton.addEventListener("click", addCommentField); - - postsDiv.appendChild(newPost); - - allPosts.push(postObject); + commentsButton.addEventListener("click", addCommentForm); + + if ( + document.getElementById("name").value && + document.getElementById("message").value + ) { + postsDiv.appendChild(newPost); + allPosts.push(postObject); + } else { + alert("Please enter a message and your name."); + } divID += 1; }; From 3b8a211a6ef19826c55078e34c001632598b890c Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Wed, 20 Nov 2024 00:52:10 -0500 Subject: [PATCH 03/15] Moving to a different code strucutre for main.js - addingPost should update an array of post objects and a seperate render functon should produce the page from that object seperately. --- main.js | 274 +++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 174 insertions(+), 100 deletions(-) diff --git a/main.js b/main.js index ea7a786a..1262a3a1 100644 --- a/main.js +++ b/main.js @@ -1,95 +1,88 @@ const postButton = document.getElementById("submit-post"); const postForm = document.getElementById("post-form"); const allPosts = []; -const populatePosts = () => { - for (let i = 0; i < allPosts.length; i++) { - //for each post I want to create the appropriate divs, etc. with the information i have from the post object in the array - // 1. remove button, comments button, postPerson, Post Message with "Posted By:- " prefix - } -}; - -let divID = 1; - -// const postsFrag = document.createDocumentFragment(); -// const postPerson = document.getElementById("name").value; -// const postMessage = document.getElementById("message").value; - -// const allPosts = Array.from(document.getElementsByClassName("post")).map( -// (div) => ({ -// element: div, -// votes: parseInt(div.getAttribute("data-votes"), 10), -// }) -// ); +let postID = 0; +let commentID = 0; const addPost = () => { const postObject = { person: document.getElementById("name").value, message: document.getElementById("message").value, - ID: divID.toString(), - // votes: 0, + ID: postID.toString(), comments: [], }; - // parseInt(newPost.getAttribute("data-votes"), 10) - // const postedBy = ` - Posted By: ${postObject.person}`; - // const message = document.getElementById("message").value; - const postsDiv = document.getElementsByClassName("posts")[0]; - const postTime = Date.now(); + // const commentObject = { + // person: document.getElementById("comment-name").value, + // message: document.getElementById("comment-message").value, + // ID: postID.toString(), + // }; - const postOwner = document.createElement("span", postedBy); - postOwner.style.fontWeight = "500"; - postOwner.innerHTML = ` - Posted By: ${postObject.person}`; + // postObject.comments.push(commentObject); + allPosts.push(postObject); + postID++; +}; - const postMessage = document.createElement("span"); - postMessage.innerHTML = postObject.message; +// const addComment = () => { +// const commentObject = { +// person: document.getElementById("comment-name").value, +// message: document.getElementById("comment-message").value, +// ID: postID.toString(), +// }; - const remove = document.createElement("button"); - remove.innerHTML = "remove"; - // remove.style.margin = "5px"; - remove.className = "btn btn-link"; - remove.style.fontWeight = "bold"; +// postObject.comments.push(commentObject) +// } +const postsDiv = document.getElementsByClassName("posts")[0]; - // const hr = document.createElement("hr"); +const renderPosts = () => { + const postsDiv = document.getElementsByClassName("posts")[0]; + const allPostDivs = document.getElementsByClassName("post"); - const commentsButton = document.createElement("button"); - commentsButton.innerHTML = "comments"; - // commentsButton.style.marginRight = "5px"; - commentsButton.className = "btn btn-link"; - commentsButton.style.fontWeight = "bold"; - commentsButton.style.display = "inline-block"; + for (let i = 0; i < allPostDivs.length; i++) { + postsDiv.removeChild(allPostDivs[i]); + } - const commentsDiv = document.createElement("div"); - const commentsUl = document.createElement("ul"); + for (let i = 0; i < allPosts.length; i++) { + const postedBy = ` - Posted By: ${allPosts[i].person}`; - const newPost = document.createElement("div"); - // newPost.style.margin = "20px"; - newPost.setAttribute("class", "post"); - newPost.setAttribute("data-votes", postObject.votes); - newPost.setAttribute("data-divID", divID); + const postOwner = document.createElement("span", postedBy); + postOwner.style.fontWeight = "500"; + postOwner.innerHTML = ` - Posted By: ${allPosts[i].person}`; - newPost.appendChild(remove); - newPost.appendChild(commentsButton); - newPost.appendChild(postMessage); - newPost.appendChild(postOwner); + const postMessage = document.createElement("span"); + postMessage.innerHTML = allPosts[i].message; - // newPost.appendChild(hr); + const remove = document.createElement("button"); + remove.innerHTML = "remove"; + // remove.style.margin = "5px"; + remove.className = "btn btn-link"; + remove.style.fontWeight = "bold"; - remove.addEventListener("click", function () { - postsDiv.removeChild(newPost); - }); + // const hr = document.createElement("hr"); - const toggleComments = () => { - postForm.style.display = "none"; - }; + const commentsButton = document.createElement("button"); + commentsButton.innerHTML = "comments"; + // commentsButton.style.marginRight = "5px"; + commentsButton.className = "btn btn-link"; + commentsButton.style.fontWeight = "bold"; + commentsButton.style.display = "inline-block"; + + const commentSection = document.createElement("div"); + commentSection.className = "comments"; + // commentSection.style.display = "none"; + + const comments = document.createElement("div"); + comments.className = "comments"; + commentSection.appendChild(comments); - const addCommentForm = () => { const commentForm = document.createElement("form"); commentForm.style = "margin-top:30px"; commentForm.onsubmit = "event.preventDefault()"; const commentHeader = document.createElement("h3"); commentHeader.innerHTML = "Add a Comment"; + commentForm.appendChild(commentHeader); const commentMessageDiv = document.createElement("div"); commentMessageDiv.className = "form-group"; @@ -101,6 +94,7 @@ const addPost = () => { commentMessageArea.placeholder = "Your comment"; commentMessageDiv.appendChild(commentMessageArea); + commentForm.appendChild(commentMessageDiv); const commenterDiv = document.createElement("div"); commenterDiv.className = "form-group"; @@ -111,58 +105,138 @@ const addPost = () => { commenterInputField.class = "form-control"; commenterInputField.placeholder = "Your Name"; commenterDiv.appendChild(commenterInputField); + commentForm.appendChild(commenterDiv); + + commentSection.appendChild(commentForm); + + // const addCommentSection = () => { + // const commentForm = document.createElement("form"); + // commentForm.style = "margin-top:30px"; + // commentForm.onsubmit = "event.preventDefault()"; + + // const commentHeader = document.createElement("h3"); + // commentHeader.innerHTML = "Add a Comment"; + + // const commentMessageDiv = document.createElement("div"); + // commentMessageDiv.className = "form-group"; + + // const commentMessageArea = document.createElement("textarea"); + // commentMessageArea.id = "comment-message"; + // commentMessageArea.type = "text"; + // commentMessageArea.class = "form-control"; + // commentMessageArea.placeholder = "Your comment"; + + // commentMessageDiv.appendChild(commentMessageArea); + + // const commenterDiv = document.createElement("div"); + // commenterDiv.className = "form-group"; + + // const commenterInputField = document.createElement("input"); + // commenterInputField.id = "comment-name"; + // commenterInputField.type = "text"; + // commenterInputField.class = "form-control"; + // commenterInputField.placeholder = "Your Name"; + // commenterDiv.appendChild(commenterInputField); - const commentLi = document.createElement("li"); - commentLi.innerHTML = `${commentMessageArea.value}, `; - commentsUl.appendChild(commentLi); + // } + + const newPost = document.createElement("div"); + // newPost.style.margin = "20px"; + newPost.setAttribute("class", "post"); + newPost.setAttribute("data-postID", postID); // DO I NEED THIS? + + newPost.appendChild(remove); + newPost.appendChild(commentsButton); + newPost.appendChild(postMessage); + newPost.appendChild(postOwner); + newPost.appendChild(commentSection); + + // newPost.appendChild(hr); + + remove.addEventListener("click", function () { + allPosts.splice([i], 1); + postsDiv.removeChild(newPost); + }); + + const toggleCommentsOn = () => { + postForm.style.display = "none"; + commentSection.style.display = "block"; + }; + + const toggleCommentsOff = () => { + postForm.style.display = "block"; + commentSection.style.display = "none"; + }; const commentSubmitButton = document.createElement("button"); commentSubmitButton.id = "submit-comment"; commentSubmitButton.class = "btn btn-primary"; commentSubmitButton.innerHTML = "Submit Comment"; - commentSubmitButton.addEventListener("click", () => { - alert("hi"); - // need to add the value of the comment message and the commentor to the post, and also need to toggle the comment form away and restore the add post form - postForm.style.display = "block"; - }); + //for each post I want to create the appropriate divs, etc. with the information i have from the post object in the array + // 1. remove button, comments button, postPerson, Post Message with "Posted By:- " prefix + + const addComment = function () { + const commentObject = { + person: document.getElementById("comment-name").value, + message: document.getElementById("comment-message").value, + ID: postID.toString(), + }; + // parseInt(newPost.getAttribute("data-votes"), 10) + + // const commentBy = ` - Comment By: ${commentObject.person}`; + // // const message = document.getElementById("message").value; + const commentDiv = document.createElement("div")[0]; + + const x = document.createElement("button"); + remove.innerHTML = "X"; + // remove.style.margin = "5px"; + remove.className = "btn btn-link"; + remove.style.fontWeight = "bold"; + + x.addEventListener("click", function () { + commentSection.removeChild(commentDiv); + }); + + const commentOwner = document.createElement("span", commentObject.person); + commentOwner.style.fontWeight = "500"; + commentOwner.innerHTML = ` - Comment By: ${commentObject.person}`; + + const commentMessage = document.createElement("span"); + postMessage.innerHTML = postObject.message; + + commentDiv.appendChild(x); + commentDiv.appendChild(commentOwner); + commentDiv.appendChild(commentMessage); + + postObject.comments.push(commentObject); + }; + + commentSubmitButton.addEventListener("click", addComment); + + // () => { + // toggleCommentsOff(); + // // need to add the value of the comment message and the commentor to the post, and also need to toggle the comment form away and restore the add post form + // postForm.style.display = "block"; + // }); commentForm.appendChild(commentHeader); commentForm.appendChild(commentMessageDiv); commentForm.appendChild(commenterDiv); commentForm.appendChild(commentSubmitButton); - toggleComments(); - newPost.appendChild(commentForm); - - // ; - // { - // /*
- // // - // //
- }; - - commentsButton.addEventListener("click", addCommentForm); - - if ( - document.getElementById("name").value && - document.getElementById("message").value - ) { - postsDiv.appendChild(newPost); - allPosts.push(postObject); - } else { - alert("Please enter a message and your name."); + if ( + document.getElementById("name").value && + document.getElementById("message").value + ) { + postsDiv.appendChild(newPost); + } else { + alert("Please enter a message and your name."); + } } - - divID += 1; }; +renderPosts(); + postButton.addEventListener("click", addPost); +postButton.addEventListener("click", renderPosts); From cbae9da7493c81094a8e085b6cd9ec06446b45b1 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Wed, 20 Nov 2024 01:16:22 -0500 Subject: [PATCH 04/15] Can curently update successive posts and render the page, as well as remove individual posts --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 1262a3a1..e0f3c7ec 100644 --- a/main.js +++ b/main.js @@ -39,7 +39,7 @@ const renderPosts = () => { const postsDiv = document.getElementsByClassName("posts")[0]; const allPostDivs = document.getElementsByClassName("post"); - for (let i = 0; i < allPostDivs.length; i++) { + for (let i = allPostDivs.length - 1; i >= 0; i--) { postsDiv.removeChild(allPostDivs[i]); } From 8893999d3f82fbbc8803402b6b3a1e2aa8011f52 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Thu, 21 Nov 2024 10:13:57 -0500 Subject: [PATCH 05/15] I can now add posts and comments but the rendering of comments loops through all existing comments and adds duplicates. --- main.js | 198 +++++++++++++++++++++--------------------------------- style.css | 8 +++ 2 files changed, 86 insertions(+), 120 deletions(-) diff --git a/main.js b/main.js index e0f3c7ec..4c348fc4 100644 --- a/main.js +++ b/main.js @@ -13,28 +13,14 @@ const addPost = () => { comments: [], }; - // const commentObject = { - // person: document.getElementById("comment-name").value, - // message: document.getElementById("comment-message").value, - // ID: postID.toString(), - // }; + //for each post I want to create the appropriate divs, etc. with the information i have from the post object in the array + // 1. remove button, comments button, postPerson, Post Message with "Posted By:- " prefix - // postObject.comments.push(commentObject); allPosts.push(postObject); + postID++; }; -// const addComment = () => { -// const commentObject = { -// person: document.getElementById("comment-name").value, -// message: document.getElementById("comment-message").value, -// ID: postID.toString(), -// }; - -// postObject.comments.push(commentObject) -// } -const postsDiv = document.getElementsByClassName("posts")[0]; - const renderPosts = () => { const postsDiv = document.getElementsByClassName("posts")[0]; const allPostDivs = document.getElementsByClassName("post"); @@ -55,15 +41,15 @@ const renderPosts = () => { const remove = document.createElement("button"); remove.innerHTML = "remove"; - // remove.style.margin = "5px"; remove.className = "btn btn-link"; remove.style.fontWeight = "bold"; - // const hr = document.createElement("hr"); + const newPost = document.createElement("div"); + newPost.setAttribute("class", "post"); + newPost.setAttribute("data-postID", postID); // DO I NEED THIS? const commentsButton = document.createElement("button"); commentsButton.innerHTML = "comments"; - // commentsButton.style.marginRight = "5px"; commentsButton.className = "btn btn-link"; commentsButton.style.fontWeight = "bold"; commentsButton.style.display = "inline-block"; @@ -72,13 +58,13 @@ const renderPosts = () => { commentSection.className = "comments"; // commentSection.style.display = "none"; - const comments = document.createElement("div"); - comments.className = "comments"; - commentSection.appendChild(comments); + // const comments = document.createElement("div"); + // comments.className = "comments"; + // commentSection.appendChild(comments); const commentForm = document.createElement("form"); commentForm.style = "margin-top:30px"; - commentForm.onsubmit = "event.preventDefault()"; + commentForm.onsubmit = (event) => event.preventDefault(); const commentHeader = document.createElement("h3"); commentHeader.innerHTML = "Add a Comment"; @@ -109,41 +95,73 @@ const renderPosts = () => { commentSection.appendChild(commentForm); - // const addCommentSection = () => { - // const commentForm = document.createElement("form"); - // commentForm.style = "margin-top:30px"; - // commentForm.onsubmit = "event.preventDefault()"; + const addComment = () => { + const commentObject = { + person: document.getElementById("comment-name").value, + message: document.getElementById("comment-message").value, + ID: postID.toString(), + status: "live", // deleted comments will have a value of 'deleted' + }; - // const commentHeader = document.createElement("h3"); - // commentHeader.innerHTML = "Add a Comment"; + allPosts[i].comments.push(commentObject); + }; - // const commentMessageDiv = document.createElement("div"); - // commentMessageDiv.className = "form-group"; + const commentSubmitButton = document.createElement("button"); + commentSubmitButton.id = "submit-comment"; + commentSubmitButton.class = "btn btn-primary"; + commentSubmitButton.innerHTML = "Submit Comment"; + commentForm.appendChild(commentSubmitButton); - // const commentMessageArea = document.createElement("textarea"); - // commentMessageArea.id = "comment-message"; - // commentMessageArea.type = "text"; - // commentMessageArea.class = "form-control"; - // commentMessageArea.placeholder = "Your comment"; + const renderComments = () => { + const commentUl = document.createElement("ul"); - // commentMessageDiv.appendChild(commentMessageArea); + // for (let c = allPostDivs[i].length - 1; c >= 0; c--) { + // commentSection.removeChild(allPostDivs[i]); + // } - // const commenterDiv = document.createElement("div"); - // commenterDiv.className = "form-group"; + for (let c = 0; c < allPosts[i].comments.length; c++) { + const commentBy = document.createElement( + "span", + allPosts[i].comments[c].person + ); - // const commenterInputField = document.createElement("input"); - // commenterInputField.id = "comment-name"; - // commenterInputField.type = "text"; - // commenterInputField.class = "form-control"; - // commenterInputField.placeholder = "Your Name"; - // commenterDiv.appendChild(commenterInputField); + const commentLi = document.createElement("li"); - // } + const x = document.createElement("button"); + x.innerHTML = "X"; + x.className = "btn btn-link"; + x.style.fontWeight = "bold"; - const newPost = document.createElement("div"); - // newPost.style.margin = "20px"; - newPost.setAttribute("class", "post"); - newPost.setAttribute("data-postID", postID); // DO I NEED THIS? + x.addEventListener("click", function () { + commentUl.removeChild(commentLi); + }); + + commentBy.style.fontWeight = "500"; + commentBy.innerHTML = ` - Comment By: ${allPosts[i].comments[i].person}`; + + const commentMessage = document.createElement("span"); + commentMessage.innerHTML = allPosts[i].comments[c].message; + + commentLi.appendChild(x); + commentLi.appendChild(commentMessage); + commentLi.appendChild(commentBy); + commentUl.appendChild(commentLi); + + commentSection.appendChild(commentUl); + } + }; + commentsButton.addEventListener("click", () => { + //toggle comments secotn on off while toggling the posts form off and on + }); + + commentSubmitButton.addEventListener("click", () => { + addComment(); + renderComments(); + }); + + commentSection.appendChild(commentForm); + + renderComments(); newPost.appendChild(remove); newPost.appendChild(commentsButton); @@ -158,73 +176,6 @@ const renderPosts = () => { postsDiv.removeChild(newPost); }); - const toggleCommentsOn = () => { - postForm.style.display = "none"; - commentSection.style.display = "block"; - }; - - const toggleCommentsOff = () => { - postForm.style.display = "block"; - commentSection.style.display = "none"; - }; - - const commentSubmitButton = document.createElement("button"); - commentSubmitButton.id = "submit-comment"; - commentSubmitButton.class = "btn btn-primary"; - commentSubmitButton.innerHTML = "Submit Comment"; - - //for each post I want to create the appropriate divs, etc. with the information i have from the post object in the array - // 1. remove button, comments button, postPerson, Post Message with "Posted By:- " prefix - - const addComment = function () { - const commentObject = { - person: document.getElementById("comment-name").value, - message: document.getElementById("comment-message").value, - ID: postID.toString(), - }; - // parseInt(newPost.getAttribute("data-votes"), 10) - - // const commentBy = ` - Comment By: ${commentObject.person}`; - // // const message = document.getElementById("message").value; - const commentDiv = document.createElement("div")[0]; - - const x = document.createElement("button"); - remove.innerHTML = "X"; - // remove.style.margin = "5px"; - remove.className = "btn btn-link"; - remove.style.fontWeight = "bold"; - - x.addEventListener("click", function () { - commentSection.removeChild(commentDiv); - }); - - const commentOwner = document.createElement("span", commentObject.person); - commentOwner.style.fontWeight = "500"; - commentOwner.innerHTML = ` - Comment By: ${commentObject.person}`; - - const commentMessage = document.createElement("span"); - postMessage.innerHTML = postObject.message; - - commentDiv.appendChild(x); - commentDiv.appendChild(commentOwner); - commentDiv.appendChild(commentMessage); - - postObject.comments.push(commentObject); - }; - - commentSubmitButton.addEventListener("click", addComment); - - // () => { - // toggleCommentsOff(); - // // need to add the value of the comment message and the commentor to the post, and also need to toggle the comment form away and restore the add post form - // postForm.style.display = "block"; - // }); - - commentForm.appendChild(commentHeader); - commentForm.appendChild(commentMessageDiv); - commentForm.appendChild(commenterDiv); - commentForm.appendChild(commentSubmitButton); - if ( document.getElementById("name").value && document.getElementById("message").value @@ -238,5 +189,12 @@ const renderPosts = () => { renderPosts(); -postButton.addEventListener("click", addPost); -postButton.addEventListener("click", renderPosts); +postButton.addEventListener("click", (event) => { + event.preventDefault(); + addPost(); +}); +postButton.addEventListener("click", (event) => { + event.preventDefault(); + renderPosts(); +}); +// postButton.addEventListener("click", renderPosts); diff --git a/style.css b/style.css index 246ee180..aaac3251 100644 --- a/style.css +++ b/style.css @@ -9,3 +9,11 @@ line-height: inherit; padding: 0; } + +.show { + display: block; +} + +.hide { + display: none; +} From 0ed6443e5da8ef8944cbd1e118276dda8770b317 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Thu, 21 Nov 2024 23:16:56 -0500 Subject: [PATCH 06/15] Update comment data capture and comment render to correclty capture date for comments under subsequent posts. Also refacotor to localise the comment render only to the post in which the comments are added. --- main.js | 142 ++++++++++++++++++++++++++++++++++-------------------- style.css | 8 ++- 2 files changed, 96 insertions(+), 54 deletions(-) diff --git a/main.js b/main.js index 4c348fc4..003b4267 100644 --- a/main.js +++ b/main.js @@ -1,43 +1,49 @@ const postButton = document.getElementById("submit-post"); +let postMessage = document.getElementById("message").value; +let postName = document.getElementById("name").value; const postForm = document.getElementById("post-form"); const allPosts = []; +const removeElementByClass = (elementClass) => { + const allElementsWithClass = Array.from( + document.getElementsByClassName(elementClass) + ); + for (let i = 0; i < allElementsWithClass.length; i++) { + const element = allElementsWithClass[i]; + element.remove(); + } +}; let postID = 0; -let commentID = 0; const addPost = () => { const postObject = { person: document.getElementById("name").value, message: document.getElementById("message").value, - ID: postID.toString(), + ID: postID, comments: [], }; - //for each post I want to create the appropriate divs, etc. with the information i have from the post object in the array - // 1. remove button, comments button, postPerson, Post Message with "Posted By:- " prefix - allPosts.push(postObject); - - postID++; }; const renderPosts = () => { const postsDiv = document.getElementsByClassName("posts")[0]; - const allPostDivs = document.getElementsByClassName("post"); + // const allPostDivs = document.getElementsByClassName("post"); // DO I NEED THIS?? - for (let i = allPostDivs.length - 1; i >= 0; i--) { - postsDiv.removeChild(allPostDivs[i]); + if (document.getElementsByClassName("post")[0]) { + removeElementByClass("post"); } - for (let i = 0; i < allPosts.length; i++) { - const postedBy = ` - Posted By: ${allPosts[i].person}`; + // let postIndex = 0; + for (let p = 0; p < allPosts.length; p++) { + const postedBy = ` - Posted By: ${allPosts[p].person}`; const postOwner = document.createElement("span", postedBy); postOwner.style.fontWeight = "500"; - postOwner.innerHTML = ` - Posted By: ${allPosts[i].person}`; + postOwner.innerHTML = ` - Posted By: ${allPosts[p].person}`; const postMessage = document.createElement("span"); - postMessage.innerHTML = allPosts[i].message; + postMessage.innerHTML = allPosts[p].message; const remove = document.createElement("button"); remove.innerHTML = "remove"; @@ -46,7 +52,8 @@ const renderPosts = () => { const newPost = document.createElement("div"); newPost.setAttribute("class", "post"); - newPost.setAttribute("data-postID", postID); // DO I NEED THIS? + newPost.setAttribute("id", `postindex-${p}`); + // newPost.setAttribute("data-postIndex", p); // DO I NEED THIS? const commentsButton = document.createElement("button"); commentsButton.innerHTML = "comments"; @@ -56,14 +63,14 @@ const renderPosts = () => { const commentSection = document.createElement("div"); commentSection.className = "comments"; - // commentSection.style.display = "none"; + commentSection.style.display = "none"; - // const comments = document.createElement("div"); - // comments.className = "comments"; - // commentSection.appendChild(comments); + const commentUl = document.createElement("ul"); + commentSection.appendChild(commentUl); const commentForm = document.createElement("form"); commentForm.style = "margin-top:30px"; + commentForm.className; commentForm.onsubmit = (event) => event.preventDefault(); const commentHeader = document.createElement("h3"); @@ -74,9 +81,9 @@ const renderPosts = () => { commentMessageDiv.className = "form-group"; const commentMessageArea = document.createElement("textarea"); - commentMessageArea.id = "comment-message"; + commentMessageArea.id = `comment-message-input-${p}`; commentMessageArea.type = "text"; - commentMessageArea.class = "form-control"; + commentMessageArea.className = "form-control"; commentMessageArea.placeholder = "Your comment"; commentMessageDiv.appendChild(commentMessageArea); @@ -86,24 +93,26 @@ const renderPosts = () => { commenterDiv.className = "form-group"; const commenterInputField = document.createElement("input"); - commenterInputField.id = "comment-name"; + commenterInputField.id = `comment-name-input-${p}`; commenterInputField.type = "text"; - commenterInputField.class = "form-control"; + commenterInputField.className = "form-control"; commenterInputField.placeholder = "Your Name"; commenterDiv.appendChild(commenterInputField); commentForm.appendChild(commenterDiv); - commentSection.appendChild(commentForm); + let commentID = 0; const addComment = () => { const commentObject = { - person: document.getElementById("comment-name").value, - message: document.getElementById("comment-message").value, - ID: postID.toString(), + person: document.getElementById(`comment-name-input-${p}`).value, + message: document.getElementById(`comment-message-input-${p}`).value, + ID: commentID.toString(), status: "live", // deleted comments will have a value of 'deleted' }; - allPosts[i].comments.push(commentObject); + allPosts[p].comments.push(commentObject); + + commentID++; }; const commentSubmitButton = document.createElement("button"); @@ -113,19 +122,24 @@ const renderPosts = () => { commentForm.appendChild(commentSubmitButton); const renderComments = () => { - const commentUl = document.createElement("ul"); - - // for (let c = allPostDivs[i].length - 1; c >= 0; c--) { - // commentSection.removeChild(allPostDivs[i]); + // for (let c = allPostDivs[p].length - 1; c >= 0; c--) { + // commentSection.removeChild(allPostDivs[p]); // } - for (let c = 0; c < allPosts[i].comments.length; c++) { + if (document.getElementsByClassName(`commentSection-${p}`)) { + removeElementByClass(`commentSection-${p}`); + } + + for (let c = 0; c < allPosts[p].comments.length; c++) { const commentBy = document.createElement( "span", - allPosts[i].comments[c].person + allPosts[p].comments[c].person ); + commentBy.style.fontWeight = "500"; + commentBy.innerHTML = ` - Comment By: ${allPosts[p].comments[c].person}`; - const commentLi = document.createElement("li"); + const commentMessage = document.createElement("span"); + commentMessage.innerHTML = allPosts[p].comments[c].message; const x = document.createElement("button"); x.innerHTML = "X"; @@ -134,34 +148,53 @@ const renderPosts = () => { x.addEventListener("click", function () { commentUl.removeChild(commentLi); + allPosts[p].comments.splice([c], 1); }); - commentBy.style.fontWeight = "500"; - commentBy.innerHTML = ` - Comment By: ${allPosts[i].comments[i].person}`; - - const commentMessage = document.createElement("span"); - commentMessage.innerHTML = allPosts[i].comments[c].message; + const commentLi = document.createElement("li"); + commentLi.className = `comment commentSection-${p}`; + // commentLi.className = "comment"; commentLi.appendChild(x); commentLi.appendChild(commentMessage); commentLi.appendChild(commentBy); commentUl.appendChild(commentLi); - - commentSection.appendChild(commentUl); } }; - commentsButton.addEventListener("click", () => { - //toggle comments secotn on off while toggling the posts form off and on - }); commentSubmitButton.addEventListener("click", () => { addComment(); renderComments(); + document.getElementById(`comment-message-input-${p}`).value = ""; + document.getElementById(`comment-name-input-${p}`).value = ""; + // commentSection.className = "hide"; + // postForm.className = "show"; }); + commentSection.appendChild(commentUl); commentSection.appendChild(commentForm); - renderComments(); + commentsButton.addEventListener("click", () => { + if (commentSection.classList.contains("show")) { + commentSection.className = "comments"; + postForm.className = "show"; + } else { + commentSection.className += " show"; + postForm.className = "hide"; + } + + // if (commentSection.className === "comments hide") { + // commentSection.className = "comments show"; + // postForm.className = "hide"; + // } + + // if (commentSection.className === "comments show") { + // commentSection.className = "hide"; + // postForm.className = "show"; + // } + }); + + // renderComments(); newPost.appendChild(remove); newPost.appendChild(commentsButton); @@ -172,8 +205,12 @@ const renderPosts = () => { // newPost.appendChild(hr); remove.addEventListener("click", function () { - allPosts.splice([i], 1); + allPosts.splice([p], 1); postsDiv.removeChild(newPost); + + if (postForm.className === "hide") { + postForm.className = "show"; + } }); if ( @@ -183,18 +220,19 @@ const renderPosts = () => { postsDiv.appendChild(newPost); } else { alert("Please enter a message and your name."); + break; } + postID++; } }; -renderPosts(); +postID = 0; +// renderPosts(); postButton.addEventListener("click", (event) => { event.preventDefault(); addPost(); -}); -postButton.addEventListener("click", (event) => { - event.preventDefault(); renderPosts(); + document.getElementById("message").value = ""; + document.getElementById("name").value = ""; }); -// postButton.addEventListener("click", renderPosts); diff --git a/style.css b/style.css index aaac3251..5ecfe8cd 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -.text-button { +/* .text-button { background-color: transparent; border-width: 0; font-family: inherit; @@ -8,7 +8,7 @@ color: blue; line-height: inherit; padding: 0; -} +} */ .show { display: block; @@ -17,3 +17,7 @@ .hide { display: none; } + +ul { + list-style-type: none; +} From 402cae8ed871cf8d003f9b2e9bf7ee3842c1706f Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Thu, 21 Nov 2024 23:56:43 -0500 Subject: [PATCH 07/15] Fix bug where clicking the post submit button with nothing in the input fields resets the entire page html --- main.js | 40 ++++++++++++++++++++++++++++------------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/main.js b/main.js index 003b4267..0f33a0d6 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,4 @@ const postButton = document.getElementById("submit-post"); -let postMessage = document.getElementById("message").value; -let postName = document.getElementById("name").value; const postForm = document.getElementById("post-form"); const allPosts = []; @@ -13,23 +11,38 @@ const removeElementByClass = (elementClass) => { element.remove(); } }; + let postID = 0; const addPost = () => { - const postObject = { - person: document.getElementById("name").value, - message: document.getElementById("message").value, - ID: postID, - comments: [], - }; - - allPosts.push(postObject); + if ( + !document.getElementById("name").value || + !document.getElementById("message").value + ) { + alert("Please enter a message and your name."); + } else { + const postObject = { + person: document.getElementById("name").value, + message: document.getElementById("message").value, + ID: postID, + comments: [], + }; + + allPosts.push(postObject); + } }; const renderPosts = () => { const postsDiv = document.getElementsByClassName("posts")[0]; // const allPostDivs = document.getElementsByClassName("post"); // DO I NEED THIS?? + if ( + !document.getElementById("name").value || + !document.getElementById("message").value + ) { + return; + } + if (document.getElementsByClassName("post")[0]) { removeElementByClass("post"); } @@ -213,6 +226,8 @@ const renderPosts = () => { } }); + postsDiv.appendChild(newPost); + if ( document.getElementById("name").value && document.getElementById("message").value @@ -220,13 +235,14 @@ const renderPosts = () => { postsDiv.appendChild(newPost); } else { alert("Please enter a message and your name."); - break; } + postID++; } + postID = 0; }; -postID = 0; +// postID = 0; // renderPosts(); postButton.addEventListener("click", (event) => { From 475ee283170c07c3feb6c94c29744624287906ab Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Fri, 22 Nov 2024 00:14:47 -0500 Subject: [PATCH 08/15] Format comment form to distinguish it visually from the post form --- main.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 0f33a0d6..386909b7 100644 --- a/main.js +++ b/main.js @@ -76,6 +76,7 @@ const renderPosts = () => { const commentSection = document.createElement("div"); commentSection.className = "comments"; + commentSection.style.margin = "30px 50px 30px 50px"; commentSection.style.display = "none"; const commentUl = document.createElement("ul"); @@ -86,8 +87,8 @@ const renderPosts = () => { commentForm.className; commentForm.onsubmit = (event) => event.preventDefault(); - const commentHeader = document.createElement("h3"); - commentHeader.innerHTML = "Add a Comment"; + const commentHeader = document.createElement("h4"); + commentHeader.innerHTML = "Add a comment"; commentForm.appendChild(commentHeader); const commentMessageDiv = document.createElement("div"); @@ -209,11 +210,13 @@ const renderPosts = () => { // renderComments(); + const hr = document.createElement("hr"); newPost.appendChild(remove); newPost.appendChild(commentsButton); newPost.appendChild(postMessage); newPost.appendChild(postOwner); newPost.appendChild(commentSection); + newPost.appendChild(hr); // newPost.appendChild(hr); From 66742a6ba0ef3f87085b1ae89a9ea8ceecfd2f10 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Fri, 22 Nov 2024 00:56:23 -0500 Subject: [PATCH 09/15] Begin to create an 'edit post' funcitonality --- main.js | 45 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 386909b7..3aa3a6c4 100644 --- a/main.js +++ b/main.js @@ -84,7 +84,6 @@ const renderPosts = () => { const commentForm = document.createElement("form"); commentForm.style = "margin-top:30px"; - commentForm.className; commentForm.onsubmit = (event) => event.preventDefault(); const commentHeader = document.createElement("h4"); @@ -210,11 +209,55 @@ const renderPosts = () => { // renderComments(); + const editPostButton = document.createElement("button"); + editPostButton.innerHTML = "edit post"; + editPostButton.className = "btn btn-link"; + editPostButton.style.fontWeight = "bold"; + editPostButton.style.display = "inline-block"; + editPostButton.style.color = "green"; + + const editPostForm = document.createElement("form"); + editPostForm.style = "margin-top:30px"; + editPostForm.className = "hide"; + editPostForm.onsubmit = (event) => event.preventDefault(); + editPostForm.style.margin = "30px 20px 30px 70px"; + + const editPostMessageDiv = document.createElement("div"); + editPostMessageDiv.className = "form-group"; + + const editPostMessageArea = document.createElement("textarea"); + editPostMessageArea.id = `update-message-input-${p}`; + editPostMessageArea.type = "text"; + editPostMessageArea.className = "form-control"; + editPostMessageArea.value = allPosts[p].message; + postMessage.innerHTML = editPostMessageArea.value; + + editPostMessageDiv.appendChild(editPostMessageArea); + + editPostButton.addEventListener("click", () => { + //toggle the editPostForm to appear + }); + + const submitEditedPostButton = document.createElement("button"); + submitEditedPostButton.id = "submit-edited-post"; + submitEditedPostButton.class = "btn btn-primary"; + submitEditedPostButton.innerHTML = "Update Post"; + submitEditedPostButton.addEventListener("click", () => { + // update value of the original post message + //toggle the form to hide + }); + editPostForm.appendChild(editPostMessageDiv); + editPostForm.appendChild(submitEditedPostButton); + editPostForm.appendChild(submitEditedPostButton); + const hr = document.createElement("hr"); + newPost.appendChild(remove); newPost.appendChild(commentsButton); newPost.appendChild(postMessage); newPost.appendChild(postOwner); + newPost.appendChild(editPostButton); + newPost.appendChild(editPostForm); newPost.appendChild(commentSection); newPost.appendChild(hr); From 577e093f611a4932c0c0671d799ea68e88db2fbf Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Fri, 22 Nov 2024 14:10:26 -0500 Subject: [PATCH 10/15] Update main.js to add functional edit post button --- main.js | 59 ++++++++++++++++++++++++++++++++++--------------------- style.css | 11 +++++++++++ 2 files changed, 48 insertions(+), 22 deletions(-) diff --git a/main.js b/main.js index 3aa3a6c4..4f2e4568 100644 --- a/main.js +++ b/main.js @@ -76,7 +76,7 @@ const renderPosts = () => { const commentSection = document.createElement("div"); commentSection.className = "comments"; - commentSection.style.margin = "30px 50px 30px 50px"; + // commentSection.style.margin = "30px 50px 30px 50px"; commentSection.style.display = "none"; const commentUl = document.createElement("ul"); @@ -175,9 +175,14 @@ const renderPosts = () => { } }; + renderComments(); + commentSubmitButton.addEventListener("click", () => { addComment(); renderComments(); + // commentSection.className = "comments"; + // commentSection.style.display = "none"; + /// document.getElementById(`comment-message-input-${p}`).value = ""; document.getElementById(`comment-name-input-${p}`).value = ""; // commentSection.className = "hide"; @@ -188,27 +193,15 @@ const renderPosts = () => { commentSection.appendChild(commentForm); commentsButton.addEventListener("click", () => { - if (commentSection.classList.contains("show")) { + if (commentSection.classList.contains("take-precedence")) { commentSection.className = "comments"; - postForm.className = "show"; + commentSection.style.display = "none"; } else { - commentSection.className += " show"; - postForm.className = "hide"; + commentSection.className += " take-precedence"; + commentSection.style.display = "block"; } - - // if (commentSection.className === "comments hide") { - // commentSection.className = "comments show"; - // postForm.className = "hide"; - // } - - // if (commentSection.className === "comments show") { - // commentSection.className = "hide"; - // postForm.className = "show"; - // } }); - // renderComments(); - const editPostButton = document.createElement("button"); editPostButton.innerHTML = "edit post"; editPostButton.className = "btn btn-link"; @@ -218,7 +211,7 @@ const renderPosts = () => { const editPostForm = document.createElement("form"); editPostForm.style = "margin-top:30px"; - editPostForm.className = "hide"; + editPostForm.style.display = "none"; editPostForm.onsubmit = (event) => event.preventDefault(); editPostForm.style.margin = "30px 20px 30px 70px"; @@ -233,19 +226,41 @@ const renderPosts = () => { postMessage.innerHTML = editPostMessageArea.value; editPostMessageDiv.appendChild(editPostMessageArea); - + editPostForm.appendChild(editPostMessageDiv); editPostButton.addEventListener("click", () => { - //toggle the editPostForm to appear + if (editPostForm.classList.contains("take-precedence")) { + editPostForm.className = ""; + editPostForm.style.display = "none"; + } else { + editPostForm.className += " take-precedence"; + editPostForm.style.display = "block"; + } }); const submitEditedPostButton = document.createElement("button"); submitEditedPostButton.id = "submit-edited-post"; submitEditedPostButton.class = "btn btn-primary"; submitEditedPostButton.innerHTML = "Update Post"; + submitEditedPostButton.addEventListener("click", () => { - // update value of the original post message - //toggle the form to hide + if (!editPostMessageArea.value) { + alert("No input given."); + } else { + allPosts[p].message = editPostMessageArea.value; + postMessage.innerHTML = allPosts[p].message; + } + + renderPosts(); + + if (commentSection.classList.contains("take-precedence")) { + editPostForm.className += " take-precedence"; + editPostForm.style.display = "block"; + } else { + editPostForm.className = ""; + editPostForm.style.display = "none"; + } }); + editPostForm.appendChild(editPostMessageDiv); editPostForm.appendChild(submitEditedPostButton); editPostForm.appendChild(submitEditedPostButton); diff --git a/style.css b/style.css index 5ecfe8cd..5083a643 100644 --- a/style.css +++ b/style.css @@ -21,3 +21,14 @@ ul { list-style-type: none; } + +.take-precedence { + position: relative; + display: block; + width: 100%; + /* height: 100%; */ + /* padding: 10px 200px 200px 200px; */ + padding: 10px 50px 10px 50px; + background-color: white; + margin: 0%; +} From 6e814f719b1df23df2e0433627d8e7cfcc7828f2 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Fri, 22 Nov 2024 14:41:52 -0500 Subject: [PATCH 11/15] Update some styling and add toggle function to re-use when toggling differen sections of the page. --- main.js | 62 ++++++++++++++++++++++--------------------------------- style.css | 8 +++++++ 2 files changed, 33 insertions(+), 37 deletions(-) diff --git a/main.js b/main.js index 4f2e4568..101b2e85 100644 --- a/main.js +++ b/main.js @@ -12,6 +12,16 @@ const removeElementByClass = (elementClass) => { } }; +const toggle = (section) => { + if (section.classList.contains("take-precedence")) { + section.className = "comments"; + section.style.display = "none"; + } else { + section.className += " take-precedence"; + section.style.display = "block"; + } +}; + let postID = 0; const addPost = () => { @@ -51,16 +61,17 @@ const renderPosts = () => { for (let p = 0; p < allPosts.length; p++) { const postedBy = ` - Posted By: ${allPosts[p].person}`; - const postOwner = document.createElement("span", postedBy); + const postOwner = document.createElement("p", postedBy); postOwner.style.fontWeight = "500"; postOwner.innerHTML = ` - Posted By: ${allPosts[p].person}`; - const postMessage = document.createElement("span"); + const postMessage = document.createElement("p"); postMessage.innerHTML = allPosts[p].message; const remove = document.createElement("button"); remove.innerHTML = "remove"; remove.className = "btn btn-link"; + remove.style.color = "rgb(171, 76, 76)"; remove.style.fontWeight = "bold"; const newPost = document.createElement("div"); @@ -71,6 +82,7 @@ const renderPosts = () => { const commentsButton = document.createElement("button"); commentsButton.innerHTML = "comments"; commentsButton.className = "btn btn-link"; + commentsButton.style.color = "cadetblue"; commentsButton.style.fontWeight = "bold"; commentsButton.style.display = "inline-block"; @@ -130,7 +142,8 @@ const renderPosts = () => { const commentSubmitButton = document.createElement("button"); commentSubmitButton.id = "submit-comment"; - commentSubmitButton.class = "btn btn-primary"; + commentSubmitButton.className = "btn btn-primary"; + commentSubmitButton.style.backgroundColor = "cadetblue"; commentSubmitButton.innerHTML = "Submit Comment"; commentForm.appendChild(commentSubmitButton); @@ -180,27 +193,14 @@ const renderPosts = () => { commentSubmitButton.addEventListener("click", () => { addComment(); renderComments(); - // commentSection.className = "comments"; - // commentSection.style.display = "none"; - /// document.getElementById(`comment-message-input-${p}`).value = ""; document.getElementById(`comment-name-input-${p}`).value = ""; - // commentSection.className = "hide"; - // postForm.className = "show"; }); commentSection.appendChild(commentUl); commentSection.appendChild(commentForm); - commentsButton.addEventListener("click", () => { - if (commentSection.classList.contains("take-precedence")) { - commentSection.className = "comments"; - commentSection.style.display = "none"; - } else { - commentSection.className += " take-precedence"; - commentSection.style.display = "block"; - } - }); + commentsButton.addEventListener("click", () => toggle(commentSection)); const editPostButton = document.createElement("button"); editPostButton.innerHTML = "edit post"; @@ -211,9 +211,10 @@ const renderPosts = () => { const editPostForm = document.createElement("form"); editPostForm.style = "margin-top:30px"; + editPostForm.className = "post"; editPostForm.style.display = "none"; editPostForm.onsubmit = (event) => event.preventDefault(); - editPostForm.style.margin = "30px 20px 30px 70px"; + // editPostForm.style.margin = "30px 20px 30px 70px"; const editPostMessageDiv = document.createElement("div"); editPostMessageDiv.className = "form-group"; @@ -227,19 +228,12 @@ const renderPosts = () => { editPostMessageDiv.appendChild(editPostMessageArea); editPostForm.appendChild(editPostMessageDiv); - editPostButton.addEventListener("click", () => { - if (editPostForm.classList.contains("take-precedence")) { - editPostForm.className = ""; - editPostForm.style.display = "none"; - } else { - editPostForm.className += " take-precedence"; - editPostForm.style.display = "block"; - } - }); + editPostButton.addEventListener("click", () => toggle(editPostForm)); const submitEditedPostButton = document.createElement("button"); submitEditedPostButton.id = "submit-edited-post"; - submitEditedPostButton.class = "btn btn-primary"; + submitEditedPostButton.className = "btn btn-primary"; + submitEditedPostButton.style.backgroundColor = "green"; submitEditedPostButton.innerHTML = "Update Post"; submitEditedPostButton.addEventListener("click", () => { @@ -252,13 +246,7 @@ const renderPosts = () => { renderPosts(); - if (commentSection.classList.contains("take-precedence")) { - editPostForm.className += " take-precedence"; - editPostForm.style.display = "block"; - } else { - editPostForm.className = ""; - editPostForm.style.display = "none"; - } + toggle(editPostForm); }); editPostForm.appendChild(editPostMessageDiv); @@ -267,10 +255,10 @@ const renderPosts = () => { const hr = document.createElement("hr"); - newPost.appendChild(remove); - newPost.appendChild(commentsButton); newPost.appendChild(postMessage); newPost.appendChild(postOwner); + newPost.appendChild(remove); + newPost.appendChild(commentsButton); newPost.appendChild(editPostButton); newPost.appendChild(editPostForm); newPost.appendChild(commentSection); diff --git a/style.css b/style.css index 5083a643..ce3c422b 100644 --- a/style.css +++ b/style.css @@ -32,3 +32,11 @@ ul { background-color: white; margin: 0%; } + +.button { + color: rgb(171, 76, 76); +} +.post:hover { + background-color: rgb(241, 241, 241); + border-color: rgb(146, 146, 146); +} From fc1bebd10cc842e84232b16767d57de79b8bc5fa Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Sat, 23 Nov 2024 22:43:17 -0500 Subject: [PATCH 12/15] Update index.html, main.js and style.css to perform toggle on appropriate sections on and off. Comment section and Udpate Post section will both toggle off the Add Post Form, and they will each toggle one another on and off (while keeping the Add Post Form toggled off). When both the comment section and update post section are toggled off, the Add Post form returns. --- index.html | 2 +- main.js | 50 ++++++++++++++++++++++++++++++++------------------ style.css | 14 +++++++------- 3 files changed, 40 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 60c9186b..c7e0ea01 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

ReReddit

- +

Add a new post

diff --git a/main.js b/main.js index 101b2e85..bb1d92a1 100644 --- a/main.js +++ b/main.js @@ -12,13 +12,26 @@ const removeElementByClass = (elementClass) => { } }; -const toggle = (section) => { - if (section.classList.contains("take-precedence")) { - section.className = "comments"; - section.style.display = "none"; - } else { - section.className += " take-precedence"; - section.style.display = "block"; +const toggleSection = (section) => { + const allToggleSections = document.getElementsByClassName("toggle"); + + for (let i = 0; i < allToggleSections.length; i++) { + const element = allToggleSections[i]; + + if (element === section) { + section.classList.toggle("hide"); + } else { + element.classList.add("hide"); + } + + if ( + section.classList.contains("toggle") && + !section.classList.contains("hide") + ) { + postForm.classList.add("hide"); + } else { + postForm.classList.remove("hide"); + } } }; @@ -44,7 +57,6 @@ const addPost = () => { const renderPosts = () => { const postsDiv = document.getElementsByClassName("posts")[0]; - // const allPostDivs = document.getElementsByClassName("post"); // DO I NEED THIS?? if ( !document.getElementById("name").value || @@ -57,7 +69,6 @@ const renderPosts = () => { removeElementByClass("post"); } - // let postIndex = 0; for (let p = 0; p < allPosts.length; p++) { const postedBy = ` - Posted By: ${allPosts[p].person}`; @@ -87,14 +98,15 @@ const renderPosts = () => { commentsButton.style.display = "inline-block"; const commentSection = document.createElement("div"); - commentSection.className = "comments"; - // commentSection.style.margin = "30px 50px 30px 50px"; - commentSection.style.display = "none"; + commentSection.className = "comments toggle hide"; + commentSection.style.margin = "10px 50px 10px 50px"; + // commentSection.style.display = "none"; const commentUl = document.createElement("ul"); commentSection.appendChild(commentUl); const commentForm = document.createElement("form"); + // commentForm.className = "toggle"; commentForm.style = "margin-top:30px"; commentForm.onsubmit = (event) => event.preventDefault(); @@ -200,7 +212,9 @@ const renderPosts = () => { commentSection.appendChild(commentUl); commentSection.appendChild(commentForm); - commentsButton.addEventListener("click", () => toggle(commentSection)); + commentsButton.addEventListener("click", () => { + toggleSection(commentSection); + }); const editPostButton = document.createElement("button"); editPostButton.innerHTML = "edit post"; @@ -210,9 +224,9 @@ const renderPosts = () => { editPostButton.style.color = "green"; const editPostForm = document.createElement("form"); - editPostForm.style = "margin-top:30px"; - editPostForm.className = "post"; - editPostForm.style.display = "none"; + editPostForm.style = "margin:30px 50px 30px 50px"; + editPostForm.className = "post toggle hide"; + // editPostForm.style.display = "none"; editPostForm.onsubmit = (event) => event.preventDefault(); // editPostForm.style.margin = "30px 20px 30px 70px"; @@ -228,7 +242,7 @@ const renderPosts = () => { editPostMessageDiv.appendChild(editPostMessageArea); editPostForm.appendChild(editPostMessageDiv); - editPostButton.addEventListener("click", () => toggle(editPostForm)); + editPostButton.addEventListener("click", () => toggleSection(editPostForm)); const submitEditedPostButton = document.createElement("button"); submitEditedPostButton.id = "submit-edited-post"; @@ -246,7 +260,7 @@ const renderPosts = () => { renderPosts(); - toggle(editPostForm); + toggleSection(editPostForm); }); editPostForm.appendChild(editPostMessageDiv); diff --git a/style.css b/style.css index ce3c422b..cc064afc 100644 --- a/style.css +++ b/style.css @@ -22,21 +22,21 @@ ul { list-style-type: none; } -.take-precedence { - position: relative; +/* .take-precedence { + position: absolute; display: block; width: 100%; - /* height: 100%; */ - /* padding: 10px 200px 200px 200px; */ + height: 100%; + padding: 10px 200px 200px 200px; padding: 10px 50px 10px 50px; background-color: white; margin: 0%; -} +} */ .button { color: rgb(171, 76, 76); } -.post:hover { +/* .post:hover { background-color: rgb(241, 241, 241); border-color: rgb(146, 146, 146); -} +} */ From 1609af778bd172bb00bca7a228a67874aabb5419 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Sat, 23 Nov 2024 22:58:20 -0500 Subject: [PATCH 13/15] Remove commented out code and console logs, and standardize funcitons to use arrow function syntax --- main.js | 40 +++++++++++----------------------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/main.js b/main.js index bb1d92a1..3e0322ba 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,7 @@ const postButton = document.getElementById("submit-post"); const postForm = document.getElementById("post-form"); const allPosts = []; +let postID = 0; const removeElementByClass = (elementClass) => { const allElementsWithClass = Array.from( @@ -35,8 +36,6 @@ const toggleSection = (section) => { } }; -let postID = 0; - const addPost = () => { if ( !document.getElementById("name").value || @@ -84,11 +83,18 @@ const renderPosts = () => { remove.className = "btn btn-link"; remove.style.color = "rgb(171, 76, 76)"; remove.style.fontWeight = "bold"; + remove.addEventListener("click", () => { + allPosts.splice([p], 1); + postsDiv.removeChild(newPost); + + if (postForm.className === "hide") { + postForm.className = "show"; + } + }); const newPost = document.createElement("div"); newPost.setAttribute("class", "post"); newPost.setAttribute("id", `postindex-${p}`); - // newPost.setAttribute("data-postIndex", p); // DO I NEED THIS? const commentsButton = document.createElement("button"); commentsButton.innerHTML = "comments"; @@ -100,13 +106,11 @@ const renderPosts = () => { const commentSection = document.createElement("div"); commentSection.className = "comments toggle hide"; commentSection.style.margin = "10px 50px 10px 50px"; - // commentSection.style.display = "none"; const commentUl = document.createElement("ul"); commentSection.appendChild(commentUl); const commentForm = document.createElement("form"); - // commentForm.className = "toggle"; commentForm.style = "margin-top:30px"; commentForm.onsubmit = (event) => event.preventDefault(); @@ -144,7 +148,6 @@ const renderPosts = () => { person: document.getElementById(`comment-name-input-${p}`).value, message: document.getElementById(`comment-message-input-${p}`).value, ID: commentID.toString(), - status: "live", // deleted comments will have a value of 'deleted' }; allPosts[p].comments.push(commentObject); @@ -160,10 +163,6 @@ const renderPosts = () => { commentForm.appendChild(commentSubmitButton); const renderComments = () => { - // for (let c = allPostDivs[p].length - 1; c >= 0; c--) { - // commentSection.removeChild(allPostDivs[p]); - // } - if (document.getElementsByClassName(`commentSection-${p}`)) { removeElementByClass(`commentSection-${p}`); } @@ -182,16 +181,16 @@ const renderPosts = () => { const x = document.createElement("button"); x.innerHTML = "X"; x.className = "btn btn-link"; + x.style.color = "cadetblue"; x.style.fontWeight = "bold"; - x.addEventListener("click", function () { + x.addEventListener("click", () => { commentUl.removeChild(commentLi); allPosts[p].comments.splice([c], 1); }); const commentLi = document.createElement("li"); commentLi.className = `comment commentSection-${p}`; - // commentLi.className = "comment"; commentLi.appendChild(x); commentLi.appendChild(commentMessage); @@ -226,9 +225,7 @@ const renderPosts = () => { const editPostForm = document.createElement("form"); editPostForm.style = "margin:30px 50px 30px 50px"; editPostForm.className = "post toggle hide"; - // editPostForm.style.display = "none"; editPostForm.onsubmit = (event) => event.preventDefault(); - // editPostForm.style.margin = "30px 20px 30px 70px"; const editPostMessageDiv = document.createElement("div"); editPostMessageDiv.className = "form-group"; @@ -278,17 +275,6 @@ const renderPosts = () => { newPost.appendChild(commentSection); newPost.appendChild(hr); - // newPost.appendChild(hr); - - remove.addEventListener("click", function () { - allPosts.splice([p], 1); - postsDiv.removeChild(newPost); - - if (postForm.className === "hide") { - postForm.className = "show"; - } - }); - postsDiv.appendChild(newPost); if ( @@ -302,12 +288,8 @@ const renderPosts = () => { postID++; } - postID = 0; }; -// postID = 0; -// renderPosts(); - postButton.addEventListener("click", (event) => { event.preventDefault(); addPost(); From 8f142bf1ec4e07d77fa722a8c802377e78dadcdd Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Sat, 23 Nov 2024 23:05:12 -0500 Subject: [PATCH 14/15] Remove commented out code in style.css --- style.css | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/style.css b/style.css index cc064afc..c9fc516d 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,3 @@ -/* .text-button { - background-color: transparent; - border-width: 0; - font-family: inherit; - font-size: inherit; - font-style: inherit; - font-weight: bold; - color: blue; - line-height: inherit; - padding: 0; -} */ - .show { display: block; } @@ -22,21 +10,6 @@ ul { list-style-type: none; } -/* .take-precedence { - position: absolute; - display: block; - width: 100%; - height: 100%; - padding: 10px 200px 200px 200px; - padding: 10px 50px 10px 50px; - background-color: white; - margin: 0%; -} */ - .button { color: rgb(171, 76, 76); } -/* .post:hover { - background-color: rgb(241, 241, 241); - border-color: rgb(146, 146, 146); -} */ From 18080216498d5193b3a8b033a3ce0690a91ca335 Mon Sep 17 00:00:00 2001 From: Ben Doggett Date: Wed, 4 Dec 2024 23:21:57 -0500 Subject: [PATCH 15/15] Work on bootstrap stylng and add title for the Five-Day-Forecast section --- .vscode/settings.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +}