changes

css/main.css

@@ -5,6 +5,7 @@ body{
     background-color: white;
     color: black ;
     font-family: 'Advent Pro';
+    overflow: hidden;
 }
 h1{
     text-align: center;
@@ -22,6 +23,7 @@ h1{
     right: 0px;
     left: 0px;
     top: 60px; 
+    overflow-y: auto;
 
 }
 #chatInput{

index.html

@@ -16,13 +16,14 @@
     <div class="box">
         <header><h1>Sending messages as <img class="smallImage" src="#" id="profilePicInput"/><a href="profile.html"><span id="usernameInput">{UserName}</span></a> <span class="small" id="statusInput">{Status}</span></h1></header>
         <header><h1>~Meira's Mobile App Chat Room~</h1></header>
-        <a href="https://github.uconn.edu/pages/met18001/mobile-app-chat-app/profile.html">Click!<img class="smallImage" src="#" id="profilePicInput"/> alt=""></a>
     </div>   
 
         <div id="chatBox">
+            <img class="smallImage" id="userProfilePic"></img>
+
         <div id="chatInput">
             <input type="Text" id="newMsg" placeholder=" Type a Messege!">
-            <button id="sendBtn">Send messege</button>
+            <button id="sendBtn">Send message</button>
         </div>
 
 

js/main.js

@@ -3,6 +3,15 @@
 // A service worker is a piece of code the browser runs behind the scenes.
 
 var username = "Meira";
+let chatBox = document.querySelector("#chatBox")
+var chatInput = document.querySelector("#chatInput");
+var sendBtn = document.querySelector("#sendBtn");
+var profilePicInput = document.querySelector("#profilePic");
+var saveProfileButton = document.querySelector("#saveProfile");
+var profilePicDisplayElement = document.querySelector("#profilePicDisplay");
+var profilePic = localStorage.getItem("userProfilePic") || "unknown.jpg";
+//let arrayOfallMessages = [];
+//const allMessages = arrayOfallMessages.map((obj)=> {return Object.assign({}, obj)});
 
 
 if ('serviceWorker' in navigator) {
@@ -19,21 +28,22 @@ if ('serviceWorker' in navigator) {
 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);
+  message:"Hello,this is a message."
 
 
+}
 
+//displayMessage(sampleMessage); 
 
+function saveProfileImageLocally() {
+  if (profilePicInput.files && profilePicInput.files[0]) {
+      var reader = new FileReader();
+      reader.onload = function(e) {
+          localStorage.setItem("userProfilePic", reader.result);
+      }
+      reader.readAsDataURL(profilePicInput.files[0]); 
+  }
+}
 
 //function makeAndDisplaymMessage(sender,dateStamp,text){
   //var newMessage = {
@@ -44,10 +54,14 @@ console.log(allMessages);
 
   function displayMessage(message) {
     var messageParagraph = document.createElement("p");
+    if (message.sentBy == localStorage.userName){
+      messageParagraph.style.color = "magenta";
+    }
     messageParagraph.innerHTML = message.dateStamp + " " + message.message + " " + message.sentBy;
 
     chatBox.appendChild(messageParagraph);
-    chatBox.scrollTop = chatBox.scrollHeight;
+    messageParagraph.scrollIntoView();
+    //chatBox.scrollTop = chatBox.scrollHeight;
 
   };
 
@@ -59,32 +73,38 @@ console.log(allMessages);
 
 
 
-document.querySelector("#sendBtn").addEventListener('click', function(){
-
+sendBtn.addEventListener('click', function(){
+  var chatInput = document.querySelector("#newMsg"); 
+  let src = 'img/soothing_flute.mp3';
+  let audio = new Audio(src);
+  audio.play();
+  window.navigator.vibrate(200);
+
   var msgObj = {
-    dateStamp:Date.now(),
+    dateStamp: Date.now(),
     message: chatInput.value,
     sentBy: username
 }
 
+console.log(msgObj);
+
 saveMessageToFirebase(msgObj);
 
 chatInput.value = "";
 chatInput.focus();
+});
+
 
-  displayMessage("me","now", document.querySelector("#newMsg").value);
+ // displayMessage("me","now", document.querySelector("#newMsg").value);
   //document.querySelector("#newMsg").value = "";
   //document.querySelector("#newMsg").focus();
-  let src = 'img/soothing_flute.mp3';
-  let audio = new Audio(src);
-  audio.play();
-  window.navigator.vibrate(200);
 
-  let curr_date = new Date();
-  let month = curr_date.getMonth() + 1;
-  let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();
 
-  });
+  //let curr_date = new Date();
+  //let month = curr_date.getMonth() + 1;
+  //let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();
+
+
 
   document.getElementById("usernameInput").innerHTML = localStorage.getItem("userName");
   document.getElementById("statusInput").innerHTML = localStorage.getItem("userStatus");

js/profile.js

@@ -2,7 +2,7 @@
 let usernameInput = document.querySelector("#usernameInput");
 let statusInput = document.querySelector("#statusInput");
 let profilePicInput = document.querySelector("#profilePicInput");
-let profileSaveInput = document.querySelector("#profileSaveInput");
+let profileSaveInput = document.querySelector("#saveProfile");
 
 
 // setting the input values default
@@ -19,8 +19,9 @@ function saveProfileImageLocally() {
     }
 }
 
-profileSaveInput.addEventListener( 'click', function(e) {
+profileSaveInput.addEventListener('click', function(e) {
     e.preventDefault();
+    console.log(usernameInput.value);
     localStorage.setItem("userName", usernameInput.value);
     localStorage.setItem("userStatus", statusInput.value);
 

profile.html

@@ -12,7 +12,7 @@
     <p><input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
     <p><input type="text" placeholder="Status Message" name="StatusMessage" id="statusInput"></p>
     <p><input type="file" id="profilePicInput" name="profilePicInput"></p>
-    <button id="profileSaveInput">Save Profile</button>
+    <button id="saveProfile">Save Profile</button>
     <h1 class="button"> <a href="https://github.uconn.edu/pages/met18001/mobile-app-chat-app/index.html">Go Back to Chat App</a></h1>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt numquam, consequatur eos error ducimus quisquam nam ut quasi sint adipisci sit molestiae, ad dolorum iste possimus deleniti rerum ipsum repudiandae.
@@ -33,4 +33,5 @@
 <script src="js/firebase-config.js"></script>
 <script src="js/register-sw.js"></script>
 <script src="js/profile.js"></script>
+
 </html>