03/09

main.css

@@ -16,22 +16,25 @@ header{
 
 
 #chatBox {
-    width:100%;
-    position:absolute;
-    bottom:70px;
-    top:80px;
-    right:0px;
-    left:0px;
+    width: 100vw;
+    position: absolute;
+    bottom: 70px;
+    top: 80px;
+    right: 0px;
+    left: 0px;
+    overflow: scroll;
     background:#fff;
-
     color:#000;
     padding:15px;
+
 }
 
+
+
 #chatInput {
     position:fixed;
     left:0px;
-    bottom:0;
+    bottom:0; 
     width:100%;
     background-color:#eee;
     display: flex;
@@ -74,4 +77,4 @@ header p{
     height: 40px;
     border-radius: 50px;
     text-align: center;;
-}
+}

main.js

@@ -22,6 +22,7 @@ if ('serviceWorker' in navigator) {
   let usernameDisplay = document.querySelector("#usernameDisplay");
   let userStatusDisplay = document.querySelector("#userStatusDisplay");
   let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay");
+  let sendButton = document.querySelector("#sendBtn")
 
 
   usernameDisplay.innerHTML = userName;
@@ -61,7 +62,11 @@ if ('serviceWorker' in navigator) {
       saveMessageToFirebase(usrMsg);
     }
   }
-
+  watchFirebaseForChanges(
+    function(msg){
+        displayNewMessage(msg.data())
+    }
+);
   /** All the triggers and event listener assignments down here... */
 
   // assign the "Make New Message" function to the button click
@@ -95,4 +100,16 @@ if ('serviceWorker' in navigator) {
       userName = localStorage.getItem("userName");
   });
 
+  sendButton.addEventListener("click", function () {
+    var msgObj = {
+        dateStamp:Date.now(),
+        message: inputBox.value,
+        sentBy: username
+    }
+
+    saveMessageToFirebase(msgObj);
+
+    inputBox.value = "";
+    inputBox.focus();
+});
 

profile.js

@@ -19,6 +19,22 @@ function saveProfileImageLocally() {
     }
 }
 
+//set button colors when click
+/* var count = 1;
+    function setColor(btn, color) {
+        var property = document.getElementById("profileSaveInput");
+        if (count == 0) {
+            property.style.backgroundColor = "#f9d861"
+            count = 1;        
+        }
+        else {
+            property.style.backgroundColor = "#3e2fae"
+            count = 0;
+        }
+    } */
+
+
+
 profileSaveInput.addEventListener( 'click', function(e) {
     e.preventDefault();
     localStorage.setItem("userName", usernameInput.value);