projectshft · jacobecox · May 28, 2024 · May 29, 2024 · May 30, 2024 · May 31, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
+      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+      crossorigin="anonymous"
+    />
+    <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>
+    <header><strong>ReReddit</strong></header>
+    <hr />
+
+    <div class="posts-section"></div>
+    <div class="container-fluid">
+      <div class="col-md-4">
+        <ul class="posts container-fluid"></ul>
+        </ul>
+      </div>
+    </div>
+    <div class="name">
+      <div class="container-fluid">
+        <div class="col-md-4"></div>
+      </div>
+    </div>
+    <hr />
+
+    <div class="submissions">
+      <div class="post-box">
+        <div class="container-fluid">
+          <input
+            class="post"
+            type="text"
+            id="Post"
+            name="Post"
+            placeholder="Post Text"
+          />
+        </div>
+      </div>
+      <div class="name-box">
+        <div class="container-fluid">
+          <input
+            class="names"
+            type="text"
+            id="Name"
+            name="Name"
+            placeholder="Your Name"
+          />
+        </div>
+      </div class="container">
+      <div>
+        <div class="container">
+          <button class="btn-submit">Post</button>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,158 @@
+var button = document.getElementsByClassName('btn-submit')[0];
+
+button.addEventListener('click', function () {
+  // defined variables to create post
+  var parentDiv = document.createElement('div');
+  document.body.appendChild(parentDiv);
+  parentDiv.classList.add("parent-div");
+  var userInputText = document.getElementsByClassName('post')[0].value;
+  var userInputName = document.getElementsByClassName('names')[0].value;
+  var textLi = document.createElement('li');
+  var nameLi = document.createElement('li');
+  nameLi.classList.add('name-li');
+  var userInputTextElement = document.createTextNode(userInputText);
+  var userInputNameElement = document.createTextNode(userInputName);
+  var postedBy = document.createElement('string')
+  postedBy.classList.add('posted-by');
+  postedBy.innerHTML = 'Posted By: ';
+  var commentDiv = document.createElement('hr')
+  commentDiv.classList.add('comment-div');
+  var postDiv = document.createElement('hr')
+  postDiv.classList.add('post-div')
+
+  // defined variables to create comment
+  var newCommentDiv = document.createElement('div');
+  newCommentDiv.classList.add("new-comment-div");
+  var commentBox = document.createElement('input');
+  commentBox.type = 'text';
+  commentBox.classList.add('comment-box');
+  commentBox.id = 'comment-box';
+  commentBox.name = 'comment-box';
+  commentBox.placeholder = 'Comment Text';
+  var nameBox = document.createElement('input');
+  nameBox.type = 'text';
+  nameBox.classList.add('name-box');
+  nameBox.id = 'name-box';
+  nameBox.name = 'name-box';
+  nameBox.placeholder = 'Your Name'
+  var submitCommentButton = document.createElement('button');
+  submitCommentButton.classList.add('btn-submit-comment');
+  submitCommentButton.innerHTML = "Submit Comment";
+
+  // check if fields are all filled
+  if (userInputText == '' || userInputName == '') {
+    alert('Please fill all required fields');
+    return;
+  }
+  // button to remove post
+  var removeButton = document.createElement('button');
+  removeButton.classList.add('btn-remove');
+  removeButton.innerHTML = "Remove";
+
+  // button to toggle comments
+  var commentButton = document.createElement('button');
+  commentButton.classList.add('btn-comment');
+  commentButton.innerHTML = "Comments";
+
+  // create post
+  textLi.appendChild(userInputTextElement);
+  nameLi.appendChild(userInputNameElement);
+  parentDiv.append(textLi, postedBy, nameLi, removeButton, commentButton, commentBox, nameBox, submitCommentButton, commentDiv, postDiv);
+
+  // clear post input fields
+  let output = document.getElementById("output");
+   function clearAllInputs(event) {
+     var allInputs = document.querySelectorAll("input");
+     allInputs.forEach((singleInput) => (singleInput.value = ""));
+     output.innerHTML;
+   }
+  var allInputs = document.querySelectorAll('input');
+  allInputs.forEach(singleInput => singleInput.value = '');
+
+
+   // submit comment
+  submitCommentButton.addEventListener('click', function () {
+    parentDiv.appendChild(newCommentDiv);
+    parentDiv.insertBefore(newCommentDiv, postDiv);
+    var userInputComment = document.getElementsByClassName('comment-box')[0].value;
+    var commentLi = document.createElement('li');
+    var userInputCommentElement = document.createTextNode(userInputComment);
+    var userInputCommentName = document.getElementsByClassName('name-box')[1].value;
+    var commentNameLi = document.createElement('li');
+    commentNameLi.classList.add('comment-name')
+    var userInputCommentNameElement = document.createTextNode(userInputCommentName);
+    var commentPostedBy = document.createElement('string')
+    commentPostedBy.innerHTML = 'Posted By: ';
+    commentPostedBy.classList.add('comment-posted-by');
+    var removeCommentButton = document.createElement('button');
+    removeCommentButton.classList.add('btn-remove-comment');
+    removeCommentButton.innerHTML = 'Remove Comment';
+
+    // check if fields are all filled
+    var commentInput = commentButton.closest('div').querySelector('input');
+    var nameInput = commentButton.closest('div').querySelector('input.name-box');
+    if (commentInput.value == '' || nameInput.value == '') {
+      alert('Please fill all required fields');
+      return;
+    }
+
+    commentLi.appendChild(userInputCommentElement);
+    commentNameLi.appendChild(userInputCommentNameElement); 
+    newCommentDiv.append(commentLi, commentPostedBy, commentNameLi, removeCommentButton);
+
+ // remove comment
+  removeCommentButton.addEventListener('click', function () {
+    commentLi.removeChild(userInputCommentElement);
+    commentNameLi.removeChild(userInputCommentNameElement);
+    commentPostedBy.remove();
+    removeCommentButton.remove();
+  });
+
+    // clear comment input fields
+    let output = document.getElementById("output");
+    function clearAllInputs(event) {
+      var allInputs = document.querySelectorAll("input");
+      allInputs.forEach((singleInput) => (singleInput.value = ""));
+      output.innerHTML;
+  }
+
+ var allInputs = document.querySelectorAll('input');
+ allInputs.forEach(singleInput => singleInput.value = '');
+}); 
+
+  // remove post
+  removeButton.addEventListener('click', function () {
+    textLi.removeChild(userInputTextElement);
+    nameLi.removeChild(userInputNameElement);
+    postedBy.remove();
+    removeButton.remove();
+    commentButton.remove();
+    commentDiv.remove();
+    commentBox.remove();
+    nameBox.remove();
+    submitCommentButton.remove();
+    newCommentDiv.remove();
+    postDiv.remove();
+   });
+     // toggle comments
+  commentButton.addEventListener('click', function () {
+    var comments = newCommentDiv.children;
+    for (let i = 0; i < comments.length; i++) {
+      const comment = comments[i];
+      if (comment.style.visibility === 'hidden') {
+        comment.style.visibility = 'visible';
+    } else {
+        comment.style.visibility = 'hidden';
+    }};
+    if (commentBox.style.visibility === 'hidden' && nameBox.style.visibility === 'hidden') {
+      commentBox.style.visibility = 'visible', nameBox.style.visibility = 'visible';
+    } else {
+    commentBox.style.visibility = 'hidden', nameBox.style.visibility = 'hidden';
+    }; 
+    if (submitCommentButton.style.visibility === 'hidden') {
+    submitCommentButton.style.visibility = 'visible';
+    } else {
+     submitCommentButton.style.visibility = 'hidden';
+    };
+  });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,107 @@
+header {
+  font-size: 60px;
+  margin: 20px;
+}
+
+body {
+  font-size: 20px;
+  margin: 20px;
+}
+
+hr {
+  border: 1.5px solid black;
+  border-radius: 5px;
+}
+
+button {
+  margin: 10px;
+  color: white;
+  background-color: rgb(55, 220, 55);
+  border-radius: 5px;
+  border: none;
+}
+
+input {
+  margin: 20px;
+}
+
+ul {
+  list-style-type: none;
+}
+
+li {
+  font-size: 20px;
+  list-style-type: none;
+}
+
+.post-div {
+  border: 1.5px solid black;
+  border-radius: 5px;
+}
+
+.comment-div {
+  border: 1px solid lightgray;
+  border-radius: 5px;
+}
+
+.posts {
+  font-size: 15px;
+  font-weight: light;
+  font-style: italic;
+}
+
+.btn-remove {
+  font-size: 10px;
+  background-color: red;
+  color: white;
+  height: 20px;
+  width: 50px;
+  border-radius: 5px;
+  border: none;
+  display: block;
+}
+
+.btn-comment {
+  font-size: 10px;
+  background-color: skyblue;
+  color: white;
+  height: 20px;
+  width: 70px;
+  border-radius: 5px;
+  border: none;
+  display: block;
+}
+
+.btn-submit-comment {
+  font-size: 15px;
+  background-color: rgb(55, 220, 55);
+  color: white;
+  border-radius: 5px;
+  border: none;
+}
+
+.btn-remove-comment {
+  font-size: 10px;
+  height: 30px;
+  width: 60px;
+  background-color: red;
+  color: white;
+  border-radius: 5px;
+  border: none;
+}
+
+.posted-by,
+.name-li,
+.comment-name {
+  display: inline;
+}
+
+.comment-posted-by {
+  display: inline;
+}
+
+.comment-box,
+.name-box,
+.btn-submit-comment {
+  visibility: visible;
+}