diff --git a/index.html b/index.html new file mode 100644 index 00000000..2f2e4ac7 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + Re-Reddit + + +
+

ReReddit

+
+

Posts:

+
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..dd68fa0e --- /dev/null +++ b/main.js @@ -0,0 +1,120 @@ +const posts = [] +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().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(postId) { + const commentSection = document.querySelector(`#comment-section-${postId}`); + if (commentSection.classList.contains('d-none')) { + commentSection.classList.remove('d-none'); + } else { + commentSection.classList.add('d-none'); + }; +}; + +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(); +}); + +postList.addEventListener('click', function(e) { + if (e.target.classList.contains('post-comm')) { + const postId = e.target.id; + postComment(postId); + } else if (e.target.classList.contains('comment')) { + 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); + }; +}); + +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(); +}; + +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 diff --git a/style.css b/style.css new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/style.css @@ -0,0 +1 @@ +