team-scratch · david-dest01 · May 31, 2018 · May 31, 2018 · May 31, 2018 · May 31, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/client/client.js b/client/client.js
@@ -0,0 +1,38 @@
+//console.log('in here')
+//username = "User"
+
+$(document).ready(function(){
+    // grab created_by and message values  
+    $("#send").click(() => {
+      var chatMessage = { name: $("#txtName").val(), message: $("#txtMessage").val() };
+      $.post("http://localhost:3000/message", chatMessage);
+    });
+
+    $('#txtMessage').keypress(function (e) {
+    if (e.which == 13) {
+      //console.log('I was pressed')
+      var chatMessage = { name: $("#txtName").val(), message: $("#txtMessage").val() };
+      $.post("/message", chatMessage);
+      chatMessage.message = '';
+      return false;  
+    }
+    });
+
+    var length = 0;
+    setInterval(() => {
+      var response = '';
+      $.ajax({ 
+        type: "GET",   
+        url: "/message",   
+        async: false,
+        success : function(text) {
+          response = text;
+          if(response.length > length) {
+            $( "#chatlog" ).append(`${response[response.length - 1].created_by}: ${response[response.length - 1].message}<br>`);   
+            length = response.length;
+          }
+        }
+      });
+  }, 200);
+})
+
diff --git a/client/css/styles.css b/client/css/styles.css
@@ -0,0 +1,26 @@
+body {
+  background-color: #2196f3;
+}
+
+.chatBox {
+  width: 400px;
+  margin: auto;
+  overflow: none;
+}
+
+.appTitle {
+  color: white;
+  text-align: center;
+}
+
+#chatlog {
+  height: 400px;
+  background-color:white;
+  border: 1px solid black;
+  overflow: auto;
+}
+
+
+#name {
+  color: blue;
+}
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Home page</title>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+<link rel="stylesheet" type="text/css" href="css/styles.css">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+<script src="./client.js"></script>
+</head>
+<body>
+<h1 class="appTitle"> TagChat</h1>
+    <br>
+        <div class="chatBox">
+            <div id="chatlog"></div>
+            <br>
+            <input id='txtName' class='form-control' placeholder="name" type="text">
+            <br>
+            <textarea id="txtMessage" class="form-control" placeholder="Message"></textarea>
+        <br>
+        <button id="send" class="btn btn-info">Send</button>
+      </div>
+    </div>
+  </body>
+</html>