From bfc4a9cbe8d284f534a052d0fbc79c1360e338c2 Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Thu, 31 Oct 2024 11:23:34 -0500 Subject: [PATCH 01/10] Initial Commit --- index.html | 0 main.js | 0 style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) 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..e69de29b diff --git a/main.js b/main.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From f9aac566a0c8b16bff17fbe73ad46a14c38533fc Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Thu, 31 Oct 2024 17:08:16 -0500 Subject: [PATCH 02/10] Add structure to page and simple styling. Write notes on main.js --- index.html | 41 +++++++++++++++++++++++++++++++++++++++++ main.js | 11 +++++++++++ style.css | 3 +++ 3 files changed, 55 insertions(+) diff --git a/index.html b/index.html index e69de29b..5eec148c 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + Re-Reddit + + +
+

ReReddit

+
+

Posts:

+
+
+
+
    +
  • A post of some kind.
    • +
  • Some kind of post.
    • +
+
+
+
+ +
+
+
+
+ +
+
+ +
+ + diff --git a/main.js b/main.js index e69de29b..097c11bd 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,11 @@ +// create variables that hold element creation // +// create variables that hold existing element data // +// create a variable that has string info ("posted by:") // +// create event listener that listens for clicks to add posts // +// Make both text entries required for submission // + + +// Phase Two: Comments // +// Make posts into clickable buttons that open comment posting interface // +// Create ability to remove comments // +// More..?? // diff --git a/style.css b/style.css index e69de29b..2a1e77ac 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,3 @@ +li { + font-size: x-large; +} From 6dbd9d26c643eb81fb685c3f822bcf9d5c428e94 Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Fri, 1 Nov 2024 14:19:02 -0500 Subject: [PATCH 03/10] Add functionality for making posts. Add remove button for posts. Comments does not work yet. --- index.html | 26 ++++++++++++++++++-------- main.js | 43 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 5eec148c..e7b322f6 100644 --- a/index.html +++ b/index.html @@ -19,23 +19,33 @@

ReReddit

Posts:

-
-
    -
  • A post of some kind.
    • -
  • Some kind of post.
    • -
