diff --git a/index.html b/index.html index 7831774..cdca2f4 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,17 @@ DMD 3440 - Room of Chat - - + +

Welcome to Room of Chat for DMD 3440

- - +
+
+ + +
+ \ No newline at end of file diff --git a/main.css b/main.css index 6f290a3..8fa49b4 100644 --- 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; } \ No newline at end of file diff --git a/main.js b/main.js index 2b40a14..059c038 100644 --- a/main.js +++ b/main.js @@ -9,4 +9,49 @@ if ('serviceWorker' in navigator) { }); } else { console.log('CLIENT: service workers are not supported.'); - } \ No newline at end of file + } + + 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 = "" + sender + ": " + 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(); + + }); \ No newline at end of file