projectshft · Yarles-13 · Aug 4, 2024 · Aug 4, 2024
diff --git a/index.html b/index.html
@@ -1,43 +1,54 @@
 <html>
 <head>
   <title>Forum</title>
-  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
 </head>
+
+
+
 <body>
   <div class="row">
-    <div class="col-md-6 col-md-offset-3">
-
-      <div class="page-header">
-        <h1>Forum</h1>
+    <div class="col s12 m8 offset-m2">
+      <div class="card" id="postCard">
+        <div class="card-content">
+          <h3>Add a New Post</h3>
+          <form onsubmit="event.preventDefault();">
+            <div class="input-field">
+              <input id="name" type="text" class="validate">
+              <label for="name">What's your name?</label>
+            </div>
+            <div class="input-field">
+              <input id="message" type="text" class="validate">
+              <label for="message">Tell us what you're thinking</label>
+            </div>
+            <div class="center">
+              <a id="submit" class="btn-floating btn-large waves-effect waves-light red">
+                <i class="material-icons">+</i>
+              </a>
+            </div>
+            <a id="viewPosts" class="btn btn-link">View Posts</a>
+          </form>
+        </div>
       </div>
 
-      <div class="posts">
-      </div>
+
+      <div id="posts" class="posts hide"></div>
 
-      <form style="margin-top:30px;" onsubmit="event.preventDefault();">
-        <h3>Add a new post</h3>
-
-        <div class="form-group">
-          <input id="name" type="text"
-            class="form-control"
-            placeholder="Name"></input>
-        </div>
-
-        <div class="form-group">
-          <textarea id="message" type="text"
-          class="form-control"
-          placeholder="Message"></textarea>
-        </div>
-
-        <button id="submit" class="btn btn-primary">Post</button>
-      </form>
 
+      <div class="center posts-page">
+        <a id="backToForm" class="btn btn-link hide">Back to Form</a>
+      </div>
     </div>
   </div>
-
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
   <script src="main.js"></script>
 </body>
+
 </html>
 
 
 
+
diff --git a/main.js b/main.js
@@ -1 +1,112 @@
-// your code here
+console.clear();
+
+const nameInput = document.getElementById("name");
+const postInput = document.getElementById("message");
+const submitButton = document.getElementById("submit");
+const viewPostsButton = document.getElementById("viewPosts");
+const backToFormButton = document.getElementById("backToForm");
+let posts = document.getElementById("posts");
+let addPostCard = document.getElementById("postCard");
+
+function createElement(tag, innerText, className) {
+  let newElement = document.createElement(tag.toString());
+  newElement.innerText = innerText;
+  if (className) {
+    newElement.classList.add(className);
+  }
+  return newElement;
+  ;
+}
+
+function addPost(e) {
+  e.preventDefault(); // Prevent default form submission behavior
+  let name = nameInput.value;
+  let text = postInput.value;
+
+  if (name !== "" && text !== "") {
+    let postContainer = createElement("div", null, "post-container");
+    let postHeader = createElement("div", null, "post-header");
+    let postBody = createElement("div", null, "post-body");
+
+    let nameElement = createElement("h5", name, null);
+    let textElement = createElement("p", text, null);
+    let removeButton = createElement("a", " Remove ", "btn-link");
+    let editButton = createElement("a", " Edit ", "btn-link");
+    let viewComments = createElement("a", " View Replies ", "btn-link");
+    let replyContainer = createElement('div', null, 'reply-container');
+    let replyInput = createElement('input', null, 'reply-input');
+    let submitReplyButton = createElement('a', " Reply ", "btn-link");
+
+    let replyCount = 0; // Initialize reply count
+
+    function updateReplyCount() {
+      viewComments.innerText = `View (${replyCount}) Replies`;
+      if (replyCount === 0) {
+        viewComments.innerText = "Replies";
+      }
+    }
+
+    // Remove button
+    removeButton.addEventListener("click", () => {
+      postContainer.remove();
+    });
+
+    // Edit button
+    editButton.addEventListener('click', () => {
+      let editedComment = prompt('Edit comment:');
+      textElement.innerText = editedComment;
+    });
+
+    // View comments button
+    viewComments.addEventListener('click', () => {
+      replyContainer.classList.toggle('hide');
+    });
+
+    // Submit reply button
+    submitReplyButton.addEventListener('click', () => {
+      if (replyInput.value !== '') {
+        let reply = createElement('div', replyInput.value, 'reply');
+        replyContainer.appendChild(reply);
+        replyInput.value = '';
+        replyCount++;
+        updateReplyCount();
+      }
+    });
+
+    postHeader.appendChild(nameElement);
+    postHeader.appendChild(removeButton);
+    postHeader.appendChild(editButton);
+    postHeader.appendChild(viewComments);
+
+    postBody.appendChild(textElement);
+    postBody.appendChild(replyContainer);
+    postBody.appendChild(replyInput);
+    postBody.appendChild(submitReplyButton);
+
+    postContainer.appendChild(postHeader);
+    postContainer.appendChild(postBody);
+
+    posts.appendChild(postContainer);
+
+    // Clear inputs
+    nameInput.value = "";
+    postInput.value = "";
+  }
+}
+
+submitButton.addEventListener("click", addPost);
+
+// Hide/show functionality for 'viewPosts' and 'backToForm' buttons
+viewPostsButton.addEventListener('click', () => {
+  addPostCard.classList.add('hide');
+  posts.classList.remove('hide');
+  backToFormButton.classList.remove('hide');
+  viewPostsButton.classList.add('hide');
+});
+
+backToFormButton.addEventListener('click', () => {
+  addPostCard.classList.remove('hide');
+  posts.classList.add('hide');
+  backToFormButton.classList.add('hide');
+  viewPostsButton.classList.remove('hide');
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,75 @@
+.card-content {
+  padding: 20px;
+}
+
+.post-container {
+  margin-top: 20px;
+  padding: 15px;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.post-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+}
+
+.post-body {
+  margin-top: 10px;
+}
+
+.reply-container {
+  margin-top: 20px;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+  background-color: #f0f0f0;
+}
+
+.reply-input {
+  margin-top: 10px;
+}
+
+.reply {
+  margin-top: 10px;
+  padding: 8px;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.btn-floating {
+  margin: 10px;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.hide {
+  display: none;
+}
+
+.btn-link {
+  background-color: transparent;
+  color: #0277bd;
+  font-size: 14px;
+  font-weight: bold;
+  border: none;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.red-orange {
+  color: orangered;
+  font-size: 10px;
+  font-weight: 700;
+}
+.purple {
+  color: blueviolet;
+  font-size: 10px;
+  font-weight: 700;
+}