+
+
    - +
    - +

    - +
    + diff --git a/main.js b/main.js index 097c11bd..84a65856 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -// create variables that hold element creation // + // create variables that hold existing element data // // create a variable that has string info ("posted by:") // // create event listener that listens for clicks to add posts // @@ -9,3 +9,44 @@ // Make posts into clickable buttons that open comment posting interface // // Create ability to remove comments // // More..?? // + + +var postBtn = document.getElementById('post-btn') +var postSection = document.getElementById('post-section') +var postNameInput = document.getElementById('name-input') +var postInput = document.getElementById('post-input') +var removeBtn = document.getElementsByClassName('remove')[0] +var commentsBtn = document.getElementsByClassName('comments')[0] +var postList = document.getElementById('post-list') + + +postList.addEventListener('click', function(e) { + if (e.target.classList.contains('remove')) { + e.target.closest('.list-group-item').remove() + } else if (e.target.classList.contains('comments')) { + + } +}) + + + + + +// Handles posting // +postBtn.addEventListener('click', function () { + if (!postNameInput.value || !postInput.value || postNameInput.value === " " || postInput.value === " ") { + alert('Both fields must be filled out to post.') + }else { + postSection.innerHTML += `
  • ${postInput.value} - Posted By: ${postNameInput.value}
    • ` + + postNameInput.value = "" + postInput.value = "" + + } + + +}) + + + + From fe6e689c9f441ae4df878646b5dbfa0b63f8382c Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Mon, 4 Nov 2024 13:35:58 -0600 Subject: [PATCH 04/10] Begin work on comments section --- index.html | 2 +- main.js | 48 +++++++++++++----------------------------------- 2 files changed, 14 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index e7b322f6..de33fc8b 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

    Posts:

    -
      +
      diff --git a/main.js b/main.js index 84a65856..7d7d7725 100644 --- a/main.js +++ b/main.js @@ -1,52 +1,30 @@ - -// create variables that hold existing element data // -// create a variable that has string info ("posted by:") // -// create event listener that listens for clicks to add posts // -// Make both text entries required for submission // - - -// Phase Two: Comments // -// Make posts into clickable buttons that open comment posting interface // -// Create ability to remove comments // -// More..?? // - - -var postBtn = document.getElementById('post-btn') -var postSection = document.getElementById('post-section') -var postNameInput = document.getElementById('name-input') -var postInput = document.getElementById('post-input') -var removeBtn = document.getElementsByClassName('remove')[0] -var commentsBtn = document.getElementsByClassName('comments')[0] -var postList = document.getElementById('post-list') - +const postBtn = document.getElementById('post-btn') +const postSection = document.getElementById('post-section') +const postNameInput = document.getElementById('name-input') +const postInput = document.getElementById('post-input') +const removeBtn = document.getElementsByClassName('remove')[0] +const commentsBtn = document.getElementsByClassName('comments')[0] +const postList = document.getElementById('post-list') +const commentInput = document.getElementById('comment-input') +const commentName = document.getElementById('comment-name') postList.addEventListener('click', function(e) { if (e.target.classList.contains('remove')) { e.target.closest('.list-group-item').remove() } else if (e.target.classList.contains('comments')) { + } }) - - - - // Handles posting // postBtn.addEventListener('click', function () { if (!postNameInput.value || !postInput.value || postNameInput.value === " " || postInput.value === " ") { alert('Both fields must be filled out to post.') }else { - postSection.innerHTML += `
    • ${postInput.value} - Posted By: ${postNameInput.value}
      • ` - + postSection.innerHTML += `
      ${postInput.value} - Posted By: ${postNameInput.value}
      ` + postSection.innerHTML += '
      ' postNameInput.value = "" postInput.value = "" - } - - -}) - - - - +}) \ No newline at end of file From 1f29eebf32d45420ee0af417cf72ea05b18110e3 Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Wed, 6 Nov 2024 13:41:37 -0600 Subject: [PATCH 05/10] Refactor code to track posts inside an object --- main.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index 7d7d7725..310a2d41 100644 --- a/main.js +++ b/main.js @@ -1,3 +1,4 @@ +const allPosts = {} const postBtn = document.getElementById('post-btn') const postSection = document.getElementById('post-section') const postNameInput = document.getElementById('name-input') @@ -12,19 +13,34 @@ postList.addEventListener('click', function(e) { if (e.target.classList.contains('remove')) { e.target.closest('.list-group-item').remove() } else if (e.target.classList.contains('comments')) { + renderComments() - + // `
      ` } }) -// Handles posting // -postBtn.addEventListener('click', function () { +function renderComments() { + allPosts.comments.forEach((comment) => { + postSection.innerHTML += `
      ${comment}
      ` + }) +} + +function renderPosts() { if (!postNameInput.value || !postInput.value || postNameInput.value === " " || postInput.value === " ") { alert('Both fields must be filled out to post.') }else { - postSection.innerHTML += `
      ${postInput.value} - Posted By: ${postNameInput.value}
      ` - postSection.innerHTML += '
      ' + allPosts[` ${postInput.value} -Posted By: ${postNameInput.value}`] = {comments: []} + postSection.innerHTML = "" + for (posts in allPosts) { + postSection.innerHTML += `
      ${posts}
      ` + } postNameInput.value = "" postInput.value = "" } +} + +// Handles posting // +postBtn.addEventListener('click', function () { + renderPosts() + console.log(allPosts) }) \ No newline at end of file From 642f55857ff599133111b516483918b3663007a4 Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Fri, 8 Nov 2024 14:37:05 -0600 Subject: [PATCH 06/10] Refactor code to add comment input fields upon button click. Assign ID's to each post. --- main.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 60 insertions(+), 14 deletions(-) diff --git a/main.js b/main.js index 310a2d41..d720352b 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -const allPosts = {} +let data = [] const postBtn = document.getElementById('post-btn') const postSection = document.getElementById('post-section') const postNameInput = document.getElementById('name-input') @@ -6,34 +6,74 @@ const postInput = document.getElementById('post-input') const removeBtn = document.getElementsByClassName('remove')[0] const commentsBtn = document.getElementsByClassName('comments')[0] const postList = document.getElementById('post-list') -const commentInput = document.getElementById('comment-input') -const commentName = document.getElementById('comment-name') postList.addEventListener('click', function(e) { if (e.target.classList.contains('remove')) { e.target.closest('.list-group-item').remove() } else if (e.target.classList.contains('comments')) { - renderComments() + console.log(e.target.closest('div')) + commentsInputFields(e) + // renderComments() - // `
      ` } }) +function commentsInputFields(e) { + const nearestDiv = e.target.closest('div') + const div1 = document.createElement('div') + div1.className = 'container' + + const div2 = document.createElement('div') + div2.className = 'container' + + const inputDiv1 = document.createElement('div') + inputDiv1.className = 'input-group input-group-lg mb-3' + + const inputDiv2 = document.createElement('div') + inputDiv2.className = "input-group input-group-lg mb-3" + + const commentsInput = document.createElement('input') + commentsInput.type = 'text' + commentsInput.className = 'form-control' + commentsInput.placeholder = 'Comment Text' + + const commentsNameInput = document.createElement('input') + commentsNameInput.type = 'text' + commentsNameInput.className = 'form-control' + commentsNameInput.placeholder = 'Your Name' + + nearestDiv.append(div1) + nearestDiv.append(div2) + div1.append(inputDiv1) + div2.append(inputDiv2) + inputDiv1.append(commentsInput) + inputDiv2.append(commentsNameInput) +} + function renderComments() { - allPosts.comments.forEach((comment) => { - postSection.innerHTML += `
      ${comment}
      ` - }) + + + } function renderPosts() { if (!postNameInput.value || !postInput.value || postNameInput.value === " " || postInput.value === " ") { alert('Both fields must be filled out to post.') }else { - allPosts[` ${postInput.value} -Posted By: ${postNameInput.value}`] = {comments: []} - postSection.innerHTML = "" - for (posts in allPosts) { - postSection.innerHTML += `
      ${posts}
      ` + const randomId = Math.random() + let post = { + id: randomId, + posterName: postNameInput.value, + postText: postInput.value, + comments: [] } + data.push(post) + console.log(data) + postSection.innerHTML = "" + data.forEach((post) => { + postSection.innerHTML += `
      ${post.postText} -Posted By: ${post.posterName}
      ` + }) + postNameInput.value = "" postInput.value = "" } @@ -42,5 +82,11 @@ function renderPosts() { // Handles posting // postBtn.addEventListener('click', function () { renderPosts() - console.log(allPosts) -}) \ No newline at end of file +}) + + +// `
      ` + +// let div = document.createElement("div"); +// let p = document.createElement("p"); +// div.append(p); From 11b6089a7cf1802584eba28c30d04fb928e580b6 Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Fri, 8 Nov 2024 22:00:55 -0600 Subject: [PATCH 07/10] Add 'add comment' button. Fix remove button to remove the specific post from html and the array. --- main.js | 56 +++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 17 deletions(-) diff --git a/main.js b/main.js index d720352b..651fa43a 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -let data = [] +const data = [] const postBtn = document.getElementById('post-btn') const postSection = document.getElementById('post-section') const postNameInput = document.getElementById('name-input') @@ -9,71 +9,93 @@ const postList = document.getElementById('post-list') postList.addEventListener('click', function(e) { if (e.target.classList.contains('remove')) { + const targetId = JSON.parse(e.target.id) + const indexToRem = data.findIndex(post => post.remId === targetId) + data.shift(indexToRem) e.target.closest('.list-group-item').remove() } else if (e.target.classList.contains('comments')) { - console.log(e.target.closest('div')) + + // Add and if else that checks if the elements already exist commentsInputFields(e) // renderComments() + } else if (e.target.classList.contains('btn-primary')) { + const commentData = { + name: commentsNameInput.value, + comment: commentsInput.value + } + + // Find a way to link the button to the id and thus the index and push it in to the comments array // + + const postId = e.target.closest('.comments') + console.log(postId) } }) +const div1 = document.createElement('div') +const div2 = document.createElement('div') +const inputDiv1 = document.createElement('div') +const inputDiv2 = document.createElement('div') +const commentsInput = document.createElement('input') +const commentsNameInput = document.createElement('input') + function commentsInputFields(e) { + const addCommentBtn = document.createElement('button') + addCommentBtn.type = 'button' + addCommentBtn.className = 'btn btn-primary' + addCommentBtn.innerText = 'Post Comment' const nearestDiv = e.target.closest('div') - const div1 = document.createElement('div') div1.className = 'container' - const div2 = document.createElement('div') div2.className = 'container' - const inputDiv1 = document.createElement('div') inputDiv1.className = 'input-group input-group-lg mb-3' - const inputDiv2 = document.createElement('div') inputDiv2.className = "input-group input-group-lg mb-3" - const commentsInput = document.createElement('input') commentsInput.type = 'text' commentsInput.className = 'form-control' commentsInput.placeholder = 'Comment Text' - const commentsNameInput = document.createElement('input') commentsNameInput.type = 'text' commentsNameInput.className = 'form-control' commentsNameInput.placeholder = 'Your Name' nearestDiv.append(div1) nearestDiv.append(div2) + nearestDiv.append(addCommentBtn) div1.append(inputDiv1) div2.append(inputDiv2) inputDiv1.append(commentsInput) inputDiv2.append(commentsNameInput) } -function renderComments() { +function renderComments(e) { - - + const post = e.target.closest('h5') + const commentSection = document.createElement('div') + commentSection.className = 'list-group-item' + post.append(commentSection) } function renderPosts() { if (!postNameInput.value || !postInput.value || postNameInput.value === " " || postInput.value === " ") { alert('Both fields must be filled out to post.') }else { - const randomId = Math.random() - let post = { - id: randomId, + const randomComId = Math.random() + const randomRemId = Math.floor(Math.random() * 500) + const post = { + remId: randomRemId, + id: randomComId, posterName: postNameInput.value, postText: postInput.value, comments: [] } data.push(post) - console.log(data) postSection.innerHTML = "" data.forEach((post) => { - postSection.innerHTML += `
      ${post.postText} -Posted By: ${post.posterName}
      ` + postSection.innerHTML += `
      ${post.postText} -Posted By: ${post.posterName}
      ` }) - postNameInput.value = "" postInput.value = "" } From f30b92f96b72dec96fb7251572d2b283e4dc8b7d Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Fri, 15 Nov 2024 09:41:54 -0600 Subject: [PATCH 08/10] Refactor messy code. Remove un-used elements from html. Remove un-used custom CSS rules. --- index.html | 4 +- main.js | 214 ++++++++++++++++++++++++++++------------------------- style.css | 4 +- 3 files changed, 117 insertions(+), 105 deletions(-) diff --git a/index.html b/index.html index de33fc8b..2f2e4ac7 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,7 @@

      ReReddit

      Posts:

      -
      -
      -
      +
      post.remId === targetId) - data.shift(indexToRem) - e.target.closest('.list-group-item').remove() - } else if (e.target.classList.contains('comments')) { - - // Add and if else that checks if the elements already exist - commentsInputFields(e) - // renderComments() - - } else if (e.target.classList.contains('btn-primary')) { - const commentData = { - name: commentsNameInput.value, - comment: commentsInput.value - } - // Find a way to link the button to the id and thus the index and push it in to the comments array // - - const postId = e.target.closest('.comments') - console.log(postId) +function makePost() { + const postInput = document.getElementById('post-input') + const posterName = document.getElementById('name-input') + const postId = Math.random(Math.floor * 1000) + console.log(postId) + const post = { + id: postId, + postText: postInput.value, + posterName: posterName.value, + comments: [] } -}) - -const div1 = document.createElement('div') -const div2 = document.createElement('div') -const inputDiv1 = document.createElement('div') -const inputDiv2 = document.createElement('div') -const commentsInput = document.createElement('input') -const commentsNameInput = document.createElement('input') - -function commentsInputFields(e) { - const addCommentBtn = document.createElement('button') - addCommentBtn.type = 'button' - addCommentBtn.className = 'btn btn-primary' - addCommentBtn.innerText = 'Post Comment' - const nearestDiv = e.target.closest('div') - div1.className = 'container' - - div2.className = 'container' - - inputDiv1.className = 'input-group input-group-lg mb-3' - - inputDiv2.className = "input-group input-group-lg mb-3" - - commentsInput.type = 'text' - commentsInput.className = 'form-control' - commentsInput.placeholder = 'Comment Text' - - commentsNameInput.type = 'text' - commentsNameInput.className = 'form-control' - commentsNameInput.placeholder = 'Your Name' - - nearestDiv.append(div1) - nearestDiv.append(div2) - nearestDiv.append(addCommentBtn) - div1.append(inputDiv1) - div2.append(inputDiv2) - inputDiv1.append(commentsInput) - inputDiv2.append(commentsNameInput) + posts.push(post) + postList.innerHTML = '' + posts.forEach((post) => { + // Creates post elements and renders post/content // + const postContent = document.createElement('h5') + postList.appendChild(postDiv) + postDiv.appendChild(postContent) + postContent.innerHTML = ` + + + ${post.postText} - Posted By: ${post.posterName}` + postInput.value = '' + posterName.value = '' + // Comments // + commTextInput.className = 'input-group input-group-md mb-3 form-control d-none' + commTextInput.id = 'comm-text-input' + commTextInput.placeholder = 'Comment Text' + commNameInput.className = 'input-group input-group-md mb-3 form-control d-none' + commNameInput.id = 'comm-name-input' + commNameInput.placeholder = 'Your Name' + commPostBtn.className = 'btn btn-primary post-comm d-none' + commPostBtn.type = 'button' + commPostBtn.innerText = 'Post Comment' + commPostBtn.id = postId + post.comments.forEach((comment) => { + postDiv.appendChild(commentSection) + commentSection.appendChild(comments) + comments.innerHTML = ` + + ${comment.commentText} - Posted By: ${comment.commenterName}` + + }) + // Add comment inputs // + postDiv.appendChild(commTextInput) + postDiv.appendChild(commNameInput) + postDiv.appendChild(commPostBtn) + }) } -function renderComments(e) { - - const post = e.target.closest('h5') - const commentSection = document.createElement('div') - commentSection.className = 'list-group-item' - post.append(commentSection) +function commentsRenderToggle() { + console.log(comments.classList) + console.log(comments.classList.contains('d-none')) + if (comments.classList.contains('d-none')) { + console.log('it was hidden') + comments.classList.remove('d-none') + commTextInput.classList.remove('d-none') + commNameInput.classList.remove('d-none') + commPostBtn.classList.remove('d-none') + } else { + console.log('it was not hidden') + comments.classList.add('d-none') + commTextInput.classList.add('d-none') + commNameInput.classList.add('d-none') + commPostBtn.classList.add('d-none') + } } -function renderPosts() { - if (!postNameInput.value || !postInput.value || postNameInput.value === " " || postInput.value === " ") { - alert('Both fields must be filled out to post.') - }else { - const randomComId = Math.random() - const randomRemId = Math.floor(Math.random() * 500) - const post = { - remId: randomRemId, - id: randomComId, - posterName: postNameInput.value, - postText: postInput.value, - comments: [] - } - data.push(post) - postSection.innerHTML = "" - data.forEach((post) => { - postSection.innerHTML += `
      ${post.postText} -Posted By: ${post.posterName}
      ` - }) - postNameInput.value = "" - postInput.value = "" +function postComment(e) { + const commId = Math.random() + const commTextInput = document.getElementById('comm-text-input') + const commNameInput = document.getElementById('comm-name-input') + const commentData = { + commentId: commId, + commentText: commTextInput.value, + commenterName: commNameInput.value } + const postIndex = posts.findIndex(post => post.id === JSON.parse(e.target.id)) + posts[postIndex].comments.push(commentData) + + // Pushes comment to post with correct id // + // Renders comment to comment section above comment inputs (findIndex) // } -// Handles posting // -postBtn.addEventListener('click', function () { - renderPosts() +postBtn.addEventListener('click', function() { + makePost() +}) + +postList.addEventListener('click', function(e) { + if (e.target.classList.contains('post-comm')) { + postComment(e) + } else if (e.target.classList.contains('comment')) { + commentsRenderToggle() + } }) -// `
      ` +function renderNewComm() { + // appends a newly added comment to the correct postId // +} + + -// let div = document.createElement("div"); -// let p = document.createElement("p"); -// div.append(p); +// const posts = [ +// {id: 1, +// postText: 'sample post 1', +// posterName: 'jojo', +// comments: []}, +// {id: 2, +// postText: 'sample post 2', +// posterName: 'jiji', +// comments: []}, +// {id: 3, +// postText: 'sample post 3', +// posterName: 'dodo', +// comments: []} +// ] \ No newline at end of file diff --git a/style.css b/style.css index 2a1e77ac..8b137891 100644 --- a/style.css +++ b/style.css @@ -1,3 +1 @@ -li { - font-size: x-large; -} + From e619371261f7a530f326643119808d291bf8ccb3 Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Fri, 15 Nov 2024 15:47:14 -0600 Subject: [PATCH 09/10] Begin work on commenting system, refactor the way posts are handled --- main.js | 98 ++++++++++++++++++++++++++------------------------------- 1 file changed, 45 insertions(+), 53 deletions(-) diff --git a/main.js b/main.js index b6a32382..32f297d1 100644 --- a/main.js +++ b/main.js @@ -9,69 +9,61 @@ const commentSection = document.createElement('div') const comments = document.createElement('h5') comments.classList.add('d-none') // Hides comments until rendered // const postBtn = document.getElementById('post-btn') +const postContent = document.createElement('h5') +const lineBreak = document.createElement('br') function makePost() { const postInput = document.getElementById('post-input') const posterName = document.getElementById('name-input') const postId = Math.random(Math.floor * 1000) - console.log(postId) + const postData = ` + + + ${postInput.value} - Posted By: ${posterName.value}` const post = { id: postId, - postText: postInput.value, - posterName: posterName.value, + postText: postData, comments: [] } posts.push(post) - postList.innerHTML = '' + postContent.innerHTML = '' posts.forEach((post) => { // Creates post elements and renders post/content // - const postContent = document.createElement('h5') postList.appendChild(postDiv) postDiv.appendChild(postContent) - postContent.innerHTML = ` - - - ${post.postText} - Posted By: ${post.posterName}` - postInput.value = '' - posterName.value = '' - // Comments // - commTextInput.className = 'input-group input-group-md mb-3 form-control d-none' - commTextInput.id = 'comm-text-input' + postContent.appendChild(lineBreak) + postContent.innerHTML += post.postText + // Comments Section Construction // + commTextInput.className = 'input-group input-group-md mb-3 form-control comm-text-input d-none' + commTextInput.id = JSON.stringify(postId) commTextInput.placeholder = 'Comment Text' - commNameInput.className = 'input-group input-group-md mb-3 form-control d-none' - commNameInput.id = 'comm-name-input' + commNameInput.className = 'input-group input-group-md mb-3 form-control comm-name-input d-none' + commNameInput.id = JSON.stringify(postId) commNameInput.placeholder = 'Your Name' commPostBtn.className = 'btn btn-primary post-comm d-none' commPostBtn.type = 'button' commPostBtn.innerText = 'Post Comment' commPostBtn.id = postId - post.comments.forEach((comment) => { - postDiv.appendChild(commentSection) - commentSection.appendChild(comments) - comments.innerHTML = ` - - ${comment.commentText} - Posted By: ${comment.commenterName}` - - }) // Add comment inputs // postDiv.appendChild(commTextInput) postDiv.appendChild(commNameInput) postDiv.appendChild(commPostBtn) }) + postInput.value = '' + posterName.value = '' } function commentsRenderToggle() { + // Link post id and render comments from post // console.log(comments.classList) console.log(comments.classList.contains('d-none')) if (comments.classList.contains('d-none')) { - console.log('it was hidden') comments.classList.remove('d-none') commTextInput.classList.remove('d-none') commNameInput.classList.remove('d-none') commPostBtn.classList.remove('d-none') } else { - console.log('it was not hidden') comments.classList.add('d-none') commTextInput.classList.add('d-none') commNameInput.classList.add('d-none') @@ -81,18 +73,29 @@ function commentsRenderToggle() { function postComment(e) { const commId = Math.random() - const commTextInput = document.getElementById('comm-text-input') - const commNameInput = document.getElementById('comm-name-input') + const commTextInput = document.querySelector('.comm-text-input') + const commNameInput = document.querySelector('.comm-name-input') + const commText = commTextInput.value + const commName = commNameInput.value + const commData = ` + + ${commText} - Posted By: ${commName}` + const commentData = { commentId: commId, - commentText: commTextInput.value, - commenterName: commNameInput.value + commentText: commData, } const postIndex = posts.findIndex(post => post.id === JSON.parse(e.target.id)) posts[postIndex].comments.push(commentData) - - // Pushes comment to post with correct id // - // Renders comment to comment section above comment inputs (findIndex) // + comments.innerHTML = '' + posts[postIndex].comments.forEach((comment) => { + postContent.appendChild(commentSection) + commentSection.appendChild(comments) + comments.appendChild(lineBreak) + comments.innerHTML += comment.commentText + }) + commTextInput.value = '' + commNameInput.value = '' } postBtn.addEventListener('click', function() { @@ -107,24 +110,13 @@ postList.addEventListener('click', function(e) { } }) +// !!Problems!! // +// 1. Once a new post is made, the comments are unrendered, but still exist in the array. +// 2. Clicking the comments button does not render the ONLY the comments under that particular post. +// 3. Once a comment is posted, it will render under any post that the comments button is clicked. +// 4. Probably more that i have no found yet... -function renderNewComm() { - // appends a newly added comment to the correct postId // -} - - - -// const posts = [ -// {id: 1, -// postText: 'sample post 1', -// posterName: 'jojo', -// comments: []}, -// {id: 2, -// postText: 'sample post 2', -// posterName: 'jiji', -// comments: []}, -// {id: 3, -// postText: 'sample post 3', -// posterName: 'dodo', -// comments: []} -// ] \ No newline at end of file +// !! TODO !! // +// 1. Code remove buttons on posts(easy) +// 2. Code remove buttons on comments(probably easy) +// 3. Fix errors... \ No newline at end of file From f10374a5231cc8bcc95a6f81dca1be7acfbfd85b Mon Sep 17 00:00:00 2001 From: JoeCarnahan42 Date: Wed, 20 Nov 2024 15:27:31 -0600 Subject: [PATCH 10/10] Finish eval project. Full functionality --- main.js | 212 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 105 insertions(+), 107 deletions(-) diff --git a/main.js b/main.js index 32f297d1..dd68fa0e 100644 --- a/main.js +++ b/main.js @@ -1,122 +1,120 @@ const posts = [] -const postList = document.getElementById('post-list') -const postDiv = document.createElement('div') -postDiv.className = 'list-group list-group-flush' -const commTextInput = document.createElement('input') -const commNameInput = document.createElement('input') -const commPostBtn = document.createElement('button') -const commentSection = document.createElement('div') -const comments = document.createElement('h5') -comments.classList.add('d-none') // Hides comments until rendered // -const postBtn = document.getElementById('post-btn') -const postContent = document.createElement('h5') -const lineBreak = document.createElement('br') - +const postList = document.getElementById('post-list'); +const postBtn = document.getElementById('post-btn'); +const lineBreak = document.createElement('br'); function makePost() { - const postInput = document.getElementById('post-input') - const posterName = document.getElementById('name-input') - const postId = Math.random(Math.floor * 1000) - const postData = ` - - - ${postInput.value} - Posted By: ${posterName.value}` - const post = { - id: postId, - postText: postData, - comments: [] - } - posts.push(post) - postContent.innerHTML = '' - posts.forEach((post) => { - // Creates post elements and renders post/content // - postList.appendChild(postDiv) - postDiv.appendChild(postContent) - postContent.appendChild(lineBreak) - postContent.innerHTML += post.postText - // Comments Section Construction // - commTextInput.className = 'input-group input-group-md mb-3 form-control comm-text-input d-none' - commTextInput.id = JSON.stringify(postId) - commTextInput.placeholder = 'Comment Text' - commNameInput.className = 'input-group input-group-md mb-3 form-control comm-name-input d-none' - commNameInput.id = JSON.stringify(postId) - commNameInput.placeholder = 'Your Name' - commPostBtn.className = 'btn btn-primary post-comm d-none' - commPostBtn.type = 'button' - commPostBtn.innerText = 'Post Comment' - commPostBtn.id = postId - // Add comment inputs // - postDiv.appendChild(commTextInput) - postDiv.appendChild(commNameInput) - postDiv.appendChild(commPostBtn) - }) - postInput.value = '' - posterName.value = '' -} + const postInput = document.getElementById('post-input'); + const posterName = document.getElementById('name-input'); + const postId = Math.random().toString(36).substr(2, 9); + if (postInput.value === "" || posterName.value === '') { + alert('Both input fields must be entered to make a post.') + return; + } else { + const postDiv = document.createElement('div'); + postDiv.className = 'list-group-item list-group-flush'; + postDiv.id = `post-${postId}`; + postDiv.innerHTML = ` +
      ${postInput.value} - Posted By: ${posterName.value}
      +
      + +
      + +
      + + `; + postList.appendChild(postDiv); + posts.push({ + id: postId, + postText: postInput.value, + comments: [], + }); + postInput.value = ''; + posterName.value = ''; + }; +}; -function commentsRenderToggle() { - // Link post id and render comments from post // - console.log(comments.classList) - console.log(comments.classList.contains('d-none')) - if (comments.classList.contains('d-none')) { - comments.classList.remove('d-none') - commTextInput.classList.remove('d-none') - commNameInput.classList.remove('d-none') - commPostBtn.classList.remove('d-none') +function commentsRenderToggle(postId) { + const commentSection = document.querySelector(`#comment-section-${postId}`); + if (commentSection.classList.contains('d-none')) { + commentSection.classList.remove('d-none'); } else { - comments.classList.add('d-none') - commTextInput.classList.add('d-none') - commNameInput.classList.add('d-none') - commPostBtn.classList.add('d-none') - } -} + commentSection.classList.add('d-none'); + }; +}; -function postComment(e) { - const commId = Math.random() - const commTextInput = document.querySelector('.comm-text-input') - const commNameInput = document.querySelector('.comm-name-input') - const commText = commTextInput.value - const commName = commNameInput.value - const commData = ` - - ${commText} - Posted By: ${commName}` - - const commentData = { - commentId: commId, - commentText: commData, - } - const postIndex = posts.findIndex(post => post.id === JSON.parse(e.target.id)) - posts[postIndex].comments.push(commentData) - comments.innerHTML = '' - posts[postIndex].comments.forEach((comment) => { - postContent.appendChild(commentSection) - commentSection.appendChild(comments) - comments.appendChild(lineBreak) - comments.innerHTML += comment.commentText - }) - commTextInput.value = '' - commNameInput.value = '' +function postComment(postId) { + const commId = Math.random().toString(36).substr(2, 9); // Assigns Specific ID to Comments // + const commTextInput = document.querySelector(`#comment-text-${postId}`); + const commNameInput = document.querySelector(`#comment-name-${postId}`); + const commDiv = document.createElement('div'); + commDiv.id = commId; + commDiv.className = `comment-div ${postId}`; + const postIndex = posts.findIndex((post) => post.id === postId); + const commentSection = document.querySelector(`#comment-section-${postId}`); + // Checks Input Fields // + if (commTextInput.value === '' || commNameInput.value === '') { + alert('Both input fields must be entered to post a comment.'); + return; + } else { + const commData = ` +
      + ${commTextInput.value} - Posted By: ${commNameInput.value}
      `; + commentSection.innerHTML = '' + commentSection.appendChild(commDiv); + posts[postIndex].comments.push({ + commentId: commId, + commentText: commData + }); + posts[postIndex].comments.forEach(comment => { + commDiv.innerHTML += comment.commentText; + }); + commTextInput.value = ''; + commNameInput.value = ''; + }; + // Renders Comments Section to View New Comments IF Comments Are Hidden // + if (commentSection.classList.contains('d-none')) { + commentsRenderToggle(postId); + } else { + return; + }; } postBtn.addEventListener('click', function() { - makePost() -}) + makePost(); +}); postList.addEventListener('click', function(e) { if (e.target.classList.contains('post-comm')) { - postComment(e) + const postId = e.target.id; + postComment(postId); } else if (e.target.classList.contains('comment')) { - commentsRenderToggle() - } -}) + const postId = e.target.id; + commentsRenderToggle(postId); + } else if (e.target.classList.contains('remove')) { + const postId = e.target.id; + removePost(postId, e); + } else if (e.target.classList.contains('remove-comm')) { + const commId = e.target.id; + const commDiv = e.target.closest('div'); + removeComment(commId, e, commDiv); + }; +}); -// !!Problems!! // -// 1. Once a new post is made, the comments are unrendered, but still exist in the array. -// 2. Clicking the comments button does not render the ONLY the comments under that particular post. -// 3. Once a comment is posted, it will render under any post that the comments button is clicked. -// 4. Probably more that i have no found yet... +function removePost(postId, e) { + const post = posts.findIndex(post => post.id === postId); + const nearestPost = e.target.closest(`#post-${postId}`); + posts.splice(post, 1); + nearestPost.remove(); +}; -// !! TODO !! // -// 1. Code remove buttons on posts(easy) -// 2. Code remove buttons on comments(probably easy) -// 3. Fix errors... \ No newline at end of file +function removeComment(commId, e, commDiv) { + const postId = commDiv.classList[1]; + const nearestComm = e.target.closest(`h6`); + const postIndex = posts.findIndex(post => post.id === postId) + const commentIndex = posts[postIndex].comments.findIndex(comment => comment.commentId === commId); + if (commentIndex !== -1) { + posts[postIndex].comments.splice(commentIndex, 1); + nearestComm.remove(); + }; +}; \ No newline at end of file