From 4f3a40fb3d68f0e561affc1c6377da29cfbe3e7f Mon Sep 17 00:00:00 2001
From: Kathryn Fabbroni <kathrynfabbroni@kathryns-air-3.mynetworksettings.com>
Date: Sun, 17 Nov 2024 16:05:28 -0500
Subject: [PATCH 1/2] initial commit

---
 index.html | 24 ++++++++++++++++++++++++
 main.js    |  1 +
 style.css  |  3 +++
 3 files changed, 28 insertions(+)
 create mode 100644 index.html
 create mode 100644 main.js
 create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..19029b9a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ReReddi</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>
+    <h1>Hello, world!</h1>
+    <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
new file mode 100644
index 00000000..0d3d3bbb
--- /dev/null
+++ b/main.js
@@ -0,0 +1 @@
+console.log("hello,world")
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..adc68fa6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

From ff36e97b1da3c00be10be0bb4e714a9094d08269 Mon Sep 17 00:00:00 2001
From: Kathryn Fabbroni <kathrynfabbroni@kathryns-air-3.mynetworksettings.com>
Date: Tue, 26 Nov 2024 09:52:16 -0500
Subject: [PATCH 2/2] added ability to add and remove comments

---
 index.html | 40 +++++++++++++++++++++++--
 main.js    | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  | 59 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 181 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 19029b9a..feb98d98 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ReReddi</title>
+    <title>ReReddt</title>
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -13,7 +13,43 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h1>Hello, world!</h1>
+    <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"
diff --git a/main.js b/main.js
index 0d3d3bbb..c1db2210 100644
--- a/main.js
+++ b/main.js
@@ -1 +1,85 @@
-console.log("hello,world")
\ No newline at end of file
+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
index adc68fa6..66cb7021 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,60 @@
+body {
+  background: lightskyblue;
+  color: darkslategrey;
+}
+
 h1 {
-  color: red;
+  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;
 }
