adding moment

paras151 · Aug 5, 2019 · 1f917b6 · 1f917b6
1 parent 00b9a3d
commit 1f917b6
Show file tree

Hide file tree

Showing 8 changed files with 4,649 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.1",
+    "moment": "^2.24.0",
     "socket.io": "^2.2.0"
   },
   "devDependencies": {

diff --git a/playground/time.js b/playground/time.js
@@ -0,0 +1,7 @@
+var moment = require('moment');
+
+var date = moment();
+
+console.log(date.format('MMM Do, YYYY'));
+
+console.log(date.format('LT a'))
diff --git a/public/css/styles.css b/public/css/styles.css
diff --git a/public/index.html b/public/index.html
@@ -2,23 +2,35 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <link rel = "stylesheet" href="css/styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
-<body>
-    <p>Welcome to body</p>
+<body class="chat">
 
-    <ol id="messages"></ol>
+    <div class="chat__sidebar">
+        <h3>People</h3>
+        <div id="users"></div>
+    </div>
 
-    <form id="message-form">
-        <input name="message" type="text" placeholder="Mesage"/>
-        <button>Send</button>
-    </form>
+    <div class="chat__main">
+            <ol id="messages" class="chat__messages"></ol>
 
-    <button id="send-location">Send location</button>
+        <div class="chat__footer">
+                <form id="message-form">
+                        <input id="msg" name="message" type="text" placeholder="Mesage"/>
+                        <button>Send</button>
+                    </form>
+
+                    <button id="send-location">Send location</button>
+        </div>
+
+    </div>
+
     <script src = "/socket.io/socket.io.js"></script>
     <script src = "js/libs/jquery-3.4.1.min.js"></script>
+    <script src = "js/libs/moment.js"></script>
     <script src = "js/index.js"></script>
 </body>
 </html>
diff --git a/public/js/index.js b/public/js/index.js
@@ -1,3 +1,5 @@
+
+
 var socket = io(); 
 
 socket.on('connect',function(){
@@ -12,16 +14,18 @@ socket.on('disconnect',function(){
 
 socket.on('newMessage',function(message){
     // console.log("New Message",message);
-
+    var formattedTime = moment(message.createdAt).format('LT');
     var li = jQuery('<li></li>');
-    li.text(`${message.from}: ${message.text}`)
+    li.text(`${message.from} ${formattedTime}: ${message.text}`)
     jQuery('#messages').append(li);
 })
 
 socket.on('newLocationMessage',function(message){
     var li = jQuery('<li></li>');
     var a = jQuery('<a target="_blank">My current location</a>')
-    li.text(`${message.from}: `);
+    var formattedTime = moment(message.createdAt).format('LT');
+
+    li.text(`${message.from} ${formattedTime}: `);
     a.attr('href',message.url);
     li.append(a);
     jQuery('#messages').append(li);
@@ -44,8 +48,11 @@ jQuery('#message-form').on('submit',function(e){
         from:'User',
         text:jQuery('[name=message]').val()
     },function(){
+
 
     })
+    // jQuery('[name=message]').val('');
+
 })
 
 var locationButton = jQuery('#send-location');