changes

static/js/main.js

@@ -3,6 +3,8 @@ for (let i = 0; i < posts.length; i++) {
     let post = posts[i]
     let commentButton = post.children["commentButton"]
     let commentId = post.children["commentId"]
+    let commentBurgerDiv = post.children["commentBurgerDiv"]
+    let usernameElement = post.children["usernameElement"]
     let commentDiv = post.children["commentDiv"]
     let commentBox = commentDiv.children["commentBox"]
     let commentSave = commentDiv.children["commentDivSave"]
@@ -20,6 +22,16 @@ for (let i = 0; i < posts.length; i++) {
         title = String(commentBox.value)
         id = String(commentId.innerHTML)
 
+
+        function addPost() {
+            console.log("fart")
+
+            let para = document.createElement("p");
+            const node = document.createTextNode(usernameElement.innerHTML + ": " + title);
+            para.appendChild(node)
+            commentBurgerDiv.append(para)
+        }
+
         fetch("/comment", {
             method: "POST",
             body: JSON.stringify({
@@ -30,8 +42,7 @@ for (let i = 0; i < posts.length; i++) {
                 "Content-Type": "application/json"
             }
         })
-            .then((response) => response.json())
-            .then((json) => console.log(json));
+            .then((response) => addPost())
 
         commentDiv.classList.add("hidden")
     });

templates/main.html

@@ -39,21 +39,33 @@
         <br><br>
         {% endif %}
         {% endif %}
+        {% if userdata %}
+        <p class="hidden" id="usernameElement">{{ userdata.username }}</p>
+        {% endif %}
         <img loading="lazy" src='{{ post["imageurl"] }}'>
         <p class="text">{{ post["textstr"] }}</p>
-        <div class="commentsdiv">
+        {% if getComments(post["id"]) | length > 0 %}
+        <div id="commentBurgerDiv" class="commentsdiv">
             {% for comment in getComments(post["id"]) %}
             <p>{{ getUser(comment["creator"])["username"] }}: {{ comment.textstr }}</p>
             {% endfor %}
         </div>
-        <p id="commentId" class="hidden">{{ post.id }}</p>
-        {% if userdata %}
-        <button id="commentButton" class="comment">comment</button>
+        {% else %}
+        <div id="commentBurgerDiv" class="hidden"></div>
         {% endif %}
+        <p id="commentId" class="hidden">{{ post.id }}</p>
+        <button id="commentButton" class="comment">comment</button>
         <div id="commentDiv" class="commentdiv hidden">
+            {% if userdata %}
             <input id="commentBox" type="text" placeholder="content">
             <button id="commentDivSave">save</button>
             <button id="commentDivCancel">cancel</button>
+            {% else %}
+            <a href="/login">Log in</a>, or <a href="/signup">create an account</a> to <b>comment</b>, post, and more!
+            <input id="commentBox" class="hidden" type="text" placeholder="content">
+            <button id="commentDivSave" class="hidden">save</button>
+            <button id="commentDivCancel" class="hidden">cancel</button>
+            {% endif %}
         </div>
         <script>
             function time2TimeAgo(ts) {

templates/signup.html

@@ -15,7 +15,7 @@
         <a href="/">back</a>
         <br><br>
         <h1>Create a burgercat account</h1>
-        <p>Create a burgercat acccount to create posts and more!</p>
+        <p>Create a burgercat acccount to create posts, comment, and more!</p>
         {% with messages = get_flashed_messages() %}
             {% if messages %}
                 {% for message in messages %}