projectshft · JoeCarnahan42 · Oct 31, 2024 · Oct 31, 2024 · Nov 1, 2024 · Nov 4, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Re-Reddit</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="display-1"><strong>ReReddit</strong></h1>
+      <div class="lead">
+        <h2><u>Posts:</u></h2>
+      </div>
+    </div>
+    <div class="container" id="post-list"></div>
+    <div class="container">
+      <div class="input-group input-group-lg mb-3">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="Post Text"
+          id="post-input"
+        />
+      </div>
+    </div>
+    <div class="container">
+      <div class="input-group input-group-lg">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="Your Name"
+          id="name-input"
+        />
+      </div>
+      <br />
+      <button type="button" class="btn btn-primary" id="post-btn">
+        Submit Post
+      </button>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js 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 = `
+      <h5><button class='btn btn-info btn-md remove' id='${postId}'>Remove</button> <button class='btn btn-info btn-md comment' id='${postId}'>View Comments</button> ${postInput.value} - Posted By: ${posterName.value}</h5>
+      <div id="comment-section-${postId}" class="${postId} d-none"></div>
+      <input id="comment-text-${postId}" class="form-control comm-text-input" placeholder="Comment Text" />
+      <br>
+      <input id="comment-name-${postId}" class="form-control comm-name-input" placeholder="Your Name" />
+      <br>
+      <button id='${postId}' class="btn btn-primary post-comm">Post Comment</button>
+    `;
+    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 = `
+    <h6><button type='button' class='btn btn-info btn-sm remove-comm' id='${commId}'>Remove</button>
+    ${commTextInput.value} - Posted By: ${commNameInput.value}</h6>`;
+    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();
+  };
+};
diff --git a/style.css b/style.css
@@ -0,0 +1 @@
+