Global Chat

frontend/static/css/index.css

@@ -1,37 +1,9 @@
 body {
-    --nav-width: 200px;
-    margin: 0 0 0 var(--nav-width);
+    margin: 10;
     font-family: 'Quicksand', sans-serif;
     font-size: 18px;
 }
 
-.nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: var(--nav-width);
-    height: 100vh;
-    background: #222222;
-}
-
-.nav__link {
-    display: block;
-    padding: 12px 18px;
-    text-decoration: none;
-    color: #eeeeee;
-    font-weight: 500;
-}
-
-.nav__link:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-#app {
-    margin: 2em;
-    line-height: 1.5;
-    font-weight: 500;
-}
-
 a {
     color: #009579;
-}
+}

frontend/static/js/views/Chat.js

@@ -11,6 +11,14 @@ export default class extends AbstractView {
 		this.chatSocket.onmessage = function(e){
 			let data = JSON.parse(e.data)
 			console.log('Data:', data)
+			if (data.type === 'chat') {
+				let messages = document.getElementById('messages')
+
+				messages.insertAdjacentHTML('beforeend', `
+					<div><p>${data.message}</p></div>
+				`)
+			}
+
 		}
     }