projectshft · Kfabb · Nov 17, 2024 · Nov 26, 2024 · ronyrosenberg · Dec 1, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ReReddt</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="row">
+      <div class="col"></div>
+      <div class="col-5">
+        <h1>ReReddit</h1>
+        <div class="posts lead"></div>
+        <div class="post-input">
+          <h2>Make a Post</h2>
+          <form>
+            <div class="form-group post-submission">
+              <input
+                type="text"
+                class="form-control"
+                id="postText"
+                placeholder="Your Text"
+              />
+            </div>
+
+            <div class="form-group post-submission">
+              <input
+                type="text"
+                class="form-control"
+                id="postName"
+                placeholder="Your Name"
+              />
+            </div>
+            <button
+              type="button"
+              id="submitPost"
+              class="btn btn-primary float-start"
+            >
+              Submit
+            </button>
+          </form>
+        </div>
+      </div>
+      <div class="col"></div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,85 @@
+function createPost(){
+  const postText = document.getElementById("postText").value;
+  const postName = document.getElementById("postName").value;
+  const postsDiv = document.querySelector(".posts");
+
+  const newPost = document.createElement("div");
+  newPost.className = "d-inline-flex newPost";
+
+
+
+  const newPostP = document.createElement("p");
+  newPostP.innerHTML = `<a class='btn btn-link' id='commentsBtn'>comments</a>
+  <a class='btn btn-link' id='remove'>remove</a> 
+  ${postText} - Posted By: ${postName}
+  <div name= "commentForm" class='commentForm collapse'>
+    <form class="comment-submission">
+      <div name="commentSection"></div>
+        <div class='form-group' name='comment-input'>
+          <input type="text" class='form-control' name='commentText' placeholder ='Your Comment'>
+        </div>
+      <div class='form-group' name='name-input'>
+        <input type='text' class='form-control' name='commentName' placeholder='Your Name'>
+      </div>
+      <button type='button' id='submitComment' class='btn btn-primary float-start'>Submit</button>
+    </form>
+  </div>`
+  ;
+  newPost.appendChild(newPostP);
+  postsDiv.append(newPost)
+}
+
+document.getElementById("submitPost").addEventListener("click", () => {
+  if (document.getElementById("postText").value && document.getElementById        ("postName").value){
+    createPost();
+    postText.value = "";
+    ostName.value = "";}
+  else {alert("Please fill out all post input fields")}
+})
+
+document.addEventListener("click", (e) =>{
+  if (e.target.id === "remove"){
+    e.target.closest(".newPost").remove()
+  }
+})
+
+document.addEventListener("click", (e) => {
+  if (e.target.id === "commentsBtn"){
+    const children = e.target.parentElement.children;
+    const form = children.namedItem("commentForm");
+    if (form.classList.contains("collapse")){
+      form.classList.remove("collapse");
+    } 
+    else (form.classList.add("collapse"));
+
+  }})
+
+document.addEventListener("click", (e)=> {
+  if (e.target.id === "submitComment" ){
+    const submitButton = e.target;
+    const form = submitButton.closest(".comment-submission");
+    const commentSection = form.children.commentSection;
+    const commentTextInput = form.children["comment-input"];
+    let comment = commentTextInput.children["commentText"].value;
+    let commenter = form.children["name-input"].children["commentName"].value;
+    if (comment && commenter){
+      const newComment = document.createElement("div");
+      newComment.className = "d-inline-flext newComment"
+      const newCommentP = document.createElement("p")
+
+      newCommentP.innerHTML = `<a class='btn btn-link' id='removeComment'>remove</a> ${comment} - Posted By: ${commenter}`
+      newComment.appendChild(newCommentP)
+      commentSection.append(newComment)}
+    else(alert("Please fill out all comment input fields"));
+  form.children["name-input"].children["commentName"].value = "";
+  form.children["comment-input"].children["commentText"].value = ""
+  }})
+
+  document.addEventListener("click", (e) => {
+    if (e.target.id === "removeComment"){
+      e.target.closest(".newComment").remove()
+    }
+  })
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,60 @@
+body {
+  background: lightskyblue;
+  color: darkslategrey;
+}
+
+h1 {
+  color: black;
+  padding-top: 10px;
+  border-bottom: solid black 3px;
+  margin-bottom: 0px;
+}
+
+.post-submission {
+  padding-bottom: 15px;
+}
+
+.newPost {
+  border-bottom: solid slategray 1px;
+  width: 100%;
+}
+
+.posts {
+  width: 100%;
+}
+.posts button {
+  padding: 0;
+  height: 30px;
+  margin-right: 3px;
+}
+
+.posts p {
+  font-size: 16px;
+  margin: 0;
+}
+
+#remove,
+#commentsBtn,
+#removeComment {
+  padding: 0px;
+}
+
+hr {
+  margin: 0;
+  width: 100%;
+}
+
+.comment-submission {
+  padding-bottom: 15px;
+}
+
+.newComment {
+  border: 5pc;
+  padding: 5px;
+  margin: 5px;
+}
+
+#removeComment {
+  float: left;
+  padding-right: 2px;
+}