2/20 code changes

jrs06005 · Feb 20, 2020 · e07ae51 · e07ae51
1 parent 4163422
commit e07ae51
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,13 +5,17 @@
         <meta name="theme-color" content="#f00" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>DMD 3440 - Room of Chat</title>
-        <link href="main.css" rel="stylesheet">
-        <link rel="manifest" href="manifest.json">
+        <link href="main.css?version=2" rel="stylesheet">
+        <link rel="manifest" href="manifest.json?version=2">
     </head>
     <body>
 
         <header><h1>Welcome to Room of Chat for DMD 3440</h1></header>
-
-        <script src="main.js"></script>
+        <div id="chatBox"></div>
+        <div id="chatInput">
+            <input id="newMsg" type="text" placeholder="type a message!">
+            <button id="sendBtn">Send</button>
+        </div>
+        <script src="main.js?version=2"></script>
     </body>
 </html>
diff --git a/main.css b/main.css
@@ -1,5 +1,39 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
     background-color: rgb(32, 49, 88);
-    color:#eee;
+    color:black;
     font-family: Arial, Helvetica, sans-serif;
+}
+
+#chatBox {
+    width:100%;
+    position:absolute;
+    bottom:70px;
+    top:60px;
+    right:0px;
+    left:0px;
+    background:#eee;
+    border:1px solid #333;
+}
+
+#chatInput {
+    position:fixed;
+    left:0px;
+    bottom:0;
+    width:100%;
+    background-color:#ccc;
+    display: flex;
+    justify-content: space-between;
+    height: 70px;;
+}
+
+#chatInput input {
+    width:100%;
+}
+
+#chatInput button {
+    margin:0px 10px;
 }
diff --git a/main.js b/main.js
@@ -9,4 +9,49 @@ if ('serviceWorker' in navigator) {
     });
   } else {
     console.log('CLIENT: service workers are not supported.');
-  }
+  }
+
+  var sampleMessage = {
+    sentBy:"Joel",
+    dateStamp:"02/20/2020 at 2:49",
+    text:"Hello, this is a new message."
+  }
+
+  let allMessages = [];
+  let chatBox = document.querySelector("#chatBox");
+
+  console.log(allMessages);
+
+  function makeAndDisplayMessage(sender, dateStamp, text) {
+
+    // make message
+    var newMessage = {
+      sentBy: sender,
+      dateStamp: dateStamp,
+      text: text
+    }
+
+    allMessages.push(newMessage);
+    // end make message
+
+    // display message
+
+      var newMsgP = document.createElement("p");
+          newMsgP.innerHTML = "<strong>" + sender + "</strong>: " + text;
+
+      chatBox.appendChild(newMsgP);
+
+    // end display message
+
+
+    console.log(allMessages);
+  }
+
+  document.querySelector("#sendBtn").addEventListener('click', function(){
+
+    makeAndDisplayMessage("me", "now", document.querySelector("#newMsg").value);
+
+    document.querySelector("#newMsg").value = "";
+    document.querySelector("#newMsg").focus();
+
+  });