projectshft · SpennyWill · Jun 17, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+
+<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ReReddit</title>
+  </head>
+  <body>
+      <div class="pb-2 mt-4 mb-2 border-bottom">
+          <h1>ReReddit</h1>
+      </div>
+      <div class="container">
+          <div class="entry-form">
+              <form class="form-inline">
+                  <input class="form-control post" type="text" placeholder="Enter Post" />
+                  <input class="form-control p-name" type="text" placeholder="Your Name" />
+                  <button id="submit" class="btn btn-primary mb-2">Submit</button>
+
+              <div class="comments">
+                  <input class="form-control comment" type="text" placeholder="Your Reply"/>
+                  <input class="form-control c-name" type="text" placeholder="Your Name" />
+                  <button id="comment" class="btn btn-primary mb-2">Reply to Post</button>
+              </div>
+          </div>
+        </form>
+        <div class= "post-section">
+          <div class="comment-section"></div>
+        </div>
+      </div>
+      <script src="main.js"></script>
+  </body>
+  </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,80 @@
+document.getElementById('submit').addEventListener('click', (event) => {
+  event.preventDefault();
+
+  //get the values of the entries for every post
+  let postAuthor = document.getElementsByClassName('p-name')[0].value;
+  let postContent = document.getElementsByClassName('post')[0].value;
+
+  //The content that will be display in each post, signed by whoever wrote it
+  let post = `"${postContent}" Posted by ${postAuthor}`;
+  let entry = document.createElement('p');
+  entry.setAttribute("id", randomId());
+  entry.innerHTML = post;
+
+  //Click to remove posts 
+  let removePostButton = document.createElement('button');
+  removePostButton.textContent = "Remove";
+  removePostButton.addEventListener('click', function() {
+    removePost(entry.id)
+  });
+
+//This decides where the post and removal button is going to display, as a child to each post 
+  let createPost = document.getElementsByClassName('post-section')[0];
+  createPost.appendChild(entry);
+  entry.appendChild(removePostButton);
+
+  //clear posts
+  document.getElementsByClassName('entry-form')[0].value = '';
+
+
+});
+
+
+//comments
+
+
+document.getElementById('comment').addEventListener('click', (event) => {
+  event.preventDefault(); 
+
+  //get data from "Your reply" and "your comment"
+  let commentContent = document.getElementsByClassName('comment')[0].value;
+  let commentAuthor = document.getElementsByClassName('c-name')[0].value;
+
+  //What displays 
+  let comment = `${commentAuthor} said "${commentContent}"`;
+  let nextComment = document.createElement('p')
+  nextComment.setAttribute("id", randomId());
+  nextComment.innerHTML = comment;
+
+  //trigger when "reply to post" is clicked
+  let createComment = document.getElementsByClassName('post-section')[0].appendChild(nextComment)
+  nextComment.innerHTML = comment; 
+
+
+  let removeComment = document.createElement('button');
+  removeComment.textContent = "Remove";
+  removeComment.addEventListener('click', function() {
+    document.getElementById(nextComment.remove());
+  });
+  //Position where the comment and remove botton will go
+  let commentArea = document.getElementsByClassName('comment-section')[0];
+  commentArea.appendChild(nextComment);
+  nextComment.appendChild(removeComment);
+
+
+  document.getElementsByClassName('entry-form')[0].value = '';
+
+
+});
+
+function randomId () {
+ var id = Math.floor(Math.random()*100000000) 
+ return id
+};
+
+function removePost (id) {
+  document.getElementById(id).remove(); 
+
+}
+
+//Test for github
diff --git a/style.css b/style.css
@@ -0,0 +1,22 @@
+.post-container {
+  height: 420px;
+  position: relative;
+  background-color: white;
+  color: black;
+  overflow: hidden;
+  z-index: 20;
+  box-shadow: 2px 2px 2px #b3b3b3;
+  margin: 20px;
+}
+
+.form-inline {
+  display: inline-block;
+}
+
+
+
+
+
+.container {
+  display: block;
+}