projectshft · martinsalinas0 · Feb 12, 2025 · Feb 12, 2025 · Feb 13, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ReReddit</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+
+    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="page-header">
+        <h1>ReReddit</h1>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-4 col-md-offset-2">
+        <div class="list-group posts-list" id="all-posts"></div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-4 col-md-offset-2">
+        <form id="post-form">
+          <div class="form-group">
+            <input
+              type="text"
+              class="form-control"
+              id="post-text-input"
+              placeholder="Post Text"
+            />
+          </div>
+          <div class="form-group">
+            <input
+              type="text"
+              class="form-control"
+              id="user-name-input"
+              placeholder="Your Name"
+            />
+          </div>
+          <button type="button" id="submit-btn" class="btn btn-primary btn-lg">
+            Submit Post
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,110 @@
+let posts = [];
+
+const renderPosts = () => {
+  const allPosts = document.getElementById("all-posts");
+  allPosts.innerHTML = "";
+
+  posts.forEach((post, index) => {
+    let postDiv = document.createElement("div");
+    postDiv.classList.add("list-group-item", "post-in-list");
+
+    let postTextSpan = document.createElement("span");
+    postTextSpan.innerHTML = `${post.postText} - Posted By: ${post.userName}`;
+
+    let removeEntirePostBtn = document.createElement("button");
+    removeEntirePostBtn.classList.add(
+      "btn",
+      "btn-link",
+      "remove-post-btn",
+      "btn-xs"
+    );
+    removeEntirePostBtn.innerHTML = `<span class="glyphicon glyphicon-remove"></span>`;
+
+    removeEntirePostBtn.addEventListener("click", () => {
+      posts.splice(index, 1);
+      renderPosts();
+    });
+
+    let commentSectionContainer = document.createElement("div");
+    commentSectionContainer.classList.add("cmnt-container");
+
+    let commentSectionDiv = document.createElement("div");
+    commentSectionDiv.classList.add("cmnt-section");
+    commentSectionDiv.style.display = "none";
+
+    let commentTextInput = document.createElement("input");
+    commentTextInput.type = "text";
+    commentTextInput.classList.add("form-control");
+    commentTextInput.placeholder = "Comment Text";
+
+    let commentUserInput = document.createElement("input");
+    commentUserInput.type = "text";
+    commentUserInput.classList.add("form-control");
+    commentUserInput.placeholder = "Your Name";
+
+    let submitCmntBtn = document.createElement("button");
+    submitCmntBtn.classList.add("btn", "btn-primary", "submit-cmt-btn");
+    submitCmntBtn.innerText = "Submit Comment";
+
+    const addComment = () => {
+      let commentUserName = commentUserInput.value;
+      let commentText = commentTextInput.value;
+      let commentDiv = document.createElement("div");
+      commentDiv.classList.add("comment-on-post");
+
+      let removeCmntBtn = document.createElement("button");
+      removeCmntBtn.classList.add(
+        "btn",
+        "btn-link",
+        "remove-cmnt-btn",
+        "btn-xs"
+      );
+      removeCmntBtn.innerHTML = `<span class="glyphicon glyphicon-remove"></span>`;
+      let commentSpan = document.createElement("span");
+      commentSpan.innerText = `${commentText} - Commented by: ${commentUserName}`;
+      removeCmntBtn.addEventListener("click", () => {
+        commentSectionContainer.removeChild(commentDiv);
+      });
+
+      commentDiv.appendChild(commentSpan);
+      commentDiv.appendChild(removeCmntBtn);
+      commentSectionContainer.appendChild(commentDiv);
+      commentTextInput.value = "";
+      commentUserInput.value = "";
+    };
+
+    submitCmntBtn.addEventListener("click", addComment);
+    postDiv.addEventListener("click", (e) => {
+      if (
+        e.target !== commentTextInput &&
+        e.target !== commentUserInput &&
+        e.target !== submitCmntBtn
+      ) {
+        if (commentSectionDiv.style.display === "none") {
+          commentSectionDiv.style.display = "block";
+        } else {
+          commentSectionDiv.style.display = "none";
+        }
+      }
+    });
+
+    commentSectionDiv.appendChild(commentTextInput);
+    commentSectionDiv.appendChild(commentUserInput);
+    commentSectionDiv.appendChild(submitCmntBtn);
+    commentSectionDiv.appendChild(commentSectionContainer);
+    postDiv.appendChild(removeEntirePostBtn);
+    postDiv.appendChild(postTextSpan);
+    postDiv.appendChild(commentSectionDiv);
+    allPosts.appendChild(postDiv);
+  });
+};
+
+document.getElementById("submit-btn").addEventListener("click", () => {
+  let postText = document.getElementById("post-text-input").value;
+  let userName = document.getElementById("user-name-input").value;
+  posts.push({ postText: postText, userName: userName });
+  document.getElementById("post-text-input").value = "";
+  document.getElementById("user-name-input").value = "";
+
+  renderPosts();
+});
diff --git a/style.css b/style.css