Display and style answers.

Other minor style updates.

models/lecture.js

@@ -1,7 +1,10 @@
 const mongoose = require("mongoose");
 
 const AnswerSchema = new mongoose.Schema({
-    name: String,
+    name: {
+        type: String,
+        required: true
+    },
     content: {
         type: String,
         required: true

views/learn/index.css

@@ -10,6 +10,20 @@ h1{
     text-align: center;
 }
 
+button{
+    height: 35px;
+    width: 175px;
+    border: 1px solid black;
+    background: white;
+    margin: 10px;
+    cursor: pointer;
+    box-shadow: 0 0 1px black;
+}
+
+button:hover{
+    background: rgb(196, 198, 192);
+}
+
 .cardContainer{
     width: 90%;
     padding: 25px;
@@ -67,7 +81,6 @@ h1{
     #lectureData{
         margin-right: auto;
         padding-left: 100px;
-        width: 100%;
     }
 
         #lectureData > *{
@@ -145,15 +158,25 @@ h1{
             height: 25vh;
         }
 
-        #questionForm button{
-            height: 35px;
-            width: 175px;
-            border: 1px solid black;
-            background: white;
-            margin: 10px;
-            cursor: pointer;
+#answerContainer{
+    width: 50%;
+}
+
+    .answer{
+        width: 100%;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background:rgb(196, 198, 192);
+        margin: 10px;
+    }
+
+        .answerHeader{
+            display: flex;
+            font-size: 12px;
         }
-        
-        #questionForm button:hover{
-            background: rgb(196, 198, 192);
-        }
+
+            .answerHeader > *{
+                margin: 5px;
+            }

views/learn/lecture.html

@@ -37,6 +37,18 @@
                         <p class="questDate"></p>
                     </div>
                     <p class="questContent"></p>
+                    <div class="answerContainer"></div>
+                </div>
+            </template>
+
+            <template id="answer">
+                <div class="answer">
+                    <div class="answerHeader">
+                        <p class="answerName"></p>
+                        <p>at</p>
+                        <p class="answerDate"></p>
+                    </div>
+                    <p class="answerContent"></p>
                 </div>
             </template>
         </div>
@@ -119,6 +131,7 @@
 
                     //Populate questions
                     let template = document.getElementById("question").content.children[0];
+                    let answerTemplate = document.getElementById("answer").content.children[0];
                     let questionContainer = document.getElementById("questionContainer");
                     response.questions.reverse();
                     for(let i = 0; i < response.questions.length; i++){
@@ -131,6 +144,20 @@
                         question.querySelector(".questDate").innerText = date;
                         question.querySelector(".questContent").innerText = response.questions[i].content;
                         questionContainer.appendChild(question);
+
+                        //Populate answers
+                        response.questions[i].answers.reverse();
+                        for(let j = 0; j < response.questions[i].answers.length; j++){
+                            let answer = response.questions[i].answers[j];
+                            let answerDate = new Date(answer.createdAt);
+                            answerDate = answerDate.toLocaleString("en-US");
+
+                            let elem = answerTemplate.cloneNode(true);
+                            elem.querySelector(".answerName").innerText = answer.name;
+                            elem.querySelector(".answerDate").innerText = answerDate;
+                            elem.querySelector(".answerContent").innerText = answer.content;
+                            question.querySelector(".answerContainer").appendChild(elem);
+                        }
                     }
                 })
                 .catch((err)=>{});
@@ -185,9 +212,6 @@
                         })
                         .catch((err)=>{});
                 }
-
-                //New Answer
-                
         </script>
     </body>
 </html>