projectshft · Jasonsdc13 · Jan 3, 2025 · Jan 3, 2025 · ronyrosenberg · Jan 6, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<head>
+  <title>ReReddit</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+  <div class="row">
+    <div class="col-md-6 col-md-offset-3">
+
+      <div class="page-header">
+        <h1>Rereddit</h1>
+      </div>
+      <form style="margin-top:30px;" onsubmit="event.preventDefault();">
+      <div class="posts">
+      </div>
+
+        <h3>Add a new post</h3>
+
+        <div class="form-group">
+          <input id="message" type="text"
+          class="form-control"
+          placeholder="Post Text"></input>
+        </div>
+
+        <div class="form-group">
+          <input id="name" type="text"
+            class="form-control"
+            placeholder="Your Name"></input>
+        </div>
+
+        <button id="submit" class="btn btn-primary">Submit Post</button>
+      </form>
+
+    </div>
+  </div>
+
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,112 @@
+document.getElementById('submit').addEventListener('click', function () {
+
+  let name = document.getElementById('name').value;
+  let text = document.getElementById('message').value;
+
+  if (!name || !text) {
+    alert('Please fill in both name and text.');
+    return;
+  }
+
+  let postsDiv = document.querySelector('.posts');
+  let newPostDiv = document.createElement('div');
+  newPostDiv.classList.add('post')
+
+  let commentsButton = document.createElement('a');
+  commentsButton.href = "#";
+  commentsButton.classList.add('btn', 'comments-btn');
+  commentsButton.textContent = 'Comments';
+  newPostDiv.append(commentsButton);
+
+  let removeButton = document.createElement('a');
+  removeButton.href = "#";
+  removeButton.classList.add('btn', 'remove-btn');
+  removeButton.textContent = 'Remove';
+  removeButton.addEventListener('click', function () {
+    postsDiv.removeChild(newPostDiv)
+  });
+  newPostDiv.append(removeButton);
+
+  let newPostTextP = document.createElement('p');
+  let newPostTextNode = document.createTextNode(text);
+  newPostTextP.appendChild(newPostTextNode);
+
+  let newPostNameP = document.createElement('p');
+  let newPostNameNode = document.createTextNode('Posted by: ' + name);
+  newPostNameP.appendChild(newPostNameNode);
+
+  newPostDiv.append(newPostTextP.textContent + " - " + newPostNameP.textContent);
+  postsDiv.append(newPostDiv);
+
+  let newPostHR = document.createElement('hr');
+  newPostDiv.append(newPostHR);
+
+  document.getElementById('name').value = '';
+  document.getElementById('message').value = '';
+
+  let commentSectionVisible = false; 
+  commentsButton.addEventListener('click', function () {
+    if (commentSectionVisible) {
+      newCommentContainer.style.display = 'none';
+      commentsButton.textContent = 'Comments';
+    } else {
+      newCommentContainer.style.display = 'block';
+      commentsButton.textContent = 'Hide Comments';
+    }
+    commentSectionVisible = !commentSectionVisible;
+ });
+
+//comment section for comments
+  let newCommentContainer = document.createElement('div');
+  newCommentContainer.classList.add('new-comment');
+
+  let commentNameInput = document.createElement('input');
+  commentNameInput.classList.add('comment-name');
+  commentNameInput.placeholder = 'Your name';
+
+
+  let commentTextInput = document.createElement('input');
+  commentTextInput.classList.add('comment-input');
+  commentTextInput.placeholder = 'Comment Text';
+
+  let newCommentButton = document.createElement('a');
+  newCommentButton.href = "#";
+  newCommentButton.classList.add('btn', 'new-comment-btn');
+  newCommentButton.textContent = 'Submit Comment'
+
+  newCommentButton.addEventListener('click', function() {
+    let commentName = commentNameInput.value;
+    let commentText = commentTextInput.value;
+
+    if (!commentName || !commentText) {
+      alert('Please fill in both name and text.');
+      return;
+    }
+
+    let commentDiv = document.createElement('div');
+    commentDiv.classList.add('comment');
+
+    let commentNameP = document.createElement('p');
+    commentNameP.textContent =  'Posted by: ' + commentName;
+
+    let commentTextP = document.createElement('p');
+    commentTextP.textContent = commentText;
+
+    let newRemoveButton = document.createElement('a');
+    newRemoveButton.href = "#";
+    newRemoveButton.classList.add('btn', 'new-remove-btn');
+    newRemoveButton.textContent = 'Remove';
+    newRemoveButton.addEventListener('click', function () {
+    commentDiv.remove();
+  });
+
+    commentDiv.append(newRemoveButton, commentTextP.textContent + " - " +  commentNameP.textContent);
+    newCommentContainer.appendChild(commentDiv);
+
+    commentNameInput.value = '';
+    commentTextInput.value = '';
+  })
+
+  newCommentContainer.append(commentNameInput, commentTextInput, newCommentButton);
+  newPostDiv.appendChild(newCommentContainer);
+  });
diff --git a/style.css b/style.css
@@ -0,0 +1,38 @@
+.posts .post {
+  margin-bottom: 20x;
+  padding: 15px;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.comments-btn {
+  margin-top: 10px;
+  display: inline-block;
+}
+
+.remove-btn {
+  margin-top: 10px;
+  display: inline-block;
+}
+
+.new-remove-btn {
+  margin-top: 10px;
+  display: inline-block;
+}
+
+.new-comment-btn {
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #008cba;
+  color: white;
+}
+
+.comment-name,
+.comment-input {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  box-sizing: border-box;
+}