projectshft · dcbeane · Mar 2, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!-- Bootstrap CSS -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+    />
+
+    <link rel="stylesheet" href="style.css" />
+
+    <title>ReReddit</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <div class="page-header">
+            <h1>ReReddit</h1>
+          </div>
+
+          <div class="posts">
+            <div class="post">
+              <div class="post-header">
+                <button class="remove-post">remove</button>
+                <button class="toggle-comments">comments</button>
+                <p class="post-text">
+                  How do you like ReReddit?
+                  <span class="post-author"> - Posted By: Devin</span>
+                </p>
+              </div>
+              <div class="comments-section">
+                <div class="comments-list"></div>
+                <div class="comment-form">
+                  <input
+                    class="comment-text"
+                    type="text"
+                    placeholder="Comment Text"
+                  />
+                  <input
+                    class="comment-name"
+                    type="text"
+                    placeholder="Your Name"
+                  />
+                  <button class="submit-comment">Submit Comment</button>
+                </div>
+              </div>
+            </div>
+
+            <div class="post">
+              <div class="post-header">
+                <button class="remove-post">remove</button>
+                <button class="toggle-comments">comments</button>
+                <p class="post-text">
+                  I like cheese...
+                  <span class="post-author"> - Posted By: Devin</span>
+                </p>
+              </div>
+              <div class="comments-section" style="display: none">
+                <div class="comments-list"></div>
+                <div class="comment-form">
+                  <input
+                    class="comment-text"
+                    type="text"
+                    placeholder="Comment Text"
+                  />
+                  <input
+                    class="comment-name"
+                    type="text"
+                    placeholder="Your Name"
+                  />
+                  <button class="submit-comment">Submit Comment</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <form class="post-form" onsubmit="event.preventDefault();">
+            <input id="message" class="form-control" placeholder="Post Text" />
+            <input id="name" class="form-control" placeholder="Your Name" />
+            <button id="submit" class="btn btn-primary btn-block">
+              Submit Post
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,117 @@
+// Post Submission Form //
+document.getElementById('submit').addEventListener('click', function () {
+  var name = document.getElementById('name').value.trim();
+  var text = document.getElementById('message').value.trim();
+
+  if (!name || !text) return;
+
+  var postsDiv = document.querySelector('.posts');
+
+  var newPostDiv = document.createElement('div');
+  newPostDiv.classList.add('post');
+
+  var postHeader = document.createElement('div');
+  postHeader.classList.add('post-header');
+
+  var removeButton = document.createElement('button');
+  removeButton.classList.add('remove-post');
+  removeButton.textContent = 'remove';
+
+  var commentsButton = document.createElement('button');
+  commentsButton.classList.add('toggle-comments');
+  commentsButton.textContent = 'comments';
+
+  var newPostP = document.createElement('p');
+  newPostP.classList.add('post-text');
+  newPostP.innerHTML = `${text} <span class="post-author"> - Posted By: ${name}</span>`;
+
+  postHeader.appendChild(removeButton);
+  postHeader.appendChild(commentsButton);
+  postHeader.appendChild(newPostP);
+
+  var commentsSection = document.createElement('div');
+  commentsSection.classList.add('comments-section');
+  commentsSection.style.display = 'none';
+
+  var commentsList = document.createElement('div');
+  commentsList.classList.add('comments-list');
+
+  var commentForm = document.createElement('div');
+  commentForm.classList.add('comment-form');
+  commentForm.innerHTML = `
+    <input class="comment-text" type="text" placeholder="Comment Text">
+    <input class="comment-name" type="text" placeholder="Your Name">
+    <button class="submit-comment">Submit Comment</button>
+  `;
+
+  commentsSection.appendChild(commentsList);
+  commentsSection.appendChild(commentForm);
+
+  newPostDiv.append(postHeader);
+  newPostDiv.append(commentsSection);
+  postsDiv.append(newPostDiv);
+});
+
+// Toggles Comment Section // 
+document.addEventListener('click', function (event) {
+  if (event.target.classList.contains('toggle-comments')) {
+    var post = event.target.closest('.post');
+    var commentsSection = post.querySelector('.comments-section');
+    commentsSection.style.display = commentsSection.style.display === 'none' ? 'block' : 'none';
+  }
+});
+
+// Comment Submission Form //
+document.addEventListener('click', function (event) {
+  if (event.target.classList.contains('submit-comment')) {
+    var post = event.target.closest('.post');
+    var commentsList = post.querySelector('.comments-list');
+    var commentText = post.querySelector('.comment-text').value.trim();
+    var commentName = post.querySelector('.comment-name').value.trim();
+
+    if (!commentText || !commentName) return;
+
+    var newCommentDiv = document.createElement('div');
+    newCommentDiv.classList.add('post');
+
+    var commentHeader = document.createElement('div');
+    commentHeader.classList.add('post-header');
+
+    var deleteButton = document.createElement('button');
+    deleteButton.classList.add('delete-comment');
+    deleteButton.textContent = 'X';
+
+    var commentTextP = document.createElement('p');
+    commentTextP.classList.add('post-text');
+    commentTextP.innerHTML = `${commentText} <span class="post-author"> - Posted By: ${commentName}</span>`;
+
+    commentHeader.appendChild(deleteButton);
+    commentHeader.appendChild(commentTextP);
+
+    newCommentDiv.append(commentHeader);
+    commentsList.appendChild(newCommentDiv);
+
+    post.querySelector('.comment-text').value = '';
+    post.querySelector('.comment-name').value = '';
+  }
+});
+
+// Comment Deletion //
+document.addEventListener('click', function (event) {
+  if (event.target.classList.contains('delete-comment')) {
+    event.target.closest('.post').remove();
+  }
+});
+
+// Removes Post //
+document.addEventListener('click', function (event) {
+  if (event.target.classList.contains('remove-post')) {
+    var post = event.target.closest('.post');
+    if (post) {
+      post.remove();
+    }
+  }
+});
+
+// Extensions //
+
diff --git a/style.css b/style.css
@@ -0,0 +1,144 @@
+.container {
+  max-width: 1200px;
+  margin-top: 40px;
+  text-align: left;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.posts .post {
+  padding: 15px 0;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.post-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+}
+
+.remove-post,
+.toggle-comments {
+  background: none;
+  border: none;
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.post-text {
+  flex-grow: 1;
+  word-break: break-word;
+  margin: 0;
+}
+
+.post-author {
+  font-weight: normal;
+  color: #333;
+  white-space: nowrap;
+}
+
+.comments-section {
+  display: none;
+  margin-top: 5px;
+  width: 100%;
+}
+
+.comments-list {
+  padding-left: 20px;
+  margin-top: 5px;
+}
+
+.comments-list .post {
+  border-bottom: 1px solid #ddd;
+  padding: 10px 0;
+  width: 100%;
+}
+
+.comment-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+}
+
+.comment-form input {
+  width: 100%;
+  height: 40px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  padding: 8px;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+.submit-comment {
+  width: 25%;
+  height: 40px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 3px;
+  margin-top: 5px;
+}
+
+.submit-comment:hover {
+  background-color: #0056b3;
+}
+
+.delete-comment {
+  background: none;
+  border: none;
+  color: red;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.post-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.post-form input {
+  width: 100%;
+  height: 40px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  padding: 8px;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+#submit {
+  width: 19%;
+  height: 40px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 3px;
+  margin-top: 10px;
+}
+
+#submit:hover {
+  background-color: #0056b3;
+}