Lesson: Rendering Messages

Andrew Mead · Andrew Mead · commit adf53d321ee8 · 2019-01-31T09:57:29.000-05:00
diff --git a/chat-app/public/index.html b/chat-app/public/index.html
@@ -6,12 +6,23 @@
     <body>
         Chat App
         
+        <div id="messages"></div>
+
         <form id="message-form">
             <input name="message" placeholder="Message">
             <button>Send</button>
         </form>
         <button id="send-location">Send location</button>
 
+        <script id="message-template" type="text/html">
+            <div>
+                <p>{{message}}</p>
+            </div>
+        </script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
         <script src="/socket.io/socket.io.js"></script>
         <script src="/js/chat.js"></script>
     </body>
diff --git a/chat-app/public/js/chat.js b/chat-app/public/js/chat.js
@@ -5,9 +5,17 @@ const $messageForm = document.querySelector('#message-form')
 const $messageFormInput = $messageForm.querySelector('input')
 const $messageFormButton = $messageForm.querySelector('button')
 const $sendLocationButton = document.querySelector('#send-location')
+const $messages = document.querySelector('#messages')
+
+// Templates
+const messageTemplate = document.querySelector('#message-template').innerHTML
 
 socket.on('message', (message) => {
     console.log(message)
+    const html = Mustache.render(messageTemplate, {
+        message
+    })
+    $messages.insertAdjacentHTML('beforeend', html)
 })
 
 $messageForm.addEventListener('submit', (e) => {
