changes

css/main.css

@@ -1,5 +1,28 @@
+*{
+    box-sizing: border-box;
+}
 body{
     background-color:pink;
-    color:#eee;
+    color: black;
     font-family: Arial, Helvetica, sans-serif;
+}
+#chatBox{
+    width: 100%;
+    position: absolute;
+    bottom: 50px;
+    right: 0px;
+    left: 0px;
+
+}
+#chatInput{
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    background-color: purple;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+    height: 70px;
+
 }

index.html

@@ -13,11 +13,13 @@
 
         <header><h1>Welcome to Meira's Mobile App Development Chat Room!</h1></header>
 
-        <div>
-            <input type="Type here hehe">
-            <button>Send messege</button>
+        <div id="chatBox">
+        <div id="chatInput">
+            <input type="Text" id="newMsg" placeholder="Type a Messege!">
+            <button id="sendBtn">Send messege</button>
         </div>
-        <input type="messeges here">
+
+
 
 
 

js/main.js

@@ -12,4 +12,49 @@ if ('serviceWorker' in navigator) {
     console.log('CLIENT: service workers are not supported.');
   }
 
+var sampleMessage = {
+  sentBy:"Meira", 
+  dateStamp:"02/20/2020 at 2:50", 
+  text:"Hello,this is a message."
 
+}
+
+
+  let allMessages = [];
+  let chatBox = document.querySelector("#chatBox")
+
+
+allMessages.push(sampleMessage);
+console.log(allMessages);
+
+
+
+
+
+function makeAndDisplaymMessage(sender,dateStamp,text){
+  var newMessage = {
+    sentBy: sender, 
+    dateStamp: dateStamp, 
+    text:text
+  }
+
+  //display message
+
+  var newMsgP = document.createElement("p");
+  newMsgP.innerText = sender + ": " + text;
+
+  chatBox.appendChild(newMsgP);  
+
+  allMessages.push(newMessage);
+  console.log(allMessages);
+}
+
+document.querySelector("#sendBtn").addEventListener('click', function(){
+
+   makeAndDisplaymMessage("me","now", document.querySelector("#newMsg").value);
+  document.querySelector("#newMsg").value = "";
+  document.querySelector("#newMsg").focus();
+
+  });
+
+