diff --git a/README.md b/README.md
index 20395898..f8a787ac 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-## Project Reddit
+# ReReddit Eval
-This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks.
+## Cohort 14
-If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io.
+### Part Time
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..4bc0262e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,47 @@
+
+
+
+ Forum
+
+
+
+
Forum
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..914feeb9
--- /dev/null
+++ b/main.js
@@ -0,0 +1,224 @@
+const postsFeed = document.getElementById("posts-feed");
+const user = document.getElementById("user");
+const post = document.getElementById("post");
+const submitBtn = document.getElementById("post-btn");
+const username = document.getElementById("username");
+const postText = document.getElementById("postText");
+const removeBtn = document.getElementsByClassName("removePost");
+const singlePost = document.getElementsByClassName("posts");
+const addComment = document.getElementsByClassName("addComment");
+
+const postStr = `
+ delete
+
+
+
`;
+
+let posts = [
+ {
+ id: 1,
+ user: "My name",
+ post: "This is a post",
+ comments: [
+ {
+ id: 1,
+ comment: "This is a comment",
+ user: "User",
+ },
+ ],
+ },
+ {
+ id: 2,
+ user: "User 2",
+ post: "Post 2",
+ comments: [
+ {
+ id: 1,
+ comment: "This is a comment 2",
+ user: "Name",
+ },
+ ],
+ },
+];
+
+const stringToHTML = function (str) {
+ let div = document.createElement("div");
+ div.innerHTML = str;
+ div.className = "conatiner-fluid posts";
+ return div;
+};
+
+const uniqueID = function () {
+ const timestamp = Date.now();
+ const random = Math.floor(Math.random() * 10000);
+ const newId = `${timestamp}-${random}`;
+
+ const existingIds = [];
+ posts.forEach((post) => {
+ existingIds.push(post.id);
+ if (post.comments) {
+ post.comments.forEach((comment) => existingIds.push(comment.id));
+ }
+ });
+
+ if (existingIds.includes(newId)) {
+ return uniqueID();
+ }
+
+ return newId;
+};
+
+const preloadPosts = function () {
+ for (let i = 0; i < posts.length; i++) {
+ let commentsHTML = "";
+ if (posts[i].comments && posts[i].comments.length > 0) {
+ commentsHTML = `
+
+ `;
+ }
+
+ let postString = `
+ Posted by: ${posts[i].user}
+ ${posts[i].post}
+ ${postStr}
+ ${commentsHTML}
+ `;
+ let postHTML = stringToHTML(postString);
+ postsFeed.prepend(postHTML);
+ }
+};
+
+const getPostInputs = function () {
+ submitBtn.addEventListener("click", function () {
+ posts.push({ id: uniqueID(), user: user.value, post: post.value });
+ let latestPost = posts.length - 1;
+ let postString = `
+ Posted by: ${posts[latestPost].user}
+ ${posts[latestPost].post}
+ ${postStr}`;
+ let postHTML = stringToHTML(postString);
+ postsFeed.prepend(postHTML);
+ });
+};
+
+const handleComments = function () {
+ postsFeed.addEventListener("click", function (event) {
+ if (event.target.classList.contains("addComment")) {
+ const post = event.target.closest(".posts");
+ const commentForm = event.target.nextElementSibling;
+ const commentsSection = post.querySelector(".comments-section");
+
+ if (commentForm.style.display === "block") {
+ commentForm.style.display = "none";
+ if (commentsSection) {
+ commentsSection.style.display = "none";
+ }
+ } else {
+ commentForm.style.display = "block";
+ if (commentsSection) {
+ commentsSection.style.display = "block";
+ }
+ }
+ }
+
+ if (
+ event.target.id === "post-btn" &&
+ event.target.closest(".commentForm")
+ ) {
+ const post = event.target.closest(".posts");
+ const commentName = post.querySelector(".commentName").value;
+ const commentText = post.querySelector(".commentText").value;
+
+ const postIndex = Array.from(postsFeed.children).indexOf(post);
+ const currentPost = posts[posts.length - 1 - postIndex];
+
+ if (!currentPost.comments) {
+ currentPost.comments = [];
+ }
+
+ currentPost.comments.push({
+ id: uniqueID(),
+ user: commentName,
+ comment: commentText,
+ });
+
+ let commentsSection = post.querySelector(".comments-section");
+ if (!commentsSection) {
+ commentsSection = document.createElement("div");
+ commentsSection.className = "comments-section";
+ post.appendChild(commentsSection);
+ }
+
+ const commentHTML = `
+
+ `;
+
+ commentsSection.insertAdjacentHTML("afterbegin", commentHTML);
+
+ post.querySelector(".commentName").value = "";
+ post.querySelector(".commentText").value = "";
+ }
+
+ if (event.target.classList.contains("deleteComment")) {
+ const commentElement = event.target.closest(".comment");
+ const post = event.target.closest(".posts");
+ const commentId = commentElement.dataset.commentId;
+
+ const postIndex = Array.from(postsFeed.children).indexOf(post);
+ const currentPost = posts[posts.length - 1 - postIndex];
+
+ currentPost.comments = currentPost.comments.filter(
+ (comment) => comment.id !== commentId
+ );
+
+ commentElement.remove();
+ }
+ });
+};
+
+const deletePost = function () {
+ postsFeed.addEventListener("click", function (event) {
+ if (event.target.classList.contains("removePost")) {
+ const postToDelete = event.target.closest(".posts");
+ if (postToDelete) {
+ postToDelete.remove();
+ }
+ }
+ });
+};
+
+preloadPosts();
+
+getPostInputs();
+
+deletePost();
+
+handleComments();
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..9c0364b6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,82 @@
+body {
+ background-color: #000;
+ color: #fff;
+}
+
+h1 {
+ text-align: center;
+ margin-top: 30px;
+ margin-bottom: 30px;
+}
+
+p {
+ font-size: 17px;
+}
+
+.post-form {
+ width: 80%;
+}
+
+.posts-feed {
+ width: 80%;
+}
+
+.posts-container {
+ width: 80%;
+}
+
+.removePost {
+ color: red;
+ cursor: pointer;
+}
+
+.removePost:hover {
+ text-decoration: underline;
+}
+
+.addComment {
+ cursor: pointer;
+ color: yellow;
+ margin-left: 10px;
+}
+
+.addComment:hover {
+ text-decoration: underline;
+}
+
+.commentForm {
+ display: none;
+ margin-top: 15px;
+ margin-bottom: 20px;
+}
+
+.postUtilities {
+ margin-bottom: 50px;
+}
+
+.headerBreak {
+ border-top: 3px solid white;
+ margin-top: 30px;
+ margin-bottom: 30px;
+}
+
+.posts {
+ padding: 12px;
+ margin-bottom: 30px;
+ border-left: 3px solid white;
+}
+
+.comment {
+ border-left: 2px solid white;
+ padding-left: 10px;
+ margin-bottom: 20px;
+}
+
+.deleteComment {
+ cursor: pointer;
+ color: red;
+}
+
+.deleteComment:hover {
+ text-decoration: underline;
+}
${comment.comment}
+ delete +